HTML 5.1: 4.3. 섹션

4.3. 섹션

4.3.1. `body` 요소(element)

카테고리:

섹션화(sectioning) 루트.

이 요소(element)가 사용될 수 있는 컨텍스트:

html 요소(element) 내의 두 번째 요소(element)로서.

콘텐트 모델:

흐름(flow) 콘텐트.

text/html에서 태그 생략:

body 요소(element)의 시작 태그는 요소(element)가 비어있거나 body 요소(element) 안의 첫 번째 것이 meta, link, script, style, template를 제외하고, 공백 문자나 주석이 아니라면 생략될 수 있습니다.

body 요소(element)의 종료 태그는 body 요소(element)에 주석이 즉시 뒤따르지 않는다면 생략될 수 있습니다.

콘텐트 속성(attribute)들:

범용 속성(attribute)들

onafterprint

onbeforeprint

onbeforeunload

onhashchange

onlanguagechange

onmessage

onoffline

ononline

onpagehide

onpageshow

onpopstate

onrejectionhandled

onstorage

onunhandledrejection

onunload

허용된 ARIA 역할(role) 속성(attribute) 값들:

document 역할(role) (기본 값 - 설정하지 마세요), application.

허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:

범용 aria-* 속성(attribute)들

허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.

DOM 인터페이스:

interface HTMLBodyElement : HTMLElement {
};
HTMLBodyElement implements WindowEventHandlers;

body 요소(element)는 문서의 콘텐트를 나타냅니다.

적합한 문서들에서, body 요소(element)는 오직 하나만 존재합니다. document.body IDL 속성은 문서의 body 요소(element)로의 쉬운 접근을 가진 스크립트를 제공합니다.

일부 DOM 연산들은 (예를 들어 드래그 앤 드랍 모델의 일부) "body 요소(element)"의 측면에서 정의됩니다. 이것은 독단적인 body 요소(element)가 아니라 용어의 정의마다, DOM의 특정 요소(element)를 참조합니다.

body 요소(element)는 이벤트 처리기 콘텐트 속성(attribute)들로서 Window 객체의 많은 이벤트 처리기들을 노출시킵니다. 그것은 또한 그것들의 이벤트 처리기 IDL 속성(attribute)들을 반영합니다.

body 요소(element)에 노출된 Window 객체의 onblur, onerror, onfocus, onload, onresize, onscroll 이벤트 처리기들은 일반적인 이벤트 처리기들을 보통 html 요소(element)들에 의해 지원되는 동일한 이름으로 교체합니다.

따라서, 예를 들어, Document의 body 요소(element)의 자식에서 보내진 버블링 error 이벤트는 처음 그 요소(element)의 onerror 이벤트 처리기 콘텐트 속성(attribute)들을 작동시키고, 이후 루트 html 요소(element)의 그것을 작동시키고, 그 이후에야 body 요소(element)에서 onerror 이벤트 처리기 콘텐트 속성(attribute)을 작동 시킬 것입니다. 이것은 이벤트가 대상으로부터 body로, html로, Document로, Window로 버블되고, body의 이벤트 처리기가 body가 아닌 Window를 바라보고 있기 때문입니다. 하지만, addEventListener()를 사용하여 body에 할당 된 보통의 이벤트 리스너는 이벤트가 Window 객체에 도달했을 때가 아닌 body를 통해 버블되었을 때 수행될 것입니다.

이 페이지는 사용자가 온라인인지 아닌 지를 보여주는 표시기를 갱신합니다:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Online or offline?</title>
    <script>
      function update(online) {
        document.getElementById('status').textContent =
        online ? 'Online' : 'Offline';
      }
    </script>
  </head>
  <body ononline="update(true)"
    onoffline="update(false)"
    onload="update(navigator.onLine)">
    <p>You are: <span id="status">(Unknown)</span></p>
  </body>
</html>

4.3.2. `article` 요소(element)

카테고리:: main 요소(element) 후손들이 없는 흐름(flow) 콘텐트.; 섹션화(sectioning) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:: 흐름(flow) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: article (기본 값 - 설정하지 마세요), application, document나 main.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용합니다.

article 요소(element)는 완전한 혹은 독립적인 문서, 페이지, 어플리케이션, 혹은 사이트 내의 구성요소를 나타냅니다. 이것은 잡지, 뉴스, 기술적 혹은 전문적 아티클, 에세이나 보고서, 블로그나 다른 소셜 미디어 게시물 일 수 있습니다.

일반적인 규칙은 article 요소(element)가 요소(element)의 콘텐트가 문서의 아웃라인 내에 명시적으로 나열되는 경우에만 적절하다는 것입니다. 각 article은 일반적으로 article 요소(element)의 자식으로 제목(heading)(h1-h6 요소(element))을 포함하는 것에 의해 식별되어야(should) 합니다.

보조 기술은 article의 의미를 사용자에게 전달 할 수 있습니다. 이 정보는 콘텐트의 유형으로 사용자에게 힌트를 제공할 수 있습니다. 예를 들어 사용자가 article 요소(element)로 탐색할 경우, 요소(element) 이름 "article"에 일치하는 요소(element)의 role은 스크린리더 소프트웨어에 의해 알려질 수 있습니다. 유저 에이전트들은 또한 article 요소(element)로 탐색하기 위한 메서드들을 제공할 수 있습니다.

article 요소(element)들이 중첩되는 경우, 내부 article 요소(element)들은 원칙적으로 바깥 아티클의 콘텐츠와 연관된 아티클들임을 의미합니다. 예를 들어, 사이트의 블로그 항목은 블로그 항목에 대한 article 요소(element) 내에 중첩 된 article 요소들(element)에 다른 블로그 항목들의 요약들로 구성될 수 있습니다.

article 요소(element)와 연관된 작성자 정보는 (참조. address 요소(element)) 중첩된 article 요소(element) 들에 적용되지 않습니다.

다음은 article 요소(element)를 사용하여 마크업 된, 블로그 게시물 발췌의 예입니다:

<article>
 <header>
  <h2><a href="https://herbert.io">Short note on wearing shorts</a></h2>
   <p>Posted on Wednesday, 10 February 2016 by Patrick Lauke.
   <a href="https://herbert.io/short-note/#comments">6 comments</a></p>
 </header>
 <p>A fellow traveller posed an interesting question: Why do you wear shorts rather than
 longs? The person was wearing culottes as the time, so I considered the question equivocal in nature,
 but I attempted to provide an honest answer despite the dubiousness of the questioner’s dress.</p>
 <p>The short answer is that I enjoy wearing shorts, the long answer is...</p>
 <p><a href="https://herbert.io/short-note/">Continue reading: Short note on
 wearing shorts</a></p>
</article>

schema.org 표현 형식은 창작 - 아티클 하위 유형을 사용하여 아티클의 유형에 대한 좀 더 세밀한 정보를 제공하는데 사용될 수 있고, 아티클에 대한 발행 날짜와 같은 다른 정보들도 역시 제공될 수 있습니다.

이 예제는 일부 schema.org 주석을 가지고 article 요소(element)를 사용하여 블로그 게시물을 보여줍니다:

<article itemscope itemtype="https://schema.org/BlogPosting">
  <header>
    <h2 itemprop="headline">The Very First Rule of Life</h2>
    <p><time itemprop="datePublished" datetime="2016-02-28">3 days ago</time></p>
  </header>
  <p>If there’s a microphone anywhere near you, assume it’s hot and
  sending whatever you’re saying to the world. Seriously.</p>
  <p>...</p>
  <footer>
    <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
  </footer>
</article>

여기 동일한 게시물이지만, 댓글들의 일부를 보여주는 것이 있습니다:

     <article itemscope itemtype="https://schema.org/BlogPosting">  <header>
    <h2 itemprop="headline">The Very First Rule of Life</h2>
    <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  </header>
   <p>If there’s a microphone anywhere near you, assume it’s hot and
   sending whatever you’re saying to the world. Seriously.</p>
   <p>...</p>
  <section>
    <h3>Comments</h3>
    <ol>
     <li itemprop="comment" itemscope itemtype="https://schema.org/UserComments" id="c1">
        <p>Posted by: <span itemprop="creator" itemscope itemtype="https://schema.org/Person">
        <span itemprop="name">George Washington</span>
        </span></p>
        <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
        <p>Yeah! Especially when talking about your lobbyist friends!</p>
     <li itemprop="comment" itemscope itemtype="https://schema.org/UserComments" id="c2">
        <p>Posted by: <span itemprop="creator" itemscope itemtype="https://schema.org/Person">
        <span itemprop="name">George Hammond</span>
        </span></p>
        <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
        <p>Hey, you have the same first name as me.</p>
     </li>
   </ol>
  </section>
