HTML5 아웃라인과 Section 요소

HTML5 Outliner

참고 예제 소스

							<h1>body 섹션(section) 제목</h1>
							<p>HTML5 문서는 각기 다른 섹션들로 
							구성된 문서입니다.</p>
							
							<h2>HTML5에 새롭게 추가된 섹션요소</h2>
							<ul>
								<li>section</li>
								<li>article</li>
								<li>nav</li>
								<li>aside</li>
							</ul>
							
							<h2>대한민국, 웹 브라우저 점유율</h2>
							
							<ol>
								<li>Internet Explorer</li>
								<li>Firefox</li>
								<li>Mobile Safari</li>
								<li>Chrome</li>
							</ol>
						

화면으로 보면 아우런 차이가 없어 보이지만 HTML5는 기존의 HTML 4.01나 XHTML 1.0과는 다른 점이 있습니다. 즉 눈으로 보이지 않는 어떤 구조가 자동으로 생겨난다는 것입니다. 눈에 보이지 않기 때문에 '암묵적인 구조 생성'이라고 합니다. 이것은 HTML5에 도입된 아웃라인(outline) 개념 때문에 나타나는 현상입니다.

그런데 눈에 보이지 않는 것을 어떻게 확인할 수 있을까요? 아웃라인 구조를 한눈에 보는 방법이 있습니다. 바로 HTML5 Outliner 웹 서비스를 이용하는 것입니다. HTML5 Outliner 웹 서비스 페이지(http://gsnedders.html5.org/outliner/)에 접속한 후, 작성한 코드를 복사해서 붙여넣기를 합니다. 그런 다음 [Outline this!] 버튼을 누릅니다. 그러면 붙여넣은 코드의 아웃라인 구조가 나타납니다.

HTML4.01과 XHTML1.0에서 우리가 작성한 문서의 구조를 문서 트리구조로 표현됩니다. html에서 시작된 가지는 head와 body로 뻗습니다. head와 body는 각자의 영역을 가지고 자식과 자손을 포함하는 관계도(Model)를 만듭니다. 이러한 관계도를 문서 객체 모델(Document Object Model) 즉 'DOM'이라고 부릅니다. 문서 트리 구조를 살펴보면 body 요소 안에 작성한 <h1>,<h2>,<p>,<ul>요소는 형제 요소로 구조화되고, 웹 브라우저 역시 형제 요소로 해석합니다.

하지만 HTML5에서는 <h1>,<h2>,<ul>요소를 형제 요소로 보지 않습니다. 상기 예제 소스의 HTML5 아웃라인 구조를 다시 한번 살펴보겠습니다. "body 섹션(section)제목"은 <h1>요소로 구조화되었고, 'HTML5에 새롭게 추가된 섹션요소'와 '대한민국, 웹 브라우저 점유율'은 <h2>요소로 구조화되었습니다. 그런데 <h1>,<h2>요소가 형제 요소로 구조화되지 않고, <h1>요소가 <h2>요소보다 높은 계층으로 구조화되었습니다.

왜 이러한 현상이 발생한 것일까요? HTML5에는 기존 HTML 문서와 달리 구조를 나누는 의미 요소가 새롭게 추가되었습니다. 이것을 '섹션(section)요소'라고 부릅니다. 추가된 섹션 요소는 section, article, nav, aside 입니다. 각 요소는 목적이 분명하기 때문에 목적에 맞게, 바르게 써야 합니다. 각 요소의 쓰임새는 아래와 같습니다.

섹션 요소들과 그 쓰임새
섹션요소 쓰임새
section 다용도로 쓸 수 있는 섹션 요소 입니다.
article 독립적인 요소를 나타낼 때 씁니다. 블로그 포스트, 기사글, 위젯 등에 쓸 수 있습니다.
nav 내비게이션을 나타낼 때 씁니다.
aside 문서의 주요 내용(본문)과 분리되는 보조 내용(광고, 즐겨찾기 링크 등)을 나타낼 때 씁니다.

섹션 요소를 쓸 때 알아야 할 점이 있습니다. 각 섹션은 내부에 제목을 하나만 가질 수 있다는 점입니다. 섹션 내부에 제목이 2개 이상 있을 경우, 암묵적으로(눈에 보이지 않게) 해당 섹션이 나누어지거나 내부에 하위 섹션을 만듭니다.

어떤 경우에 섹션이 나누어지고, 어떤 경우에 하위 섹션이 만들어질까요? 힌트는 '제목의 레벨에 다라 달라진다'입니다. 예를 들어 하나의 섹션에 제목이 2개 있을 경우, 제목 레벨이 같을 때는 형제 섹션 2개로 나누어집니다.
물론 눈에 보이지 않습니다. 다만 웹 브라우저는 이렇게 암묵적으로 생선된 구조를 바르게 해석합니다.

이번에 만든 예제처럼 제목 레벨이 다를 때는 원래 섹션 내부에 하위 섹션 요소를 만듭니다. 마찬가지로 눈에는 보이지 않게 만들어집니다.

이제서야 앞서 확인했던 문서의 아웃라인 구조가 보일 것입니다. 섹션 내부에는 제목이 3개 존재하는데 h1과 h2는 제목 레벨이 다르므로 원래 섹션 내부에 하위 섹션을 만듭니다. 하위 섹션인 h2에는 제목 레벨이 같은 요소가 2개이므로, 섹션을 2개 따로 만듭니다.