[HTML] HTML 문서의 구조를 잡는 의미론적 태그 정리

의미론적 태그(Semantic tag)란 무엇인가요?

 HTML5에서 도입된 태그로써 각각의 태그 안에 어떤 정보를 담고 있는지 전달하기 위해 도입된 태그입니다. 처음 웹에는 각각의 요소의 구역을 div 태그로만 구분하였습니다. 하지만 HTML 문서를 사람만 읽는게 아닌 기계(봇)도 읽기 시작하였습니다. 바로 검색 엔진도 웹 문서를 읽기 시작한 것이지요. 그래서 이러한 정보를 더 잘 전달하기 위해서 의미론적 태그가 생겨났습니다.

 의미론적 태그는 모두 블록 요소를 가지고 있으며 이는 보통 사용자 정의 태그가 inline 속성을 지니는데 비해 블록 요소를 가지고 있으며 이는 미리 정의된 태그라는걸 알 수 있습니다.

의미론적 태그(Semantic tag)
태그 이름	요소	설명
div	블록	요소들을 그룹으로 정의하며 div 태그 덕분에 CSS를 더 쉽게 적용할 수 있습니다.
header	블록	문서의 헤더 영역을 의미합니다. 헤더 영역은 네비게이션, 검색 바 등의 내용을 담고 있습니다.
section	블록	주제별로 그룹핑(Grouping)해주는 태그입니다.
footer	블록	페이지 하단 영역의 회사 정보, 연락처 등의 내용이 담긴 푸터 영역을 정의하는 태그입니다.
nav	블록	메인 메뉴나 목차등을 정의해주는 태그입니다.
article	블록	게시물과 같은 글의 주 내용을 담긴 구역을 의미합니다.
aside	블록	메인 콘텐츠와 관련이 없는 영역을 의미합니다.