</article>

댓글들을 구조화하기 위한 순서가 있는 목록 ol의 사용에 주목하세요. 또한 댓글들이 section 요소(element)를 사용하여 식별된 아티클의 하위 섹션임을 참고하세요.

4.3.3. `section` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 섹션화(sectioning) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 흐름(flow) 콘텐트가 기대 되는 곳.
콘텐트 모델:: 흐름(flow) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: region 역할(role) (기본 값 - 설정하지 마세요), alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, presentation, search, status.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용합니다.

section 요소(element)는 문서나 어플리케이션의 일반적인 섹션을 나타냅니다. 이 맥락에서, 섹션은 콘텐트의 주제별 그룹 입니다. 각 section은 일반적으로 section 요소(element)의 자식으로 제목(heading)을 (h1-h6 요소(element)) 포함하는 것으로 식별되어야(should) 합니다.

섹센의 예제들은 챕터들, 탭 대화상자의 여러 탭 페이지들, 논문의 번호가 매겨진 섹션들이 될 것입니다. 웹 사이트의 홈페이지는 소개, 뉴스 항목들, 연락 정보에 대한 섹션들로 분할 될 수 있습니다.

작성자들은 콘텐트가 완전하거나 독립적인 구성 요소인 경우 section 요소(element) 대신 article 요소(element)를 사용하도록 권장됩니다.

section 요소(element)는 일반적인 컨테이너 요소(element)가 아닙니다. 요소(element)가 단지 스타일링 목적이나 스크립팅을 위한 편의로 요구되는 경우, 작성자는 대신 div 요소(element)를 사용하도록 권장됩니다. 일반적인 규칙은 section 요소(element)는 요소(element)의 콘텐트가 문서의 개요(outline)에 명시적으로 나열되는 경우에만 적절합니다.

보조 기술은 요소(element)가 명시적인 레이블을 가지는 경우 사용자들에게 section의 의미를 전달 할 수 있습니다. 이 정보는 사용자에게 콘텐트의 유형에 관하여 힌트를 제공할 수 있습니다. 예를 들어 이 경우에 "region"인 요소(element)의 role은 사용자가 section 요소(element)로 탐색할 때 스크린리더 소프트웨어에 의해 알려질 수 있습니다. 유저 에이전트들은 또한 section 요소(element)들에 탐색하기 위한 메서드들을 제공할 수 있습니다.

다음 예제에서, 우리는 두 개의 짧은 섹션들을 포함하는 사과에 대한 아티클(큰 웹 페이지의 부분)을 볼 수 있습니다.

section은 콘텐츠의 간단한 설명을 제공하는 aria-label 속성(attribute)을 가집니다. 보조 기술은 사용자들에게 힌트로서 aria-label 값과 마찬가지로 region 역할(role)을 전달할 수 있습니다.

<article>
  <header>
    <h2>Apples</h2>
    <p>Tasty, delicious fruit!</p>
  </header>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <section aria-label="Red apples.">
    <h3>Red Delicious</h3>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
  </section>
  <section aria-label="Green apples.">
    <h3>Granny Smith</h3>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
  </section>
</article>

여기 하나는 졸업하는 사람들의 목록이고, 다른 하나는 식의 설명인, 두 개의 섹션들을 가진 졸업식 프로그램이 있습니다. (이 예제에서 마크업은 대부분의 요소(element) 간 여백을 최소화하는데 종종 사용되는 흔하지 않은 스타일을 특징으로 합니다.)

<!DOCTYPE Html>
<html
  ><head
    ><title
      >Graduation Ceremony Summer 2022</title
    ></head
  ><body
    ><h1
      >Graduation</h1
    ><section
      ><h2
        >Ceremony</h2
      ><p
        >Opening Procession</p
      ><p
        >Speech by Validactorian</p
      ><p
        >Speech by Class President</p
      ><p
        >Presentation of Diplomas</p
      ><p
        >Closing Speech by Headmaster</p
    ></section
    ><section
      ><h2
        >Graduates</h2
      ><ul
        ><li
          >Molly Carpenter</li
        ><li
          >Anastasia Luccio</li
        ><li
          >Ebenezar McCoy</li
        ><li
          >Karrin Murphy</li
        ><li
          >Thomas Raith</li
        ><li
          >Susan Rodriguez</li
      ></ul
    ></section
  ></body
></html>

이 예에서, 책 저자는 챕터와 일부 부록으로 몇 개의 섹션들을 마크업했고, 이 두 종류의 섹션에 제목들을 다르게 하기 위해 CSS를 사용합니다. 책 전체는 아른 책들을 포함하는 큰 문서의 일부로서 article 요소(element)로 감싸집니다.

<style>
  section { border: double medium; margin: 2em; }
  section.chapter h3 { font: 2em Roboto, Helvetica Neue, sans-serif; }
  section.appendix h3 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
...
<article class="book">
  <header>
    <h2>My Book</h2>
    <p>A sample with not much content</p>
    <p><small>Published by Dummy Publicorp Ltd.</small></p>
  </header>

  <section class="chapter">
    <h3>My First Chapter</h3>
    <p>This is the first of my chapters. It doesn’t say much.</p>
    <p>But it has two paragraphs!</p>
  </section>
  <section class="chapter">
    <h3>It Continues: The Second Chapter</h3>
    <p>Bla dee bla, dee bla dee bla. Boom.</p>
  </section>
  <section class="chapter">
    <h3>Chapter Three: A Further Example</h3>
    <p>It’s not like a battle between brightness and earthtones would go
    unnoticed.</p>
    <p>But it might ruin my story.</p>
  </section>
  <section class="appendix">
    <h3>Appendix A: Overview of Examples</h3>
    <p>These are demonstrations.</p>
  </section>
  <section class="appendix">
    <h3>Appendix B: Some Closing Remarks</h3>
    <p>Hopefully this long example shows that you <em>can</em> style
    sections, so long as they are used to indicate actual sections.</p>
  </section>
</article>

4.3.4. `nav` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 섹션화(sectioning) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 흐름(flow) 콘텐트가 기대되는 곳.
콘텐트 모델:: 후손 main 요소(element)가 없는 흐름(flow) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: navigation 역할(role) (기본 값 - 설정하지 마세요) 혹은 presentation.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용합니다.

nav 요소(element)는 다른 페이지들이나 페이지 내의 부분으로 연결하는 페이지의 섹션을 나타냅니다: 탐색 링크들을 가진 섹션.

보조 기술은 사용자에게 nav의 의미(semantic)를 전달 할 수 있습니다. 이 정보는 사용자에게 콘텐트의 유형에 관하여 힌트를 제공할 수 있습니다. 예를 들어 이 경우에 "navigation"인, 요소(element)의 role은 사용자가 nav 요소(element)로 탐색할 때 스크린리더 소프트웨어에 의해 알려질 수 있습니다. 유저 에이전트들은 또한 nav 요소(element)들로 탐색하기 위한 메서드들을 제공할 수 있습니다.

nav 요소(element)의 콘텐트가 항목들의 목록을 나타내는 경우, 이해와 탐색을 돕기 위해 목록 마크업을 사용하세요.

페이지의 모든 링크 그룹들이 nav 요소(element)에 요구되지 않습니다 — 요소(element)는 주로 주요한 탐색 블럭으로 구성되는 섹션들을 위해 의도된 것입니다. 특히, 서비스 약관, 홈페이지, 저작권 페이지과 같은 사이트의 다양한 페이지로의 링크들의 짧은 목록을 가지는 푸터가 일반적입니다. footer 요소(element)만으로도 그러한 경우에 충분합니다; 그러한 경우에 nav 요소(element)가 사용될 수 있지만, 일반적으로는 불필요합니다.

최초 렌더링에서 생략되는 탐색 정보로부터 혜택을 받을 수 있는 사용자 혹은 즉시 사용 가능한 탐색 정보로부터 혜택을 받을 수 있는 사용자를 대상으로 하는, 유저 에이전트들은 (스크린 리더들 같은) 페이지의 콘텐트가 초기에 건너 뛸지 혹은 요청 할 때 제공할지 (혹은 둘 다일지)를 결정하기 위한 방법으로 이 요소(element)를 사용할 수 있습니다.

다음 예제에서 기본적으로 사이트 주변 탐색과, 부차적으로 페이지 자체 주변 탐색, 두 개의 nav 요소(element)들이 있습니다.

