HTML5 이전

<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

• 구조 파악이 어렵다

HTML5 : Semantic Tag

• 태그 자체에 역할이 나타나있다.

1. header : 소개 및 탐색에 도움을 주는 콘텐츠. 제목, 로고, 검색 폼, 작성자 이름 등의 요소 포함.
2. nav : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅. (메뉴, 목차, 색인)
3. section : HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용.
4. article : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획. (게시판과 블로그 글, 매거진이나 뉴스 기사 등)
5. aside : 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냄. (사이드바 혹은 콜아웃 박스)
6. footer : 가장 가까운 섹션 콘텐츠나 섹션 루트의 푸터를 나타냄. 일반적으로 섹션의 작성자, 저작권 정보, 관련 문서 등의 내용을 담음.
7. address가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.
8. main : 문서 body의 주요 콘텐츠를 나타냄. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어짐.
9. h1~h6 : 6단계의 구획 제목을 나타냄.