[HTML 시맨틱] 시맨틱 요소 (main, nav, section, article ...)

1) main

• HTML 문서의 주요 내용을 나타내는 태그이다.
  • 주요 내용이란 중심 주제 또는 응용 프로그램의 중심 기능과 직접 관련있거나 확장된 내용을 말한다.
• hidden 속성이 지정되지 않은 <main>요소가 두 개 이상 있어서는 안된다.
• 사이드바, 네비게이션 링크, 저작권 정보, 사이트 로고, 검색 양식 등 문서 또는 문서 섹션 전체에 걸쳐 반복되는 내용은 검색 양식이 페이지의 주요 기능이 아닌 한 포함되지 않아야 한다.

2) nav

• 페이지의 주요 탐색 영역을 나타내기 위해 사용한다.
• <nav> 태그는 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 내부 콘텐츠로 연결되는 링크가 있는 영역을 나타낸다.
  • ex) 메뉴, 목차, 색인
• 모든 링크 그룹이 <nav> 태그에 있을 필요는 없다. <nav> 태그는 주로 주요 탐색 블록으로 구성된 영역을 나타내기 위해 사용한다.

3) section

• 문서, 애플리케이션의 일반적인 섹션을 나타낸다.
• 논리적인 측면에서 주제별 콘텐츠 그룹 을 나타내는데 사용한다.
  • 이 경우 제목 태그(<h1> ~ <h6>)를 <section> 안에서 사용하면 좋다.
• 딱히 다른 기능은 없기에 꽤 제네릭한 요소이다. (그렇지만 div보다는 나음)

4) article

• 문서 내에서 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용된다.
  • ex) 게시판 글, 뉴스 기사, 블로그 글, 댓글, 상품 설명, 이벤트 정보, 독립적인 콘텐츠

5) aside

• 페이지 내 주요 콘텐츠와 간접적으로 연관된 내용을 나타내기 위해 사용되는 태그이다.
  • ex) 사이드바, 광고 배너, 인용구, 관련 사이트 링크,
• 주요 콘텐츠를 나타내기 위해 사용하면 안된다(X)

6) time

• 특정 시간 또는 날짜를 나타내는데 사용한다.
• datetime: 이 속성을 사용하면 브라우저나 검색 엔진이 날자와 시간 데이터를 더 쉽게 이해할 수 있다.

7) figure

• 주변 콘텐츠의 이해를 돕고 흐름과 관련있는 이미지, 그림, 도표, 사진, 코드 목록 또는 기타 독립된 관련 콘텐츠를 나타내는 태그이다.
• <figure> 태그는 첫 번째 혹은 마지막 자식 태그로 <figurecaption>을 가질 수 있다.