<body>
  <h1>The Wiki Center Of Exampland</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/events">Current Events</a></li>
      ...more...
    </ul>
  </nav>
  <article>
    <header>
      <h2>Demos in Exampland</h2>
      <p>Written by A. N. Other.</p>
    </header>
    <nav>
      <ul>
        <li><a href="#public">Public demonstrations</a></li>
        <li><a href="#destroy">Demolitions</a></li>
        ...more...
      </ul>
    </nav>
    <div>
      <section id="public">
        <h2>Public demonstrations</h2>
        <p>...more...</p>
      </section>
      <section id="destroy">
        <h2>Demolitions</h2>
        <p>...more...</p>
      </section>
      ...more...
    </div>
    <footer>
      <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
    </footer>
  </article>
  <footer>
    <p><small>© copyright 1998 Exampland Emperor</small></p>
  </footer>
</body>

다음 예제에서, 페이지는 링크가 존재하는 여러 위치를 가지지만, 그 위치 중 하나만 탐색 섹션으로 간주됩니다.

<body typeof="schema:Blog">
  <header>
    <h1>Wake up sheeple!</h1>
    <p><a href="news.html">News</a> -
    <a href="blog.html">Blog</a> -
    <a href="forums.html">Forums</a></p>
    <p>Last Modified: <span property="schema:dateModified">2009-04-01</span></p>
    <nav>
      <h2>Navigation</h2>
      <ul>
        <li><a href="articles.html">Index of all articles</a></li>
        <li><a href="today.html">Things sheeple need to wake up for today</a></li>
        <li><a href="successes.html">Sheeple we have managed to wake</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article property="schema:blogPosts" typeof="schema:BlogPosting">
      <header>
        <h2 property="schema:headline">My Day at the Beach</h2>
      </header>
      <main property="schema:articleBody">
        <p>Today I went to the beach and had a lot of fun.</p>
        ...more content...
      </main>
      <footer>
        <p>Posted <time property="schema:datePublished" datetime="2009-10-10">Thursday</time>.</p>
      </footer>
    </article>
    ...more blog posts...
  </main>
  <footer>
    <p>Copyright ©
      <span property="schema:copyrightYear">2010</span>
      <span property="schema:copyrightHolder">The Example Company</span>
    </p>
    <p><a href="about.html">About</a> -
      <a href="policy.html">Privacy Policy</a> -
      <a href="contact.html">Contact Us</a></p>
  </footer>
</body>

main 요소(element)가 페이지의 주요 콘텐트를 감싸기 위해 사용되는 것에 주목하세요. 이 경우, 페이지 헤더와 푸터와 다른 모든 콘텐트입니다.

블로그 게시물에 대한 발행 날짜와 다른 메타데이터를 제공하기 위해 schema.org 표현 형식을 사용하는 위 예제의 마이크로데이터 주석을 볼 수 있습니다.

nav 요소(element)는 목록을 포함할 필요가 없고, 그것은 다른 종류의 콘텐트도 포함할 수 없습니다. 이 탐색 블럭에서, 링크들은 본문에 제공됩니다:

<nav>
  <h2>Navigation</h2>
  <p>You are on my home page. To the north lies <a href="/blog">my
  blog</a>, from whence the sounds of battle can be heard. To the east
  you can see a large mountain, upon which many <a
  href="/school">school papers</a> are littered. Far up thus mountain
  you can spy a little figure who appears to be me, desperately
  scribbling a <a href="/school/thesis">thesis</a>.</p>
  <p>To the west are several exits. One fun-looking exit is labeled <a
  href="https://games.example.com/">"games"</a>. Another more
  boring-looking exit is labeled <a
  href="https://isp.example.net/">ISP™</a>.</p>
  <p>To the south lies a dark and dank <a href="/about">contacts
  page</a>. Cobwebs cover its disused entrance, and at one point you
  see a rat run quickly out of the page.</p>
</nav>

이 예제에서, nav는 사용자가 폴더를 전환하도록, 이메일 어플리케이션에서 사용됩니다:

<p><input type=button value="Compose" onclick="compose()"></p>
<nav>
  <h2>Folders</h2>
  <ul>
    <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
    <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
    <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
    <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
    <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
  </ul>
</nav>

4.3.5. `aside` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 섹션화(sectioning) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 흐름(flow) 콘텐트가 기대되는 곳.
콘텐트 모델:: 후손 main 요소(element)가 없는 흐름(flow) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: complementary 역할(role) (기본 값 - 설정하지 마세요), note, search, presentation.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용합니다.

aside 요소(element)는 부모 위치의 섹션화(sectioning) 콘텐트의 콘텐트에 별로 관계 없이 관련되고, 그 콘텐트와 별개로 간주 될 수 있는 콘텐트로 구성되는 페이지의 섹션을 나타냅니다. 그 섹션들은 종종 인쇄된 표기법에서 사이드바(sidebar)들로 표현됩니다.

요소(element)는 발췌한 인용구나 사이드바 같은 인쇄 효과, 광고, nav 요소(element)들의 그룹, 가장 가까운 조상 섹션화(sectioning) 콘텐트의 주요 콘텐트에서 독립된 것으로 간주되는 다른 콘텐트로 사용될 수 있습니다.

보조 기술은 사용자에게 aside의 의미(semantic)를 전달 할 수 있습니다. 이 정보는 콘텐트의 유형에 관하여 사용자에게 힌트를 전달 할 수 있습니다. 예를 들어 이 경우에 "complementary"인 요소(element)의 role은 사용자가 aside 요소(element)로 탐색할 때 스크린리더 소프트웨어에 의해 알려질 수 있습니다. 유저 에이전트들은 또한 aside 요소(element)들로 탐색하기 위한 메서드들을 제공할 수 있습니다.

단순히 삽입구에 aside 요소(element)를 사용하는 것은, 그것이 문서의 주요 흐름의 부분이기 때문에 적절하지 않습니다.

다음 예제는 유럽에서 훨씬 더 긴 뉴스 기사에서 스위스의 배경 자료를 마크업하는데 aside가 사용되는 방법을 보여줍니다.

<aside>
  <h2>Switzerland</h2>
  <p>Switzerland, a land-locked country in the middle of geographic
  Europe, has not joined the geopolitical European Union, though it is
  a signatory to a number of European treaties.</p>
</aside>

다음 예제는 긴 기사에 인용구를 마크업하기 위해 aside가 어떻게 사용되는지를 보여줍니다.

...

<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I’m not at
work. But I’m paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn’t have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</q></p>

<aside>
  <q> People ask me what I do for fun when I’m not at work. But I’m
  paid to do my hobby, so I never know what to answer. </q>
</aside>

<p>Of course his work — or should that be hobby? —      isn’t his only passion. He also enjoys other pleasures.</p>

...

다음 발췌는 aside가 블로그의 블로그롤(blogroll)들과 기타 부수 콘텐트에 어떻게 사용되는지를 보여줍니다:

<body>
  <header>
    <h1>My wonderful blog</h1>
    <p>My tagline</p>
  </header>
  <aside>
    <!-- this aside contains two sections that are tangentially related
    to the page, namely, links to other blogs, and links to blog posts
    from this blog -->
    <nav>
      <h2>My blogroll</h2>
      <ul>
        <li><a href="https://blog.example.com/">Example Blog</a>
      </ul>
    </nav>
    <nav>
      <h2>Archives</h2>
      <ol reversed>
        <li><a href="/last-post">My last post</a>
        <li><a href="/first-post">My first post</a>
      </ol>
    </nav>
  </aside>
  <aside>
    <!-- this aside is tangentially related to the page also, it
    contains twitter messages from the blog author -->
    <h2>Twitter Feed</h2>
    <blockquote cite="https://twitter.example.net/t31351234">
      I’m on vacation, writing my blog.
    </blockquote>
    <blockquote cite="https://twitter.example.net/t31219752">
      I’m going to go on vacation soon.
    </blockquote>
  </aside>
  <article>
    <!-- this is a blog post -->
    <h2>My last post</h2>
    <p>This is my last post.</p>
    <footer>
      <p><a href="/last-post" rel=bookmark>Permalink</a>
    </footer>
  </article>
  <article>
    <!-- this is also a blog post -->
    <h2>My first post</h2>
    <p>This is my first post.</p>
    <aside>
      <!-- this aside is about the blog post, since it’s inside the
      <article> element; it would be wrong, for instance, to put the
        blogroll here, since the blogroll isn’t really related to this post
        specifically, only to the page as a whole -->
        <h1>Posting</h1>
        <p>While I’m thinking about it, I wanted to say something about
        posting. Posting is fun!</p>
    </aside>
    <footer>
      <p><a href="/first-post" rel=bookmark>Permalink</a>
    </footer>
  </article>
  <footer>
    <nav>
      <a href="/archives">Archives</a> —      <a href="/about">About me</a> —      <a href="/copyright">Copyright</a>
    </nav>
  </footer>
