HTML5의 주요 Semantic Tag
HTML 페이지의 레이아웃 구성하는 주요 시맨틱 태그에 대해 정리하고자 한다.
1. article
https://developer.mozilla.org/ko/docs/Web/HTML/Element/article
독립적으로 배부 가능한 것으로 구체적으로는 블로그나 뉴스의 기사 같은 파트를 나타낸다. 그 자체만으로 의미를 나타내는 것에 쓰인다.
그리고 같은 형태로 반복적으로 사용되는 것에서도 쓰인다.
2. section
https://developer.mozilla.org/ko/docs/Web/HTML/Element/section
문서의 독립적인 구획을 나타내며, 보통 표제가 있는 콘텐츠를 묶기 위해 사용한다.
section은 일반 컨테이너로 사용하면 안되고, 단순 스타일링을 위한 목적이라면 div 태그를 사용해야 한다.
3. main
main은 body의 주요 콘텐츠를 나타낼 때 사용한다. main은 보통 한 페이지에 하나만 사용된다.
4. aside
https://developer.mozilla.org/ko/docs/Web/HTML/Element/aside
aside는 문서의 주요 내용과 직접적인 관련이 없는 콘텐츠를 나타낼 때 사용된다. AD 광고와 같은 부분을 사용하는데 쓰이기도 한다.
5. nav
nav는 문서의 현재 페이지 또는 다른 페이지의 링크를 보여주는 부분을 나타내는데 쓰인다.
대표적으로 메뉴와 목차 등이 있다.
6. header
https://developer.mozilla.org/ko/docs/Web/HTML/Element/header
header는 소개 및 탐색에 도움을 주는 콘텐츠를 나타낼 때 사용된다. 일반적으로 가장 상위에 nav를 포함하여 메뉴나 로고 등을 나타내는 데 사용된다.
7. footer
https://developer.mozilla.org/ko/docs/Web/HTML/Element/footer
footer는 페이지의 작성자, 저작권 정보, 관련 문서 등을 나타낼 떄 사용된다. 보통 페이지의 가장 하위에서 address 등을 포함하고 있다.
출처: https://www.slideshare.net/KaloyanKosev/html-course-27769176
