HTML5 의미 요소 종류

HTML5의 의미 요소(Semantic Element)는 요소 이름부터 의미가 있는 것을 말합니다. 예를 들어 div 요소는 어떤 의미가 있나요? class나 id 값을 줘야 이게 어떤 요소인지 알 수 있습니다. 반대로 header 요소는 어떤 의미가 있나요? 이름에서부터 명확하게 설명하고 있지 않나요? 이처럼 의미 요소는 명확하게 전달해 주는 요소이며 HTML5부터 기능이 생겼습니다.

추천글

목차


HTML5 대표 의미 요소

HTML5에서 대표 의미 요소를 살펴보겠습니다.

HTML5 의미 요소 종류
코드펜에서 코드보기

header 요소

header 요소는 HTML 문서 상단이나 섹션(section) 상단 부분에서 사용할 수 있습니다. 일반적으로 사이트의 로고, 제목, 섹션의 제목 등을 적을 수 있습니다. 따라서, HTML 문서에는 여러 개의 header 요소가 존재할 수 있습니다.

nav 요소

nav 요소는 HTML 문서 사이를 탐색할 수 있는 링크가 모여있는 곳에서 사용할 수 있습니다. 하지만 하나의 링크에 대해서는 사용할 수 없습니다.


main 요소

HTML5 문서 또는 섹션의 메인 콘텐츠에서 사용할 수 있습니다. main 요소는 중심 주제 또는 기능과 직접적으로 관련되어 있어야 합니다. 또한, 여러 개의 main 요소가 존재할 수 있지만 하나를 제외한 나머지는 숨겨놓아야 합니다.

nav 요소와 반대되는 개념이라고 생각하시면 됩니다.


section 요소

section 요소는 HTML 문서에서 섹션 부분입니다. 섹션이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미합니다. 대표적으로 소개, 뉴스 항목, 연락처 정보 등이 있습니다.


article 요소

article 요소는 HTML 문서에서 하나의 기사 부분에서 사용할 수 있습니다. article 요소의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 사이트의 나머지 부분과는 별도로 읽을 수 있어야 합니다.

웹 접근성의 측면에서 article 요소에 제목(H1 ~ H6)을 포함해 요소를 식별해야 합니다.


aside 요소

웹 사이트의 사이드바에 해당하며 주 콘텐츠에서 벗어난 콘텐츠를 의마합니다. 대표적으로 광고, 카테고리 등이 있습니다.

footer 요소

footer 요소는 HTML 문서 하단이나 섹션 하단 부분에서 사용합니다. 일반적으로 사이트의 작성자나 그에 따른 저작권 정보, 연락처 등을 적을 수 있습니다. 따라서, HTML 문서에는 여러 개의 footer 요소가 존재할 수 있습니다.

Leave a Comment