</body>

4.3.6. `h1`, `h2`, `h3`, `h4`, `h5`, `h6` 요소(element)들

카테고리:

흐름(flow) 콘텐트.

제목(heading) 콘텐트.

분명한(palpable) 콘텐트.

이 요소(element)가 사용될 수 있는 컨텍스트:

흐름(flow) 콘텐트가 기대되는 곳.

콘텐트 모델:

어구(phrasing) 콘텐트.

text/html에서 태그 생략:

어느 태그도 생략 가능하지 않습니다

콘텐트 속성(attribute)들:

범용 속성(attribute)들

허용된 ARIA 역할(role) 속성(attribute) 값들:

heading 역할(role) (기본 값 - 설정하지 마세요), tab 또는 presentation.

허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:

범용 aria-* 속성(attribute)들

허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들..

DOM 인터페이스:

interface HTMLHeadingElement : HTMLElement {};

이 요소(element)들은 그들의 섹션들의 제목(heading)들을 나타냅니다.

이 요소(element)들은 그들의 이름에 숫자로 주어진 등급을 가집니다. h1 요소(element)는 가장 상위 등급을 가지고, h6 요소(element)는 가장 낮은 등급을 가지며, 동일한 이름을 가진 두 요소(element)들은 동일한 등급을 가집니다.

문서 개요(outline)을 생성하기 위해 제목(heading) 요소(element)들의 등급을 사용하세요.

다음 코드는 제목(heading)들의 6개 수준들을 가진 문서 개요(outline)을 마크업하는 방법을 보여줍니다.

<body>
<h1>top level heading</h1>
 <section><h2>2nd level heading</h2>
  <section><h3>3nd level heading</h3>
   <section><h4>4th level heading</h4>
    <section><h5>5th level heading</h5>
     <section><h6>6th level heading</h6>
     </section>
    </section>
 </section>
</section>
</section>
</body>

문서 개요(outline)은 section 요소(element)가 사용되지 않았다면 동일할 것입니다.

h2–h6 요소(element)들은 새로운 섹션이나 하위 섹션에 대한 제목(heading)으로 의도되지 않은 한, 하위 제목(subheading)들, 부제(subtitle)들, 대체 제목(alternative title)들, 태그 라인들을 마크업하는데 사용되지 않아야(must) 합니다. 대신 명세의 §4.13 Common idioms without dedicated elements 섹션의 마크업 패턴을 사용하세요.

보조 기술은 종종 사용자에게 문서의 구조를 이해하고 그것의 개요(ouline)의 '심적 모델(mental model)'을 구성하기 위해 힌트로서, 제목(heading)의 존재와 수준을 알립니다. 예를 들어, 이 경우에 "heading"이고 제목(heading) 수준 "1"부터 "6"까지인, 요소(element)의 role은 사용자가 h1–h6 요소(element)로 탐색할 때 스크린리더 소프트웨어에 의해 알려질 수 있습니다. 유저 에이전트들은 또한 h1–h6 요소(element)로 탐색하기 위한 메서드들을 제공할 수 있습니다.

그들의 각 문서 개요(outline)들이 (그들의 제목(heading)과 섹션 구조들) 영향을 미치는 한, 이 두 코드 조각들은 의미적으로 동등합니다:

<body>
  <h1>Let’s call it a draw(ing surface)</h1>
  <h2>Diving in</h2>
  <h2>Simple shapes</h2>
  <h2>Canvas coordinates</h2>
  <h3>Canvas coordinates diagram</h3>
  <h2>Paths</h2>
</body>

<body>
  <h1>Let’s call it a draw(ing surface)</h1>
  <section>
    <h2>Diving in</h2>
  </section>
  <section>
    <h2>Simple shapes</h2>
  </section>
  <section>
    <h2>Canvas coordinates</h2>
    <section>
      <h3>Canvas coordinates diagram</h3>
    </section>
  </section>
  <section>
    <h2>Paths</h2>
  </section>
</body>

작성자들은 그것의 간결성을 위해 전자의 스타일이나, 혹은 많은 편집에도 불구하고 그것의 편의를 위해 후자의 스타일을 선호할 수 있습니다; 무엇이 가장 좋으냐는 순수하게 선호되는 작성자 스타일의 문제입니다.

레거시 도구와의 호환성을 위해 두 스타일들은 결합될 수 있는 동시에 그 호환성이 더 이상 요구되지 않는 경우를 위해 여전히 미래를 보장할 수 있습니다.

h1–h6 요소(element)들의 의미론과 의미는 §4.3.10 제목(heading)들과 섹션들의 섹션에서 더 자세히 설명됩니다.

4.3.7. `header` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 흐름(flow) 콘텐트가 기대되는 곳.
콘텐트 모델:: 후손 main 요소(element) 혹은 header의 후손인 섹션화(sectioning) 콘텐트의 후손들이 아닌 header, footer 요소(element)들이 없는 흐름(flow) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: banner 역할(role) (기본 값 - 설정하지 마세요) 혹은 presentation.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용합니다.

header 요소(element)는 그것의 가장 가까운 조상 섹션화(sectioning) 콘텐트나 섹션화(sectioning) 루트 요소(element)에 대한 서두의 콘텐트를 나타냅니다. header는 일반적으로 서두 혹은 탐색 도구의 그룹을 포함합니다.

가장 가까운 조상 섹션화(sectioning) 콘텐트나 섹션화(sectioning) 루트 요소(element)가 body 요소(element)인 경우, 그것은 전체 페이지에 적용됩니다.

header 요소(element)는 보통 섹션의 제목(heading)을 (h1–h6 요소(element)) 포함하도록 의도되지만, 이것은 필수는 아닙니다. header 요소(element)는 또한 섹션의 콘텐츠 목차, 검색 양식, 관련 로고들을 감싸는데 사용될 수 있습니다.

가장 가까운 조상 섹션화(sectioning) 콘텐트나 섹션화(sectioning) 루트 요소(element)가 body 요소(element)인 경우 보조 기술은 사용자들에게 header의 의미(semantic)를 전달할 수 있습니다. 이 정보는 콘텐트의 유형에 관하여 사용자에게 힌트를 제공할 수 있습니다. 예를 들어 이 경우에 "banner"인, 요소(element)의 role은 사용자가 범위를 body 요소(element)로 하는 header 요소(element)들로 탐색할 때 스크린리더 소프트웨어에 의해 알려질 수 있습니다. 유저 에이전트들은 또한 범위를 body 요소(element)로 하는 header 요소(element)들로 탐색 하기 위한 메서드들을 제공할 수 있습니다.

여기 일부 샘플 헤더들이 있습니다. 이 첫 번째 것은 게임에 대한 것입니다:

<header>
  <p>Welcome to...</p>
  <h1>Voidwars!</h1>
</header>

다음 코드 조각은 요소(element)가 명세의 헤더를 마크업하는데 사용될 수 있는 방법을 보여줍니다:

<header>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <p>W3C Working Draft 27 October 2004</p>
  <dl>
    <dt>This version:</dt>
    <dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20041027/">https://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
    <dt>Previous version:</dt>
    <dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20040510/">https://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
    <dt>Latest version of SVG 1.2:</dt>
    <dd><a href="https://www.w3.org/TR/SVG12/">https://www.w3.org/TR/SVG12/</a></dd>
    <dt>Latest SVG Recommendation:</dt>
    <dd><a href="https://www.w3.org/TR/SVG/">https://www.w3.org/TR/SVG/</a></dd>
    <dt>Editor:</dt>
    <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
    <dt>Authors:</dt>
    <dd>See <a href="#authors">Author List</a></dd>
  </dl>
  <p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

header 요소(element)는 섹션화(sectioning) 콘텐트가 아닙니다; 이것은 새로운 섹션을 도입시키지 않습니다.

이 예제에서, 페이지는 h1 요소(element)에 의해 주어진 페이지 제목(heading)과, h2 요소(element)들에 의해 주어지는 제목(heading)의 두 하위 섹션들을 가집니다. header 요소(element) 이후의 콘텐트는 header 요소(element)가 개요(outline) 알고리즘에 참여하지 않기 때문에, 여전히 header 요소(element) 내에서 시작된 마지막 하위 섹션의 일부입니다.

