HTML5 문서 구조화 요소

1 개요

HTML5 Sectioning

HTML5 섹션 구조 태그, HTML5 문서 구조화 요소, HTML 구조화 요소

• 문서의 구조를 표현하기 위한 태그
• 출력 형태는 div와 별다른 차이가 없음
• 주요태그: section, article, aside, nav, header, footer

2 HTML4

HTML4에서는 div, span 태그를 사용. → 구조와 스타일이 혼재

<div id='header'>헤더</div>
<span class='date'>2012-07-09</span>

3 HTML5

HTML5에서는 문서의 구조를 다음과 같이 세분화

태그	설명
section	문서의 구획 (예: 장, 절)
article	독립된 콘텐츠 영역 (예: 개별 신문기사)
nav	네비게이션 메뉴 영역
aside	부가 콘텐츠(예: 사이드바, 광고 등). 본문 내용과 비교적 관련성이 적은 것
header	헤더글. 본문 위에 첨가하는 짧은 글 영역
footer	바닥글. 본문 아래에 첨가하는 짧은 글 영역
hgroup	제목(h1 ~ h6)을 그룹화하는 요소

4 같이 보기

• HTML5 새 태그
• HTML5 section, header, footer
• HTML5 section, header, footer, nav
• HTML5 콘텐츠 모델
• 시맨틱 마크업
• HTML div 태그

5 참고

• http://www.vanseodesign.com/web-design/html5-semantic-elements/