unslug ko: move

4 files changed, 529 insertions, 0 deletions

diff --git a/files/ko/web/guide/html/content_editable/index.html b/files/ko/web/guide/html/editable_content/index.html
index 2e039ea976..2e039ea976 100644
--- a/files/ko/web/guide/html/content_editable/index.html
+++ b/files/ko/web/guide/html/editable_content/index.html
diff --git a/files/ko/web/guide/html/html5/index.html b/files/ko/web/guide/html/html5/index.html
new file mode 100644
index 0000000000..2d64ce56d6
--- /dev/null
+++ b/files/ko/web/guide/html/html5/index.html
@@ -0,0 +1,122 @@
+---
+title: HTML5
+slug: Web/HTML/HTML5
+translation_of: Web/Guide/HTML/HTML5
+---
+<p><strong>HTML5</strong>는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 명세</a>는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중  많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 <a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 및 <a href="/ko/List_of_Mozilla-Based_Applications" title="ko/List of Mozilla-Based Applications">다른 많은 제품</a>으로 사용되어 있는 Mozilla의 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.</p>
+
+<p>(<a href="/ko/HTML/HTML5/HTML5_Thematic_Classification" title="ko/HTML/HTML5/HTML5 Thematic Classification">HTML5의 문서에 대한 다른 분류</a>도 참고하세요.)</p>
+
+<h2 id="HTML5_소개">HTML5 소개</h2>
+
+<dl>
+ <dt><a href="/ko/HTML/HTML5/Introduction_to_HTML5" title="ko/HTML/Introduction to HTML5"><strong>HTML5의 소개</strong></a></dt>
+ <dd>이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.</dd>
+</dl>
+
+<h2 id="HTML5의_요소">HTML5의 요소</h2>
+
+<dl>
+ <dt><a href="/ko/HTML/HTML5/HTML5_Tags_List" title="ko/HTML/HTML5/HTML5 Tags List"><strong>HTML5 요소·태그의 목록</strong></a></dt>
+ <dd>현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.</dd>
+ <dt><a href="/Ja/Using_HTML5_audio_and_video" title="ko/Using_audio_and_video_in_Firefox">오디오/비디오 사용하기</a></dt>
+ <dd>Firefox 3.5이상에서  HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.</dd>
+ <dt><a href="/ko/HTML/Forms_in_HTML" title="ko/HTML/HTML5/Forms in HTML5">HTML5 웹 폼양식</a></dt>
+ <dd>HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.</dd>
+ <dt><a href="/ko/Sections_and_outlines_of_an_HTML5_document" title="ko/Sections and Outlines of an HTML5 document">HTML5 섹션과 아웃라인</a></dt>
+ <dd>HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.</dd>
+ <dt>{{ HTMLElement("mark") }} 요소</dt>
+ <dd>mark 요소는 텍스트중에서의 특별한<em> 관련성</em>을 강조시키기 위해서 이용합니다.</dd>
+ <dt>{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소</dt>
+ <dd>주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.</dd>
+</dl>
+
+<h3 id="Canvas_기술_지원">Canvas 기술 지원</h3>
+
+<dl>
+ <dt><a href="/ko/Canvas_tutorial" title="https://developer.mozilla.org/ko/Canvas_tutorial">Canvas 튜토리얼</a></dt>
+ <dd>새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.</dd>
+ <dt><a href="/ko/Drawing_text_using_a_canvas" title="ko/Drawing_text_using_a_canvas"><code>canvas</code> 요소의 HTML5 text API</a></dt>
+ <dd>{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.</dd>
+</dl>
+
+<h2 id="웹_애플리케이션_기능">웹 애플리케이션 기능</h2>
+
+<dl>
+ <dt><a href="/ko/HTML/Using_the_application_cache" title="ko/Offline_resources_in_Firefox">Firefox 오프 라인 자원</a></dt>
+ <dd>Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.</dd>
+ <dt><a href="/ko/Online_and_offline_events" title="ko/Online_and_offline_events">Online 이벤트와 Offline 이벤트</a></dt>
+ <dd>Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.</dd>
+ <dt><a href="/ko/DOM/Storage" title="ko/DOM/Storage">WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)</a></dt>
+ <dd>클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.</dd>
+ <dt><a href="/ko/HTML/Content_Editable" title="ko/HTML/Content Editable"><code>contentEditable</code> 속성： 웹 사이트 및 위키 편집 용이성</a></dt>
+ <dd>HTML5 에서는 <code>contentEditable</code> 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.</dd>
+ <dt><a href="/ko/Using_files_from_web_applications" title="ko/Using_files_from_web_applications">로컬 파일 사용하기</a></dt>
+ <dd>새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 <a href="/ko/HTML/Element/Input#attr-type" title="ko/HTML/Element/input#attr-type"><strong>type</strong></a> 속성의 값에 <code>file</code>를 지정한 <code>{{ HTMLElement("input") }}</code> 요소에 새롭게 추가된 <a href="/ko/HTML/Element/Input#attr-multiple" title="ko/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.</dd>
+</dl>
+
+<h2 id="DOM_주요_기능">DOM 주요 기능</h2>
+
+<dl>
+ <dt><a href="/ko/DOM/document.getElementsByClassName" title="ko/DOM/document.getElementsByClassName">getElementsByClassName</a></dt>
+ <dd>Document 및 Element 노드에 있어서의 <code>getElementsByClassName</code> 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.</dd>
+ <dt><a href="/Ja/DragDrop/Drag_and_Drop" title="ko/DragDrop/Drag_and_Drop">드래그 앤 드롭</a></dt>
+ <dd>HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.</dd>
+ <dt><a href="/ko/Focus_management_in_HTML" title="ko/Focus_management_in_HTML">HTML 내 포커스 관리</a></dt>
+ <dd>HTML5가 새로운 <code>activeElement</code> 속성과 <code>hasFocus</code> 속성이 지원되어 있습니다.</dd>
+ <dt><a href="/ko/Web-based_protocol_handlers" title="ko/Web-based_protocol_handlers">웹 기반 프로토콜 핸들러</a></dt>
+ <dd><code>navigator.registerProtocolHandler()</code>메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.</dd>
+</dl>
+
+<h2 id="HTML_파서">HTML 파서</h2>
+
+<p>Gecko의 <a href="/ko/HTML/HTML5/HTML5_Parser" title="ko/HTML/HTML5/HTML5 parser">HTML5 표준 파서</a>(HTML 문서를  DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).{{ fx_minversion_inline(4.0) }}</p>
+
+<h2 id="추가_변경사항">추가 변경사항</h2>
+
+<ul>
+ <li>HTML 문서에 있어서의 <code>localName</code> 및 <code>namespaceURI</code>는 XML 문서 때와 같은 행동을 하게 되었습니다. 예를 들면, <code>localName</code>는 소문자를 돌려주어, HTML 요소의 <code>namespaceURI</code>는 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</code>를 돌려줍니다.</li>
+ <li>페이지 URI 문서 단편 식별자 ("#" (해시) 문자에서 후의 부분)가 변경되었을 때, 새로운 <code>hashchange</code> 이벤트가 페이지에 보내집니다. 자세한 것은 <code><a href="/ko/DOM/window.onhashchange" title="ko/DOM/window.onhashchange">window.onhashchange</a></code>를 참조해 주십시오.</li>
+ <li><code>class</code> 속성을 보다 간단하게 취급할 수 있도록 HTML5의 <code><a href="/ko/DOM/element.classList" title="ko/DOM/element.classList">element.classList</a></code>이 기술 지원되었습니다.</li>
+ <li>문서에 즉시 생성되는 이벤트에 응하는 <code><a href="/ko/DOM/document.onreadystatechange" title="ko/DOM/document.onreadystatechange">document.onreadystatechange</a></code>와 <code><a href="/ko/DOM/document.readyState" title="ko/DOM/document.readyState">document.readyState</a></code>가 기술 지원되었습니다.</li>
+ <li>표시에 관련하는 속성으로 지정한 색은 HTML5의 사양에 따라서 해석됩니다.</li>
+</ul>
+
+<h2 id="HTML5의_일부로서_포함된_기술">HTML5의 일부로서 포함된 기술</h2>
+
+<p>아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.</p>
+
+<ul>
+ <li><a href="/ko/WebGL" title="ko/WebGL">WebGL</a></li>
+ <li><a href="/ko/DOM/FileReader" title="ko/DOM/FileReader">FileReader</a></li>
+ <li><a href="/ko/DOM/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/ko/DOM/Locating_DOM_elements_using_selectors" title="ko/DOM/Locating DOM elements using selectors">querySelector(All)</a></li>
+ <li><a href="/Ja/Using_geolocation" title="ko/Using geolocation">Geolocation</a></li>
+ <li><a href="/ko/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li>
+ <li><a href="/ko/CSS/CSS3" title="CSS3">CSS3</a></li>
+ <li><a href="/ko/XBL2_specification_(external)" title="ko/XBL2 specification (external)">XBL2</a></li>
+ <li><a href="/ko/DOM/Using_web_workers" title="ko/Using web workers">Web Workers</a></li>
+ <li><a href="/ko/WebSockets" title="https://developer.mozilla.org/ko/WebSockets">Web Sockets</a></li>
+ <li>JavaScript의 고속화</li>
+</ul>
+
+<h2 id="관련_문서">관련 문서</h2>
+
+<p>웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：</p>
+
+<ul>
+ <li><a href="/ko/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li>
+ <li><a href="/ko/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li>
+ <li><a href="/ko/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li>
+ <li><a href="/ko/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li>
+ <li><a href="/ko/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li>
+ <li><a href="/ko/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li>
+ <li><a href="/ko/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li>
+ <li><a href="/ko/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li>
+ <li><a href="/ko/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li>
+ <li><a href="/ko/Firefox_3.6_for_developers" title="ko/Firefox 3.6 for developers">Firefox 3.6 </a></li>
+ <li><a href="/Ja/Firefox_3.5_for_developers" title="ko/Firefox 3.5 for developers">Firefox 3.5 </a></li>
+ <li><a href="/ko/Firefox_3_for_developers" title="ko/Firefox 3 for developers">Firefox 3 </a></li>
+ <li><a href="/ko/Firefox_2_for_developers" title="ko/Firefox 2 for developers">Firefox 2 </a></li>
+ <li><a href="/ko/Firefox_1.5_for_developers" title="ko/Firefox 1.5 for developers">Firefox 1.5</a></li>
+</ul>
diff --git a/files/ko/web/guide/html/html5/introduction_to_html5/index.html b/files/ko/web/guide/html/html5/introduction_to_html5/index.html
new file mode 100644
index 0000000000..8b9698dc53
--- /dev/null
+++ b/files/ko/web/guide/html/html5/introduction_to_html5/index.html
@@ -0,0 +1,40 @@
+---
+title: HTML5 소개
+slug: Web/HTML/HTML5/Introduction_to_HTML5
+tags:
+  - HTML5
+  - 웹개발
+translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5
+---
+<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.</p>
+
+<p>HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. <a href="/ko/HTML/HTML5" title="ko/HTML/HTML5">HTML5의 메인 페이지</a>에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 웹 사이트를 참조해 주십시오.</p>
+
+<h2 id="HTML5_DOCTYPE">HTML5 DOCTYPE</h2>
+
+<p>HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+</pre>
+
+<p>이  DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.</p>
+
+<p>이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.</p>
+
+<h2 id="&lt;meta_charset>으로_문자셋_정의하기"><code>&lt;meta charset&gt;으로 문자셋 정의하기</code></h2>
+
+<p>보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.</p>
+
+<pre class="brush:html; line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><code>이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.</code></p>
+
+<p><code>HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.</code></p>
+
+<h2 id="새로운_HTML5_해석기의_사용">새로운 HTML5 해석기의 사용</h2>
+
+<p>HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.</p>
+
+<p>이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.</p>
+
+<p>걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!</p>
diff --git a/files/ko/web/guide/html/using_html_sections_and_outlines/index.html b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html
new file mode 100644
index 0000000000..87cae41ebd
--- /dev/null
+++ b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html
@@ -0,0 +1,367 @@
+---
+title: HTML 구획과 개요 사용하기
+slug: Web/HTML/HTML5_문서의_섹션과_윤곽
+tags:
+  - HTML
+  - HTML5
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<div>{{HTMLSidebar}}</div>
+
+<div class="warning">
+<p><strong>중요</strong>: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 <a href="https://html.spec.whatwg.org/multipage/sections.html#outline">개요</a> 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 <strong>안됩니다</strong>. 문서 작성자는 대신 제목 <a href="https://html.spec.whatwg.org/multipage/sections.html#rank">순위</a>(<a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1-h6</a>)를 사용해 문서 구조를 나타내는 것이 좋습니다.</p>
+</div>
+
+<p>HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.</p>
+
+<p>예를 들면 &lt;div&gt;는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, &lt;figcaption&gt;은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.</p>
+
+<p>새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.</p>
+
+<h2 id="HTML4에서의_문서_구조">HTML4에서의 문서 구조</h2>
+
+<p><span style="line-height: inherit;">문서의 구조, 즉 <code>&lt;body&gt;</code>와 <code>&lt;/body&gt;</code> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다.</span> HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.</p>
+
+<p>그래서 다음과 같은 마크업은:</p>
+
+<pre class="brush: xml">&lt;div class="section" id="forest-elephants"&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
+  ...섹션 내용 진행 중...
+  &lt;div class="subsection" id="forest-habitat"&gt;
+    &lt;h2&gt;서식지&lt;/h2&gt;
+    &lt;p&gt;<span style="color: #323333; font-family: courier new;">둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span>
+    ...하위 섹션 내용 진행 중...
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><span style="line-height: inherit;">다음과 같은 문서 아웃라인을 가지게 됩니다:</span></p>
+
+<pre>1. 둥근귀코끼리
+   1.1 서식지
+</pre>
+
+<p>새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,</p>
+
+<pre class="brush: xml">&lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+&lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
+...섹션 내용 진행 중...
+&lt;h2&gt;서식지&lt;/h2&gt;
+&lt;p&gt;둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span>
+...하위 섹션 내용 진행 중...
+&lt;h2&gt;먹이&lt;/h2&gt;
+&lt;h1&gt;몽골 게르빌루스쥐&lt;/h1&gt;</pre>
+
+<p>앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:</p>
+
+<pre>1. 둥근귀코끼리
+   1.1 서식지
+   1.2 먹이
+2. 몽골 게르빌루스쥐
+</pre>
+
+<h2 id="HTML5에서_해결한_문제들">HTML5에서 해결한 문제들</h2>
+
+<p>HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:</p>
+
+<ol>
+ <li>의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 <strong>class</strong> 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 <font color="#000000">것은 불가능합니다</font>("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">보조 장비에 사용되는 기술</a>에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.</li>
+ <li>여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.</li>
+ <li>HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.</li>
+ <li>반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.</li>
+</ol>
+
+<p>좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.</p>
+
+<h2 id="HTML5_문서_아웃라인_알고리즘">HTML5 문서 아웃라인 알고리즘</h2>
+
+<p>HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.</p>
+
+<h3 id="HTML5에서의_섹션_정의">HTML5에서의 섹션 정의</h3>
+
+<p>우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.</p>
+
+<div class="note">각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽#HTML5.EC.97.90.EC.84.9C_.EC.A0.9C.EB.AA.A9_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EB.B2.95" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">HTML5에서 제목 지정하는 법</a>을 보십시오.</div>
+
+<p>보기:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;소개&lt;/h1&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;서식지&lt;/h1&gt;
+    &lt;p&gt;둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;광고 구역&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+&lt;footer&gt;
+  &lt;p&gt;(c) 2013 회사 이름&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:</p>
+
+<pre><span style="color: red;">&lt;section&gt;
+  &lt;h1&gt;</span>둥근귀<span style="color: red;">코끼리&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;소개&lt;/h1&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;서식지&lt;/h1&gt;
+    &lt;p&gt;</span>둥근귀<span style="color: red;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;광고 구역&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;</span>
+
+<span style="color: green;">&lt;footer&gt;
+  &lt;p&gt;(c) 2013 회사 이름?&lt;/p&gt;
+&lt;/footer&gt;</span></pre>
+
+<p>첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:</p>
+
+<pre>&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+
+  <span style="color: red;">&lt;section&gt;
+    &lt;h1&gt;소개&lt;/h1&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.&lt;/p&gt;</span>
+<span style="color: red;">  &lt;/section&gt;</span>
+
+  <span style="color: green;">&lt;section&gt;
+    &lt;h1&gt;서식지&lt;/h1&gt;
+    &lt;p&gt;</span>둥근귀<span style="color: green;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.&lt;/p&gt;
+  &lt;/section&gt;</span>
+
+  <span style="color: blue;">&lt;aside&gt;
+    &lt;p&gt;광고 구역&lt;/p&gt;
+  &lt;/aside&gt;</span>
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2013 회사 이름&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>그래서 다음과 같은 구조를 가지게 됩니다:</p>
+
+<pre>1. 둥근귀코끼리
+   1.1 소개
+   1.2 서식지
+   1.3 광고 구역 (aside)
+</pre>
+
+<h3 id="HTML5에서_제목_지정하는_법">HTML5에서 제목 지정하는 법</h3>
+
+<p>비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.</p>
+
+<p><span style="line-height: inherit;">제목 요소엔 요소 이름에 붙은 숫자를 가지고 <em>계급</em>을 매기는데,</span> {{HTMLElement("h1")}}이 <em>최상위</em> 계급이며 {{HTMLElement("h6")}}는 <em>최하위</em> 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...계속 된 섹션 내용...
+  &lt;section&gt;
+    &lt;h2&gt;서식지&lt;/h2&gt;
+    &lt;p&gt;둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...계속 된 하위 섹션 내용...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;몽골 게르빌루스쥐&lt;/h3&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다.
+    ...계속 된 섹션 내용...
+&lt;/section&gt;</pre>
+
+<p>이는 다음과 같은 아웃라인을 갖게 됩니다:</p>
+
+<pre>1. 둥근귀코끼리
+   1.1 서식지
+2. 몽골 게르빌루스쥐</pre>
+
+<p>여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)</p>
+
+<h3 id="은연중_자동으로_정의되는_섹션">은연중 자동으로 정의되는 섹션</h3>
+
+<p>HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 <span style="line-height: inherit;">절대적으로 </span><span style="line-height: inherit;">필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 </span><em>은연중 자동으로 정의되는 섹션</em><span style="line-height: inherit;">이라 하겠습니다</span><span style="line-height: inherit;">.</span></p>
+
+<p>HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  &lt;h3 class="implicit subsection"&gt;서식지&lt;/h3&gt;
+  &lt;p&gt;둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...하위 섹션 내용 진행 중...
+&lt;/section&gt;</pre>
+
+<p>이는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p>
+
+<pre>1. 둥근귀코끼리
+   1.1 서식지 <em>(</em>h3 요소에 의해 은연중 자동으로 정의됨<em>)</em>
+</pre>
+
+<p>만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  &lt;h1 class="implicit section"&gt;몽골 게르빌루스쥐&lt;/h1&gt;
+  &lt;p&gt;몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다.
+    ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중...
+&lt;/section&gt;</pre>
+
+<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p>
+
+<pre>1. 둥근귀코끼리
+2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
+</pre>
+
+<p>만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p>
+
+<pre class="brush:xml">&lt;body&gt;
+  &lt;h1&gt;포유 동물&lt;/h1&gt;
+  &lt;h2&gt;고래&lt;/h2&gt;
+  &lt;p&gt;이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다.
+    ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중...
+  &lt;section&gt;
+    &lt;h3&gt;둥근귀코끼리&lt;/h3&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+      ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중...
+    &lt;h3&gt;몽골 게르빌루스쥐&lt;/h3&gt;
+      &lt;p&gt;몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다.
+         ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중...
+    &lt;h2&gt;파충류&lt;/h2&gt;
+      &lt;p&gt;파충류는 냉혈 동물입니다.
+          ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p>
+
+<pre dir="rtl">1. 포유 동물
+   1.1 고래 <em>(</em>h2 요소에 의해 자동으로 정의됨<em>)</em>
+   1.2 둥근귀코끼리 <em>(</em>섹션 요소에 의해 명시적으로 정의됨<em>)</em>
+   1.3 몽골 게르빌루스쥐 <em>(</em>h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em>
+2. 파충류 <em>(</em>h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐<em>)</em></pre>
+
+<p>단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 <span style="line-height: inherit;">브라우저가 </span><span style="line-height: inherit;">원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.</span></p>
+
+<p>제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.</p>
+
+<h3 id="섹션_구분의_근원점"><a name="sectioning_root">섹션 구분의 근원점</a></h3>
+
+<p>섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.</p>
+
+<p>보기:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;숲 코끼리&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;소개&lt;/h2&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;서식지&lt;/h2&gt;
+    &lt;p&gt;둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+</span>      과학자들은 "&lt;cite&gt;보르네오 섬의 둥근귀코끼리&lt;/cite&gt;"라는 제목의 책에서 다음과 같이 서술하고 있습니다:&lt;/p&gt;
+    &lt;blockquote&gt;
+       &lt;h1&gt;보르네오 섬&lt;/h1&gt;
+       &lt;p&gt;보르네오 섬에 서식하는 둥근귀코끼리...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:</p>
+
+<pre>1. 숲 코끼리
+   1.1 소개
+   1.2 서식지</pre>
+
+<p>이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.</p>
+
+<h3 id="문서의_아웃라인_밖에_존재하는_섹션">문서의 아웃라인 밖에 존재하는 섹션</h3>
+
+<p><span style="line-height: inherit;">HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:</span></p>
+
+<ol>
+ <li>HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.</li>
+ <li>HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.</li>
+ <li>HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.</li>
+ <li>HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.</li>
+</ol>
+
+<h2 id="섹션을_구분짓는_요소의_주소와_발행_시간">섹션을 구분짓는 요소의 주소와 발행 시간</h2>
+
+<p>문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.</p>
+
+<p>가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.</p>
+
+<p>비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.</p>
+
+<h2 id="HTML5_미지원_브라우저에서_HTML5_요소를_사용하는_법">HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법</h2>
+
+<p>섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 <code>display:inline</code> 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:</p>
+
+<pre class="brush: css">section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+</pre>
+
+<p>물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.</p>
+
+<div>그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:</div>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<p>이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:</p>
+
+<pre class="brush:xml">&lt;noscript&gt;
+   &lt;strong&gt;주의 !&lt;/strong&gt;
+   귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
+   그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
+&lt;/noscript&gt;</pre>
+
+<p>그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+  &lt;noscript&gt;
+     &lt;strong&gt;주의 !&lt;/strong&gt;
+     귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
+     그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
+   <code>&lt;/noscript&gt;
+</code>&lt;![endif]--&gt;
+</pre>
+
+<h2 id="맺음말">맺음말</h2>
+
+<p>HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.</p>