<body>
  <header>
    <h1>Little Green Guys With Guns</h1>
    <nav>
      <ul>
      <li><a href="/games">Games</a>
      <li><a href="/forum">Forum</a>
      <li><a href="/download">Download</a>
      </ul>
    </nav>
    <h2>Important News</h2> <!-- this starts a second subsection -->
    <!-- this is part of the subsection entitled "Important News" -->
    <p>To play today’s games you will need to update your client.</p>
    <h2>Games</h2> <!-- this starts a third subsection -->
    </header>
    <p>You have three active games:</p>
    <!-- this is still part of the subsection entitled "Games" -->
    ...

개발자가 다른 header 안에 header나 footer를 중첩시키기 원하는 경우들에 대해: header 요소(element)는 header나 footer가 섹션화(sectioning) 콘텐트 내에 포함된 것들인 경우에만 header나 footer를 포함할 수 있습니다.

이 예제에서, article은 header를 포함하는 aside를 포함한 header를 가집니다. 후손 header가 aside 요소(element) 내에 포함되기 때문에 이것은 적합합니다.

<article>
  <header>
    <h1>Flexbox: The definitive guide</h1>
    <aside>
      <header>
        <h2>About the author: Wes McSilly</h2>
        <p><a href="./wes-mcsilly/">Contact him! (Why would you?)</a></p>
      </header>
      <p>Expert in nothing but Flexbox. Talented circus sideshow.</p>
    </aside>
  </header>
  <p><ins>The guide about Flexbox was supposed to be here, but it
    turned out Wes wasn’t a Flexbox expert either.</ins></p>
</article>

카테고리:: 흐름(flow) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 흐름(flow) 콘텐트가 기대되는 곳.
콘텐트 모델:: 후손 main 요소(element) 혹은 footer의 후손인 섹션화(sectioning) 콘텐트의 후손들이 아닌 header, footer 요소(element)들이 없는 흐름(flow) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: contentinfo 역할(role) (기본 값 - 설정하지 마세요) 또는 presentation.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용합니다.

footer 요소(element)는 가장 가까운 조상 섹션화(sectioning) 콘텐트나 섹션화(sectioning) 루트에 대한 푸터를 나타냅니다. 푸터는 일반적으로 누가 작성하였는지, 관련된 문서로의 링크, 저작권 데이터 등과 같은 그것의 섹션에 대한 정보를 포함합니다.

footer 요소(element)가 전체 섹션들을 포함할 경우, 그것들은 부록, 색인, 긴 출판사 이름들, 장황한 사용권 동의서들, 기타 그러한 콘텐트들을 나타냅니다.

가장 가까운 조상 섹션화(sectioning) 콘텐트나 섹션화(sectioning) 루트가 body 요소(element)인 경우 보조 기술은 사용자에게 footer의 의미(semantic)를 전달할 수 있습니다. 이 정보는 콘텐트의 유형에 관하여 사용자에게 힌트로 제공할 수 있습니다. 예를 들어, 이 경우 "콘텐트 정보"인 요소(element)의 role은 사용자가 범위를 body 요소(element)로 하는 footer 요소(element)로 탐색할 때 스크린리더 소프트웨어에 의해 알려질 수 있습니다. 유저 에이전트들은 또한 범위를 body 요소(element)로 하는 footer 요소(element)들로 탐색하기 위한 메서드들을 제공할 수 있습니다.

섹션의 작성자나 편집자에 대한 연락 정보는 아마도 footer 내부에 있는, address 요소(element)에 속합니다. header나 footer 모두에 적합할 수 있는 필자의 이름을 적은 행들과 다른 정보는 둘 중 하나에 배치 될 수 (혹은 둘 중 어디에도 배치되지 않을 수) 있습니다. 이 요소(element)들의 주된 목적은 단순히 작성자가 유지보수와 스타일이 쉬운 자명한 마크업을 작성하는 것을 돕는 것입니다; 그것들은 작성자에게 특정한 구조들을 강요하기 위한 것이 아닙니다.

푸터들은 보통 그렇기는 하지만, 섹션의 끝에 나타날 필요는 없습니다.

가장 가까운 조상 섹션화(sectioning) 콘텐트나 섹션화(sectioning) 루트 요소(element)가 body 인 경우, 그것은 전체 페이지에 적용됩니다.

footer 요소(element)는 섹션화(sectioning) 콘텐트가 아닙니다; 그것은 새로운 섹션을 도입하지 않습니다.

여기 동일한 컨텐트를 가진 상단과 바닥에 있는 두 개의 푸터들을 가진 페이지가 있습니다:

<body>
  <footer><a href="../">Back to index...</a></footer>
  <div>
    <h1>Lorem ipsum</h1>
    <p>The ipsum of all lorems</p>
  </div>
  <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
  ea commodo consequat. Duis aute irure dolor in reprehenderit in
  voluptate velit esse cillum dolore eu fugiat nulla
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  culpa qui officia deserunt mollit anim id est laborum.</p>
  <footer><a href="../">Back to index...</a></footer>
</body>

여기 사이트 전반 푸터와 섹션 푸터 둘 모두에 사용되는 footer 요소(element)를 보여주는 예가 있습니다.

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<h1>The Ramblings of a Scientist</h1>
<MAIN>
  <ARTICLE>
  <H2>Episode 15</H2>
  <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
  </VIDEO>
  <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
  </FOOTER>
</ARTICLE>
<ARTICLE>
  <H2>My Favorite Trains</H2>
  <P>I love my trains. My favorite train of all time is a Köf.</P>
  <P>It is fun to see them pull some coal cars because they look so
  dwarfed in comparison.</P>
  <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
  </FOOTER>
  </ARTICLE>
</MAIN>
<FOOTER> <!-- site wide footer -->
  <NAV>
  <P><A HREF="/credits.html">Credits</A> —      <A HREF="/tos.html">Terms of Service</A> —      <A HREF="/index.html">Blog Index</A></P>
  </NAV>
  <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

일부 사이트 디자인들은 "넓은 푸터들" — 이미지, 다른 아티클들로의 링크, 피드백을 보내기 위한 페이지로의 링크, 특별한 제안... 어떤 점에서는 푸터 내 전체 "프론트 페이지"를 포함하는 많은 자료들을 포함하는 푸터들 같은 것에 종종 참조되는 것을 가집니다.

이 코드 조각은 "넓은 푸터"를 가진 사이트의 페이지의 바닥을 보여줍니다:

...
  <footer>
    <nav>
      <section>
        <h2>Articles</h2>
        <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
        our somersaults class! Our teacher Jim takes you through the paces
        in this two-part article. <a href="articles/somersaults/1">Part
        1</a> · <a href="articles/somersaults/2">Part 2</a></p>
        <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
        a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
        your way through the bars. <a href="articles/kindplus/1">Read
        more...</a></p>
        <p><img src="images/crisps.jpeg"> The chips are down, now all
        that’s left is a potato. What can you do with it? <a
        href="articles/crisps/1">Read more...</a></p>
      </section>
      <ul>
        <li> <a href="/about">About us...</a>
        <li> <a href="/feedback">Send feedback!</a>
        <li> <a href="/sitemap">Sitemap</a>
      </ul>
    </nav>
    <p><small>Copyright © 2015 The Snacker —      <a href="/tos">Terms of Service</a></small></p>
  </footer>
</body>

4.3.9. `address` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 흐름(flow) 콘텐트가 기대되는 곳.
콘텐트 모델:: 후손 제목(heading) 콘텐트들을 가지지 않고, 후손 섹션화(sectioning) 콘텐트들을 가지지 않으며, 후손 header, footer 혹은 address 요소(element)를 가지지 않는 흐름(flow) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: contentinfo 역할(role).
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용합니다.

address 요소(element)는 가장 가까운 조상 article이나 body 요소(element)에 대한 연락 정보를 나타냅니다. 그것이 body 요소(element)라면 연락 정보는 전체 문서에 적용됩니다.

예를 들어, HTML에 관련된 W3C 웹 사이트에 있는 페이지는 다음 연락 정보를 포함할 수 있습니다:

<ADDRESS>
  <A href="../People/Raggett/">Dave Raggett</A>,
  <A href="../People/Arnaud/">Arnaud Le Hors</A>,
  contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

address 요소(element)는 그 주소들이 실제로 관련 연락 정보가 아닌 한, 임의의 주소를 (예를 들어, 우편 주소들) 나타내는데 사용되지 않아야(must) 합니다. (일반적으로 p 요소(element)가 우편 주소들을 마크업하기 위한 적절한 요소(element)입니다.)

address 요소(element)는 연락 정보 외 다른 정보를 포함하야 않아야(must) 합니다.

예를 들어, 다음은 address 요소(element) 사용의 부적합한 사용입니다:

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>

일반적으로, address 요소(element)는 footer 요소(element)에 다른 정보와 함께 포함될 것입니다.

노드 node에 대한 연락 정보는 다음 목록 중 첫 번째 적용가능한 항목에 의해 정의된 address 요소(element)들의 컬렉션입니다:

node가 article 요소(element)라면
node가 body 요소(element)라면: 연락 정보는 조상으로 node를 가지고 node의 후손인 다른 조상 body나 article 요소(element)를 가지지 않는 모든 address 요소(element)들로 구성됩니다.
node가 article 요소(element)인 조상 요소(element)를 가진다면
node가 body 요소(element)인 조상 요소(element)를 가진다면: node의 연락 정보는 가장 가까운 조상 article나 body 요소(element) 중 가장 가까운 것의 연락 정보와 동일합니다.
node의 노드 문서가 body 요소(element)를 가진다면: node의 연락 정보는 Document의 body 요소(element)의 연락 정보와 동일합니다.
그렇지 않으면: node에 대한 연락 정보는 없습니다.

유저 에이전트들은 사용자에게 노드의 연락 정보를 노출하거나, 섹션의 연락 정보를 기반으로 섹션들을 색인하는 것 같은 다른 목적으로 사용할 수 있습니다.

<footer>
  <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
  </address>
  <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

4.3.10. 제목(heading)들과 섹션들

h1–h6 요소(element)들은 제목(heading)들입니다.

섹션화(sectioning) 콘텐트의 요소(element) 내 제목(heading) 콘텐트의 첫 번째 요소(element)는 그 섹션에 대한 제목(heading)을 나타냅니다. 동일한 혹은 상위 등급의 다음 제목(heading)들은 새로운 (암묵적인) 섹션들을 시작하고, 하위 등급의 제목(heading)들은 이전 것의 일부인 암묵적인 하위 섹션들을 시작합니다. 두 경우에, 요소(element)는 암묵적인 섹션의 제목(heading)을 나타냅니다.

h1–h6 요소(element)들은 새로운 섹션이나 하위 섹션에 대한 제목(heading)으로 의도되지 않은 한, 하위 제목(subheading)들, 부제(subtitle)들, 대체 제목(alternative title)들, 태그 라인들을 마크업하는데 사용되지 않아야(must) 합니다. 대신 명세의 §4.13 Common idioms without dedicated elements 섹션의 마크업 패턴을 사용하세요.

특정 요소(element)들은 blockquote와 td 요소(element)들을 포함하여, 섹션화(sectioning) 루트들로 불립니다. 이 요소(element)들은 그들 자신의 개요(outline)들을 가질 수 있지만, 이 요소(element)들 안의 섹션들과 제목(heading)들은 그들 조상들의 개요(outline)들에 영향을 주지 않습니다.

섹션화(sectioning) 콘텐트는, 다른 제목(heading)들이 생성할 수 있는 암묵적 섹션에 상관없이, 항상 그들의 가장 가까운 조상 섹션화(sectioning) 루트나 그들의 가장 가까운 섹션화(sectioning) 콘텐트의 중 가장 가까운 것의 하위 섹션들로 간주됩니다.

다음 코드 조각에 대한:

<body>
  <h1>Foo</h1>
  <h2>Bar</h2>
  <blockquote>
    <h3>Bla</h3>
  </blockquote>
  <p>Baz</p>
  <h2>Quux</h2>
  <section>
    <h3>Thud</h3>
  </section>
  <p>Grunt</p>
</body>

...구조는 이러할 것입니다:

Foo ("Grunt" 문단을 포함하는, 명시적인 body 섹션의 제목(heading))
1. Bar (인용구와 "Baz" 문단을 포함하는, 암묵적 섹션을 시작하는 제목(heading))
2. Quux (제목(heading) 자체 외 다른 콘텐트가 없는 암묵적 세션을 시작하는 제목(heading))
3. Thud (명시적인 section 섹션의 제목(heading))

section이 이전의 암묵적 섹션을 종료하기 때문에 마지막 문단("Grunt")이 최 상위 수준으로 돌아가는 방식에 주목하세요.

섹션들은 그들의 섹션 중첩 수준과 동일한 등급의 제목(heading)들을 포함할 수 있습니다. 작성자들은 섹션의 중첩 수준에 대한 적절한 등급의 제목(heading)들을 사용해야(should) 합니다.

작성자들은 또한 하나의 섹션화(sectioning) 콘텐트의 요소(element)에 여러 제목(heading)들을 가지는 것에 의해 생성되는 암묵적 섹션들에 의존하는 대신, 섹션화(sectioning) 콘텐트의 요소(element)들 안의 섹션들을 명시적으로 감싸도록 권장됩니다.

예를 들어, 다음은 정확합니다:

<body>
  <h1>Apples</h1>
  <p>Apples are fruit.</p>
  <section>
    <h2>Taste</h2>
    <p>They taste lovely.</p>
    <h3>Sweet</h3>
    <p>Red apples are sweeter than green ones.</p>
    <h3>Color</h3>
    <p>Apples come in various colors.</p>
  </section>
</body>

하지만, 동일한 문서가 다음과 같이 좀 더 명확하게 표현될 수 있습니다:

<body>
  <h1>Apples</h1>
  <p>Apples are fruit.</p>
  <section>
    <h2>Taste</h2>
    <p>They taste lovely.</p>
    <section>
      <h3>Sweet</h3>
      <p>Red apples are sweeter than green ones.</p>
    </section>
  </section>
  <section>
    <h3>Color</h3>
    <p>Apples come in various colors.</p>
  </section>
</body>

위 문서들 모두 의미론적으로 동일하고 규칙을 준수하는 유저 에이전트들에서 동일한 개요(outline)를 생성할 것입니다.

위 예제는 잘못 되었습니다. 실제로 두 코드는 서로 다른 개요(outline)을 생성합니다.
이 내용은 W3C HTML Github Issue를 통해 확인 되었고, 수정된 내용이 HTML 5.2에 반영됩니다.
전자의 코드와 동일한 개요(outline)을 가지는 것은 다음 코드가 됩니다.

<body>
  <h1>Apples</h1>
  <p>Apples are fruit.</p>
  <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
    <h3>Sweet</h3>
    <p>Red apples are sweeter than green ones.</p>
  </section>
  <section>
    <h3>Color</h3>
    <p>Apples come in various colors.</p>
  </section>
  </section>
</body>

4.3.10.1. 개요(outline) 생성

개요(outline) 알고리즘이 적합성 검사기들과 브라우저 확장들 같은 다른 소프트웨어에 구현되기는 하지만, 그래픽 브라우저들이나 보조 도구 유저 에이전트들에 현재 알려진 개요(outline) 알고리즘의 네이티브 구현은 없습니다. 따라서 개요 알고리즘은 사용자들에게 문서 구조를 전달하는데 신뢰될 수 없습니다. 작성자들은 문서 구조를 전달하기 위해 제목(heading) 등급을 (h1-h6) 사용해야(should) 합니다.

이 섹션은 비 규범적입니다.

이 섹션은 섹션화(sectioning) 콘텐트 요소(element)나 섹션화(sectioning) 루트에 대한 개요(outline) 생성을 위한 알고리즘을 정의합니다. 이것은 순회 하는 동안 입장할 때와 퇴장할 때 방문되는 각 노드들을 가지고, 트리 순서에 따라 DOM 트리의 노드들을 순회하는 측면에서 정의됩니다.

섹션화(sectioning) 콘텐트 요소(element)나 섹션화(sectioning) 루트 요소(element)에 대한 개요(outline)는 하나 이상의 잠재적으로 중첩되는 섹션들의 목록으로 구성됩니다. 개요(outline)이 생성되는 요소(element)는 개요(outline)의 소유자라고 합니다.

섹션은 원래 DOM 트리의 일부 노드에 해당하는 컨테이너 입니다. 각 섹션은 그것에 연관된 제목(heading)을 가질 수 있고, 추가적인 중첩된 섹션들을 얼마든지 포함할 수 있습니다. 개요(outline)에 대한 알고리즘은 또한 특정 섹션과 잠재적으로 제목(heading)을 가진 DOM 트리의 각 노드를 연관시킵니다. (개요(outline)의 섹션들은 섹션 요소(element)들에 해당 할 수 있기는 하지만 섹션 요소(element)들은 아닙니다 — 그것들은 단지 개념적인 섹션들입니다.)

다음 마크업 조각은:

<body>
  <h1>A</h1>
  <p>B</p>
  <h2>C</h2>
  <p>D</p>
  <h2>E</h2>
  <p>F</p>
</body>

...body 노드에 대해 (그리고 따라서 전체 문서에 대해) 생성되는 다음 개요(outline)를 낳습니다:

body 노드에 대해 생성된 섹션. 제목(heading) "A"와 연관됨. 또한 문단 "B"와 연관됨. 중첩된 섹션들:
1. 첫 번째 h2 요소(element)에 대한 암묵적 섹션. 제목(heading) "C"와 연관됨. 또한 문단 "D"와 연관됨. 중첩된 섹션들 없음.
2. 두 번째 h2 요소(element)에 대한 암묵적 섹션. 제목(heading) "E"와 연관됨. 또한 문단 "F"와 연관됨. 중첩된 섹션들 없음.

요소(element)의 개요(outline)를 결정하기 위해 섹션화(sectioning) 콘텐트 요소(element)나 섹션화(sectioning) 루트에 뿌리를 둔 DOM 하위트리의 순회 동안 따라야(must)하는 알고리즘은 다음과 같습니다:

current outline target를 null로 둡니다. (이것은 생성 되는 중인 개요(outline)의 요소(element)를 보유합니다.)
current section를 null로 둡니다. (이것은 섹션에 대한 포인터를 보유하고, 따라서 DOM의 요소(element)들은 모두 섹션에 연관될 수 있습니다.)
중첩을 처리하는데 사용되는 요소(element)들을 보유하기 위한 스택을 생성합니다. 이 스택을 빈 것으로 초기화 합니다.
개요(outline)가 생성되는 하위 트리의 루트에 있는 섹션화(sectioning) 콘텐트 요소(element)나 섹션화(sectioning) 루트를 가지고 시작하여 트리 순서에 따라 DOM을 순회하고, 입장하고 퇴장할 때 각 요소(element)에 대해 아래 첫 번째 관련 단계를 작동시킵니다.
요소를 퇴장 중일때, 그 요소(element)가 스택의 최 상단에 있는 요소(element)라면

퇴장 되는 중인 요소(element)는 제목(heading) 콘텐트 요소(element)나 hidden 속성(attribute)을 가진 요소(element)입니다.

스택으로부터 그 요소(element)를 꺼냅니다.

스택의 최 상단이 제목(heading) 콘텐트 요소나 hidden 속성(attribute)을 가진 요소(element)입니다.
아무 것도 하지 않습니다.
hidden 속성(attribute)를 가진 요소(element)를 입장 중일 때
스택에 입장 되는 중인 요소(element)를 넣습니다. (이것은 그 요소(element)와 요소(element)의 모든 후손들을 건너 뛰기 위한 알고리즘을 발생시킵니다.)
섹션화(sectioning) 콘텐트 요소(element)에 입장 중일 때
이 단계들을 수행합니다:
1. current outline target가 null이 아니라면, 이 단계들을 수행합니다:
  1. current section가 제목(heading)을 가지지 않는다면, 암묵적 제목(heading)을 생성하고 그것을 current section에 대한 제목(heading)으로 둡니다.
  2. 스택에 current outline target를 넣습니다.
2. current outline target를 입장 되는 중인 요소(element)로 둡니다.
3. current section를 current outline target 요소(element)에 대해 새롭게 생성된 섹션으로 둡니다.
4. current outline target를 current section과 연관시킵니다.
5. 개요(outline)의 유일한 섹션으로서 새로운 current section으로 초기화 된, 새로운 current outline target에 대한 새로운 개요(outline)이 있게 합니다.
섹션화(sectioning) 콘텐트 요소(element)를 퇴장 중일 때, 스택이 비어있지 않다면
이 단계들을 수행합니다:
1. current section가 제목(heading)을 가지지 않는다면, 암묵적 제목(heading)을 생성하고 그것을 current section에 대한 제목(heading)으로 둡니다.
2. 스택으로부터 최 상단 요소(element)를 꺼내고, current outline target를 그 요소(element)로 둡니다.
3. current section를 current outline target 요소(element)의 개요(outline) 내의 마지막 섹션으로 둡니다.
4. 퇴장하는 섹션화(sectioning) 콘텐트 요소(element)의 개요(outline)을 current section에 추가(append)합니다. (이것은 어떤 섹션이 개요(outline) 내의 마지막 섹션인지를 변경하지 않습니다.)
섹션화(sectioning) 루트 요소(element)를 입장 중일 때
이 단계들을 수행합니다:
1. current outline target가 null이 아니라면, 스택에 current outline target를 넣습니다.
2. current outline target를 입장하는 요소(element)로 둡니다.
3. current outline target의 부모 섹션을 current section로 둡니다.
4. current section를 current outline target 요소(element)에 대해 새롭게 생성된 섹션으로 둡니다.
5. 개요(outline)의 유일한 섹션으로서 새로운 current section으로 초기화 된, 새로운 current outline target에 대한 새로운 개요(outline)를 있게 합니다.
섹션화(sectioning) 루트 요소(element)를 퇴장 중일 때, 스택이 비어있지 않다면
이 단계들을 수행합니다:
1. current section가 제목(heading)을 가지지 않는다면, 암묵적 제목(heading)을 생성하고 그것을 current section에 대한 제목(heading)으로 둡니다.
2. current section를 current outline target의 부모 섹션으로 둡니다.
3. 스택에서 최 상단 요소(element)를 꺼내고, current outline target를 그 요소(element)로 둡니다.
섹션화(sectioning) 콘텐트나 섹션화(sectioning) 루트 요소(element)를 퇴장 중일 때 (스택이 비어있는 경우)

current outline target는 퇴장되는 중인 요소(element)이고, 그것은 개요(outline)가 생성되는 하위 트리의 루트에 있는 섹션화(sectioning) 콘텐트나 섹션화(sectioning) 루트 요소(element)입니다.

current section가 제목(heading)을 가지지 않는다면, 암묵적 제목(heading)을 생성하고 그것을 current section에 대한 제목(heading)으로 둡니다.

전체 단계들의 세트의 다음 단계들로 건너뜁니다. (순회가 끝납니다.)

제목(heading) 콘텐트 요소(element)로 입장 중일 때
current section가 제목(heading)을 가지지 않는다면, 입장 되는 중인 요소(element)를 current section에 대한 제목(heading)으로 둡니다.
그렇지 않고, 입장 되는 중인 요소(element)가 current outline target의 개요(outline)의 마지막 섹션의 제목(heading)과 동일 또는 상위의 등급을 가지거나, current outline target의 개요(outline)의 마지막 섹션의 제목(heading)이 암묵적 제목(heading)이라면, 새로운 섹션을 생성하고 current outline target 요소(element)를 추가(append)하며, 따라서 이 새로운 섹션은 그 개요(outline)의 새로운 마지막 섹션입니다. current section를 그 새로운 섹션으로 둡니다. 입장하는 요소(element)를 current section에 대한 새로운 제목(heading)으로 둡니다.

그렇지 않으면, 이 하위 단계들을 수행합니다:
1. candidate section를 current section로 둡니다.
2. Heading loop: 입장 되는 중인 요소(element)가 candidate section의 제목(heading)의 등급보다 낮은 등급을 가진다면, 새로운 섹션을 생성하고, candidate section에 그것을 추가(append) 합니다. (이것은 개요(outline)의 마지막 섹션이 어떤 섹션인지를 변경하지 않습니다.) current section를 이 새로운 섹션으로 둡니다. 입장 되는 중인 요소(element)를 current section에 대한 새로운 제목(heading)으로 둡니다. 이 하위 단계들을 중단합니다.
3. new candidate section를 current outline target의 개요(outline) 내의 candidate section를 포함하는 섹션으로 둡니다.
4. candidate section를 new candidate section로 둡니다.
5. heading loop로 라벨링 된 단계로 돌아갑니다.
입장 되는 중인 요소(element)를 스택에 넣습니다. (이것은 요소(element)의 모든 후손들을 건너 뛰기 위한 알고리즘을 발생시킵니다.)

h1이 가장 상위 등급을 가지고, h6가 가장 하위 등급을 가진다는 것을 상기하세요.
그렇지 않으면
아무 것도 하지 않습니다.
덧붙여, 순회를 종료 할 때마다, 위 단계들을 수행 한 뒤, 노드가 아직 섹션과 연관된 것이 아니라면, current section 섹션과 노드를 연관시킵니다.
개요(outline)가 생성되는 하위 트리에 있는 모든 비 요소(non-element) 노드들은 부모 요소(element)가 연관된 섹션과 연관시킵니다.
하위 트리의 모든 노드들을 그것들이 연관된 섹션의 제목(heading)이 있다면 그것들과 연관시킵니다.

위 알고리즘에 의해 생성된 섹션들의 트리나 그것의 올바른 하위 세트는 문서 개요(outline)들을 생성할 때, 예를 들어 콘텐츠 목차를 생성할 때, 사용되어야(must) 합니다.

Document의 body 요소(element)에 대해 생성된 개요(outline)은 전체 문서의 개요(outline)입니다.

콘텐츠의 상호 작용 목차를 생성할 경우, 섹션이 원본 문서의 실제 요소(element)에 대해 생성되었다면 항목들은 관련 섹션화(sectioning) 콘텐트로, 또는 트리 내 섹션이 위 프로세스에서 제목(heading)에 대해 생성되었다면 관련 제목(heading) 콘텐트 요소(element)로 사용자를 건너뛰게 해야(should) 합니다.

따라서 문서의 첫 번째 섹션을 선택하는 것은 body 내 첫 번째 제목(heading)이 발견되는 곳에 상관없이, 항상 사용자를 문서의 최 상단으로 데려갑니다.

섹션 section과 연관된 제목(heading) 콘텐트 요소(element)의 개요 깊이(outline depth)는 section이 그것의 Document의 요소(element)들의 개요(outline)들이 생성될 때 자신을 발견하는 가장 바깥쪽의 개요(outline) 내의 section의 조상들인 섹션들의 수에 1을 더한 것입니다. 섹션과 연관되지 않은 제목(heading) 콘텐트 요소(element)의 개요 깊이(outline depth)는 1입니다.

유저 에이전트는 명시적인 섹션 제목(heading)을 가지지 않는 섹션들에 대한 기본 제목(heading)들을 제공해야(should) 합니다.

다음 코드 조각을 고려해보세요:

<body>
  <nav>
    <p><a href="/">Home</a></p>
  </nav>
  <p>Hello world.</p>
  <aside>
    <p>My cat is cute.</p>
  </aside>
</body>

비록 제목(heading)들을 포함하지 않지만, 이 코드 조각은 세 개의 섹션들을 가집니다: 두 하위 섹션을 (nav와 aside) 가진 문서 (body). 유저 에이전트는 다음과 같이 개요(outline)을 표현할 수 있습니다:

Untitled document
1. Navigation
2. Sidebar

이 기본 제목(heading)들은 ("Untitled document", "Navigation", "Sidebar")은 이 명세에 의해 명시되지 않고, 사용자의 언어, 페이지의 언어, 사용자의 환경 설정, 유저 에어전트 구현자의 선호도 등등에 의해 변할 수 있습니다.

다음 자바스크립트 함수는 트리 순회가 구현될 수 있는 방법을 보여줍니다. root 인수는 순회하기 위한 트리의 루트 (섹션화(sectioning) 콘텐트 요소(element)나 섹션화(sectioning) 루트 요소(element)), enter와 exit 인수들은 입장 되고 퇴장 될 때 노드들을 가지고 호출되는 콜백 함수들 입니다. [ECMA-262]

function (root, enter, exit) {
  var node = root;
  start: while (node) {
    enter(node);
    if (node.firstChild) {
      node = node.firstChild;
      continue start;
    }
    while (node) {
      exit(node);
      if (node == root) {
        node = null;
      } else if (node.nextSibling) {
        node = node.nextSibling;
        continue start;
      } else {
        node = node.parentNode;
      }
    }
  }
}

4.3.11. 사용법 요약

이 섹션은 비 규범적입니다.

요소(element)	용도(purpose)
요소(element)	예시
`body`
`body`	<!DOCTYPE HTML> <html> <head> <title>Steve Hill’s Home Page</title> </head> <body> <p>Hard Trance is My Life.</p> </body> </html>
`article`
`article`	<article> <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'"> <p>My fave Masif tee so far!</p> <footer>Posted 2 days ago</footer> </article> <article> <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt=""> <p>Happy 2nd birthday Masif Saturdays!!!</p> <footer>Posted 3 weeks ago</footer> </article>
`section`
`section`	<h1>Biography</h1> <section> <h1>The facts</h1> <p>1500+ shows, 14+ countries</p> </section> <section> <h1>2010/2011 figures per year</h1> <p>100+ shows, 8+ countries</p> </section>
`nav`
`nav`	<nav> <ul> <li><a href="/">Home</a> <li><a href="/biog.html">Bio</a> <li><a href="/discog.html">Discog</a> </ul> </nav>
`aside`
`aside`	<h1>Music</h1> <p>As any burner can tell you, the event has a lot of trance.</p> <aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside> <p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>
`h1`–`h6`	섹션 제목(heading)
`h1`–`h6`	<h1>The Guide To Music On The Playa</h1> <h2>The Main Stage</h2> <p>If you want to play on a stage, you should bring one.</p> <h2>Amplified Music</h2> <p>Amplifiers up to 300W or 90dB are welcome.</p>
`header`
`header`	<article> <header> <h1>Hard Trance is My Life</h1> <p>By DJ Steve Hill and Technikal</p> </header> <p>The album with the amusing punctuation has red artwork.</p> </article>
`footer`
`footer`	<article> <h1>Hard Trance is My Life</h1> <p>The album with the amusing punctuation has red artwork.</p> <footer> <p>Artists: DJ Steve Hill and Technikal</p> </footer> </article>
`address`
`address`	<address> To book DJ Steve Hill and Technikal, contact our <a href="mailto:management@example.com">management</a>. </address>

4.3.11.1. Article or section?

이 섹션은 비 규범적입니다.

section은 다른 무언가의 일부를 구성합니다. article은 그 자체의 것입니다. 하지만 어떤 것이 어떤 것인지 어떻게 알까요? 대부분 실제 대답은 "그것은 작성자 의도에 달려있다"입니다.

예를 들어, "이 과즙이 풍부한 초록 사과는 사과 파이를 꽉 채웁니다."라고 말하는 "Granny Smith" 챕터를 가진 책을 떠올릴 수 있습니다; 그것은 사과들의 다른 종류에 (아마도) 다른 많은 챕터가 있을 것이기 때문에 section이 될 수 있습니다.

반면에, "그래니 스미스. 이 과즙이 풍부한 초록 사과는 사과 파이를 꽉 채웁니다."라고 말하는 트윗이나 텀블러 게시물 혹은 신문 광고를 연상할 수 있습니다; 그것은 그것이 전부였기 때문에 article들 일 것입니다.

아티클의 댓글들은 댓글을 달고 있는 article의 일부가 아니지만 관련된 것이므로 그것들 자신의 중첩 된 article에 포함 될 수 있습니다.

HTML 5.1

W3C Recommendation, 1 November 2016

4.3. 섹션

4.3.1. `body` 요소(element)

4.3.2. `article` 요소(element)

4.3.3. `section` 요소(element)

4.3.4. `nav` 요소(element)

4.3.5. `aside` 요소(element)

4.3.6. `h1`, `h2`, `h3`, `h4`, `h5`, `h6` 요소(element)들

4.3.7. `header` 요소(element)

4.3.8. `footer` 요소(element)

4.3.9. `address` 요소(element)

4.3.10. 제목(heading)들과 섹션들

4.3.10.1. 개요(outline) 생성

4.3.11. 사용법 요약

4.3.11.1. Article or section?

4.3. 섹션

4.3.1. body 요소(element)

4.3.2. article 요소(element)

4.3.3. section 요소(element)

4.3.4. nav 요소(element)

4.3.5. aside 요소(element)

4.3.6. h1, h2, h3, h4, h5, h6 요소(element)들

4.3.7. header 요소(element)

4.3.8. footer 요소(element)

4.3.9. address 요소(element)

4.3.10. 제목(heading)들과 섹션들

4.3.10.1. 개요(outline) 생성

4.3.11. 사용법 요약

4.3.11.1. Article or section?

4.3.1. `body` 요소(element)

4.3.2. `article` 요소(element)

4.3.3. `section` 요소(element)

4.3.4. `nav` 요소(element)

4.3.5. `aside` 요소(element)

4.3.6. `h1`, `h2`, `h3`, `h4`, `h5`, `h6` 요소(element)들

4.3.7. `header` 요소(element)

4.3.8. `footer` 요소(element)

4.3.9. `address` 요소(element)