명세 전체 차례
    1. 4.4 섹션
      1. 4.4.1 body 요소
      2. 4.4.2 section 요소
      3. 4.4.3 nav 요소
      4. 4.4.4 article 요소
      5. 4.4.5 aside 요소
      6. 4.4.6 h1, h2, h3, h4, h5, h6 요소
      7. 4.4.7 hgroup 요소
      8. 4.4.8 header 요소
      9. 4.4.9 footer 요소
      10. 4.4.10 address 요소
      11. 4.4.11 제목과 섹션
        1. 4.4.11.1 개요outline 생성

4.4 섹션

4.4.1 body 요소

요소가 속하는 범주Categories
Sectioning root.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

html 요소 내의 두 번째 요소

As the second element in an html element.

이 요소가 포함할 수 있는 것Content model:
플로우 컨텐츠Flow content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
onafterprint
onbeforeprint
onbeforeunload
onblur
onerror
onfocus
onhashchange
onload
onmessage
onoffline
ononline
onpagehide
onpageshow
onpopstate
onredo
onresize
onscroll
onstorage
onundo
onunload
DOM 인터페이스DOM interface:
interface HTMLBodyElement : HTMLElement {
           attribute Function onafterprint;
           attribute Function onbeforeprint;
           attribute Function onbeforeunload;
           attribute Function onblur;
           attribute Function onerror;
           attribute Function onfocus;
           attribute Function onhashchange;
           attribute Function onload;
           attribute Function onmessage;
           attribute Function onoffline;
           attribute Function ononline;
           attribute Function onpopstate;
           attribute Function onpagehide;
           attribute Function onpageshow;
           attribute Function onredo;
           attribute Function onresize;
           attribute Function onscroll;
           attribute Function onstorage;
           attribute Function onundo;
           attribute Function onunload;
};

body 요소는 문서의 주된 컨텐츠를 나타냅니다.

The body element represents the main content of the document.

올바른 문서는 단 하나의 body 요소만 포함할 수 있습니다. IDL 속성 document.body 를 통해 문서의 body 요소에 손쉽게 접근할 수 있습니다.

In conforming documents, there is only one body element. The document.body IDL attribute provides scripts with easy access to a document's body element.

Some DOM operations (for example, parts of the drag and drop model) are defined in terms of "the body element". This refers to a particular element in the DOM, as per the definition of the term, and not any arbitrary body element.

body 요소는 몇 가지 Window 객체의 이벤트 핸들러 내용 속성에 반응하며 해당 이벤트 핸들러의 IDL 속성을 반영합니다.

The body element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes.

Window 객체의 onblur, onerror, onfocus, onload, onscroll 이벤트 핸들러body 요소에 사용되었을 때 HTML 요소에서 일반적으로 지원하는 범용 이벤트 핸들러를 반영합니다.

The onblur, onerror, onfocus, onload, and onscroll event handlers of the Window object, exposed on the body element, shadow the generic event handlers with the same names normally supported by HTML elements.

예를 들어 버블링 이벤트인 error 이벤트가 Documentbody의 자식 요소에서 발생했다면 그 이벤트는 1) 해당 요소 2) html 요소에서 onerror 이벤트 핸들러를 작동시키며, 그 이후에만 body 요소의 이벤트 핸들러를 작동시킵니다. 이벤트는 요소 → bodyhtmlDocumentWindow로 버블링되어 올라가며, body 요소의 이벤트 핸들러는 Window의 이벤트를 기다리는 것이지 body의 이벤트를 기다리는 것은 아니기 때문입니다.
그러나 addEventListener() 메서드를 사용해서 body 요소에 할당된 이벤트 리스너는 이벤트가 Window로 올라갈 때까지 대기하지 않고 body 단계에서 작동됩니다.

Thus, for example, a bubbling error event fired on a child of the body element of a Document would first trigger the onerror event handler content attributes of that element, then that of the root html element, and only then would it trigger the onerror event handler content attribute on the body element. This is because the event would bubble from the target, to the body, to the html, to the Document, to the Window, and the event handler on the body is watching the Window not the body. A regular event listener attached to the body using addEventListener(), however, would fire when the event bubbled through the body and not when it reaches the Window object.

이 페이지는 사용자의 온라인 여부 표시기를 갱신합니다.

This page updates an indicator to show whether or not the user is online:

<!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.4.2 section 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
섹션 컨텐츠Sectioning content.
formatBlock이 될 수 있는 요소.formatBlock candidate.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:
플로우 컨텐츠Flow content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

section 요소는 일반적인 문서 또는 프로그램의 섹션을 나타냅니다. 이 문맥에서 섹션이란 보통 제목으로 시작하는 컨텐츠의 의미적 그룹입니다.

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

챕터, 탭으로 구분된 대화상자에서의 탭 된 페이지, 논문에서 번호를 매긴 섹션 등이 섹션 사례입니다. 홈 페이지를 소개, 뉴스, 연락처 등의 섹션으로 나눌 수 있습니다.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

요소의 내용을 배포syndicate해도 이치에 맞다면 section 요소 대신 article 요소를 사용하기를 권합니다.

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

section 요소는 범용 컨테이너 요소가 아닙니다. 요소에 스타일을 부여하거나 스크립트의 편의성을 위한 목적으로만 래퍼를 만든다면 그러한 용도로는 div 요소를 권장합니다. 일반적으로 section 요소는 그 내용이 문서의 개요에 명시적으로 드러날 때만 적합합니다. 역주

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

다음 예제는 사과에 대한 기사를 섹션 두 개로 나눴습니다.

In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.

<article>
 <hgroup>
  <h1>사과</h1>
  <h2>맛있고 달콤한 과일!</h2>
 </hgroup>
 <p>사과는 사과 나무에 열리는 사과류의 과일입니다.</p>
 <section>
  <h1>빨갛고 달콤한</h1>
  <p>밝은 빨간색의 사과는 보통 슈퍼마켓에서 살 수 있습니다.</p>
 </section>
 <section>
  <h1>스미스 할머니</h1>
  <p>즙 많은 녹색 사과는 애플 파이에 딱이에요.</p>
 </section>
</article>

section 요소를 사용하기에 따라, 특정 섹션이 몇 번째(탑, 두 번째, 세 번째 등)레벨인지 고민하지 않고 h1 요소를 사용해도 됩니다. 이러한 방법을 눈여겨보십시오.

Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.

졸업식순을 두 개의 섹션으로 나눴습니다. 하나는 졸업생 목록이고 하나는 식순 설명입니다.

Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony.

<!DOCTYPE Html>
<Html>
 <Head>
   <Title>2022년 여름 졸업식순</Title>
 </Head>
 <Body>
   <H1>졸업</H1>
   <Section>
     <H1>예식</H1>
     <P>시작 행렬</P>
     <P>졸업생 대표 연설</P>
     <P>학과장 연설</P>
     <P>학위 수여</P>
     <P>교장 폐회사</P>
   </Section>
   <Section>
     <H1>졸업생</H1>
     <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>

4.4.3 nav 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
섹션 컨텐츠Sectioning content.
formatBlock이 될 수 있는 요소.formatBlock candidate.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:
플로우 컨텐츠Flow content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

nav 요소는 다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 내비게이션 링크로 구성된 섹션을 나타냅니다.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

페이지의 모든 링크 그룹이 nav 요소 내에 있을 필요는 없습니다 - 주된 내비게이션 블럭을 형성하는 섹션이 nav 요소에 적합합니다. 예를 들어 푸터에 사이트의 중요한 곳을 링크하는 것이 일반적인데, 이러한 마크업은 footer 요소로 충분합니다. nav 요소를 써도 되지만 보통 불필요합니다.역주

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

처음 렌더링할 때는 내비게이션 정보들을 생략하는 편이 사용자에게 편리한 때(스크린 리더)도 있고, 내비게이션 정보가 즉시 나타나는 것이 더 편리한 때도 있습니다. 사용자 에이전트는 전자는 이 요소를 생략하고, 후자는 렌더링할 수 있을 것입니다.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.

다음의 예제에는 링크들이 몇 군데 있지만 그중 하나만 내비게이션 섹션으로 간주합니다.

In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.

<body>
  <header>
    <h1>일어나세요 지지자 여러분!</h1>
    <p><a href="news.html">뉴스</a> -
       <a href="blog.html">블로그</a> -
       <a href="forums.html">포럼</a></p>
    <p>최종 수정일: <time>2009-04-01</time></p>
    <nav>
      <h1>내비게이션</h1>
      <ul>
        <li><a href="articles.html">모든 글 목록</a></li>
        <li><a href="today.html">지지자 여러분이 오늘 하실 일입니다</a></li>
        <li><a href="successes.html">지지자 여러분이 해 오신 일입니다</a></li>
      </ul>
    </nav>
  </header>
  <div>
    <article>
      <header>
        <h1>해변에서의 하루</h1>
      </header>
      <div>
        <p>오늘 해변으로 가서 정말 신나게 놀았어요.</p>
        ...더 많은 내용...
      </div>
      <footer>
        <p>작성일 <time pubdate="" datetime="2009-10-10T14:36-08:00">목요일</time>.</p>
      </footer>
    </article>
    ...블로그 글...
  </div>
  <footer>
    <p>Copyright © 2006 The Example Company</p>
    <p><a href="about.html">회사 소개</a> -
       <a href="policy.html">개인정보 보호 정책</a> -
       <a href="contact.html">연락처</a></p>
  </footer>
</body>

div 요소를 사용해서 헤더와 푸터를 제외한 모든 컨텐츠를 그룹화했습니다. 또한 헤더와 푸터를 제외한 모든 블로그 항목들을 그룹화했습니다.

Notice the div elements being used to wrap all the contents of the page other than the header and footer, and all the contents of the blog entry other than its header and footer.

다음 예제에는 nav 요소가 두 개 있습니다. 하나는 사이트의 주된 내비게이션을, 다른 하나는 해당 페이지 내의 내비게이션을 나타냅니다.

In the following example, there are two nav elements, one for primary navigation around the site, and one for secondary navigation around the page itself.

<body>
  <h1>Exampland 위키 센터</h1>
  <nav>
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/events">진행중인 이벤트</a></li>
      ...더 많은 링크...
    </ul>
  </nav>                                  <!-- /사이트 내비게이션 -->
  <article>
    <header>
      <h1>Exampland에 소장된 데모들</h1>
      <p>저자: A. N. Other.</p>
    </header>
    <nav>
      <ul>
        <li><a href="#public">공개된 데모들</a></li>
        <li><a href="#destroy">날려버립니다</a></li>
        ...더 많은 링크...
      </ul>
    </nav>                                <!-- /페이지 내비게이션 -->
    <div>
      <section id="public">
        <h1>공개된 데모들</h1>
        <p>...더 많은 내용...</p>
      </section>
      <section id="destroy">
        <h1>날려버립니다</h1>
        <p>...더 많은 내용...</p>
      </section>
      ...more...
    </div>
    <footer>
      <p><a href="?edit">수정</a> | <a href="?delete">삭제</a> | <a href="?Rename">이름 바꾸기</a></p>
    </footer>
  </article>
  <footer>
    <p><small>© copyright 1998 Exampland Emperor</small></p>
  </footer>
</body>

nav 요소 안에 꼭 목록을 써야 하는 건 아닙니다. nav 요소 안에는 다른 내용도 쓸 수 있습니다. 다음 예제는 링크를 산문 안에 넣었습니다.

A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

<nav>
  <h1>내비게이션</h1>
  <p>당신은 지금 홈 페이지에 있습니다. 북쪽으로 가면 <a href="/blog">내
  블로그</a>가 있는데, 거기에서 전투 소리를 들을 수 있습니다. 동쪽으로 가면
  거대한 산을 볼 수 있습니다. 그 산은 <a href="/school">학교 신문</a>으로
  난장판이 되어 있습니다. 산꼭대기에서 나와 비슷하게 생긴 작은 그림이 절망적으로
  a <a href="/school/thesis">논문</a>을 휘갈겨 쓰는 걸 엿볼 수 있습니다.</p>
  <p>서쪽에는 출구가 몇 개 있습니다. 그 중 우습게 생긴 출구 한 개에는
  <a href="http://games.example.com/">"게임"</a>이란 레이블이 붙어 있습니다.
  따분하게 생긴 다른 출구는 <a href="http://isp.example.net/">ISP™</a>이란
  레이블이 붙어 있습니다.</p>
  <p>남쪽에는 어둡고 어두운 <a href="/about">연락처 페이지</a>가 있습니다.
  좀처럼 사용되지 않는 이 입구에는 거미줄이 쳐져 있습니다. 쥐 한마리가
  잽싸게 도망가는 모습이 보이는 듯 합니다.</p>
</nav>

4.4.4 article 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
섹션 컨텐츠Sectioning content.
formatBlock이 될 수 있는 요소.formatBlock candidate.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:
플로우 컨텐츠Flow content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

article 요소는 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션을 나타냅니다. 이것은 포럼에 올라온 글일 수도 있고, 잡지나 신문의 기사일 수도 있고, 블로그 항목, 사용자가 제시한 의견, 상호작용적인 위젯이나 가젯, 기타 모든 독립적인 아이템일 수 있습니다.

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

article 요소가 중첩되었다면, 내부의 article 요소는 원칙적으로 외부 article 요소의 내용과 관련이 있어야 합니다. 예를 들어 블로그를 나타내는 article 요소 내부에 해당 블로그에 방문자가 기고한 의견을 나타내는 article 요소가 있을 수 있습니다.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

저자의 정보를 article 요소에 연관시킨다면 이것은 article 요소의 중첩과는 관련이 없습니다.

Author information associated with an article element (q.v. the address element) does not apply to nested article elements.

재배포될 컨텐츠에서 명시적으로 사용된다면 article 요소는 Atom의 entry 요소와 흡사합니다. [ATOM]

When used specifically with content to be redistributed in syndication, the article element is similar in purpose to the entry element in Atom. [ATOM]

time 요소의 pubdate 속성을 사용해서 article 요소가 출판된 시간을 나타낼 수 있습니다.

The time element's pubdate attribute can be used to provide the publication date for an article element.

article 요소를 사용한 블로그 포스트입니다.

This example shows a blog post using the article element:

<article>
  <header>
    <h1>삶에서 가장 중요한 원칙</h1>
    <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
  </header>
  <p>당신 주변 어디에라도 마이크가 있다면 그 마이크는 열띤 토론을
  이끌어내는 것이고 당신이 하는 말을 전부 전세계로 퍼뜨리고 있다 생각해야
  합니다. 농담이 아니에요.</p>
  <p>...</p>
  <footer>
    <a href="?comments=1">Show comments...</a>
  </footer>
</article>

같은 블로그 포스트입니다만 몇 가지 댓글을 보여줍니다.

Here is that same blog post, but showing some of the comments:

<article>
  <header>
    <h1>삶에서 가장 중요한 원칙</h1>
    <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
  </header>
  <p>당신 주변 어디에라도 마이크가 있다면 그 마이크는 열띤 토론을
  이끌어내는 것이고 당신이 하는 말을 전부 전세계로 퍼뜨리고 있다 생각해야
  합니다. 농담이 아니에요.</p>
  <p>...</p>
  <section>
    <h1>Comments</h1>
    <article>
      <footer>
        <p>Posted by: George Washington</p>
        <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
      </footer>
      <p>그렇죠! 특히 당신 주변의 로비스트들에 대해 얘기할 때 말입니다!</p>
    </article>
    <article>
      <footer>
        <p>Posted by: George Hammond</p>
        <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
      </footer>
      <p>헐, 당신은 나랑 이름이 똑같군요.</p>
    </article>
  </section>
</article>

footer 요소를 사용하여 각 주석(누가, 언제 적었는지)에 대한 정보를 제공했습니다. footer 요소를 섹션의 첫머리에 쓰는게 적합하다면 그렇게 할 수도 있습니다. (이 예제라면 header 요소를 사용했어도 잘못된 것은 아닙니다. 말하자면 취향 문제입니다)

Notice the use of footer to give the information for each comment (such as who wrote it and when): the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn't be wrong either; it's mostly a matter of authoring preference.)

4.4.5 aside 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
섹션 컨텐츠Sectioning content.
formatBlock이 될 수 있는 요소.formatBlock candidate.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:
플로우 컨텐츠Flow content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

aside 요소는 주위 내용과 접점을 이루는 섹션을 나타내며 주위 내용과는 분리된 것으로 간주할 수 있습니다. aside 요소가 나타내는 섹션은 출력하였을 때 사이드바 형태로 표현되는 것이 일반적입니다.

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

이 요소는 인용구pull quotes나 사이드바 같은 인쇄 효과, 광고, nav 요소의 그룹, 기타 페이지의 메인 컨텐츠와는 분리된 것으로 간주하는 컨텐츠에 사용할 수도 있습니다.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

aside 요소는 문서 흐름의 일부분이므로 단순히 삽입구 목적으로 사용하는건 적합하지 않습니다.

It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

다음 예제는 유럽에 관한 장문의 뉴스에서 스위스에 관한 배경 기사를 어떻게 사용하는지 보여줍니다.

The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.

<aside>
  <h1>스위스<h1>
  <p>스위스, 지질학적으로 유럽의 중심에 있으며 육지로 둘러싸인 이 나라는
  유럽 여러 조약의 승인국이지만 지정학적 단체인 EU에 가입하였습니다.</p>
</aside>

다음 예제는 긴 글 안에서 인용구pull quote를 어떻게 마크업하는지 보여줍니다.

The following example shows how an aside is used to mark up a pull quote in a longer article.

...
<p>그는 이후 큰 기업에 입사하였고, 같은 일을 계속하고 있습니다.
<q>나는 내 일을 사랑합니다. 사람들은 내가 일을 하고 있지 않을 때 취미로 뭘
하는지 묻습니다. 하지만 난 내 취미에 대해 보수를 받고 있으며, 따라서 어떤 답을
해야할 지 모르겠습니다. 어떤 사람들은 자신들이 일하지 않았다면 무엇을 했을지
궁금해 합니다만... 나는 내가 무엇을 했을지 알고 있습니다. 왜냐하면 내가 실업
상태였던 지난 1년의 세월을, 지금 내가 하고 있는 것과 정확히 같은 일을 하면서
보냈기 때문입니다.</q></p>

<aside>
    <q>사람들은 내가 일을 하고 있지 않을 때 취미로 뭘 하는지 묻습니다.
	하지만 난 내 취미에 대해 보수를 받고 있으며, 따라서 어떤 답을
	해야 할 지 모르겠습니다.</q>
</aside>

<p>물론 그의 일 - 취미라고 해야 할까요? - 이 그의 유일한 즐거움인 것은 아닙니다.
그는 그밖에 다른 것들도 즐겨 합니다.</p>

...

다음 예제는 aside 요소를 사용해서 블로그롤과 기타 사이트 컨텐츠를 나타내는 방법을 보여줍니다.

The following extract shows how aside can be used for blogrolls and other side content on a blog:

<body>
  <header>
    <h1>끝내주는 블로그</h1>
    <p>블로그 태그</p>
  </header>
  <aside>
    <!-- 이 aside 요소에는 섹션이 두 개 들어있는데 각 섹션과 페이지와의 관련성은 미미합니다.
         말하자면 다른 블로그를 가리키는 링크, 그리고 블로그 글에 대한 링크니까요. -->
    <nav>
      <h1>블로그롤</h1>
      <ul>
        <li><a href="http://blog.example.com/">다른 블로그</a>
      </ul>
    </nav>
    <nav>
      <h1>이전 글</h1>
      <ol reversed>
        <li><a href="/last-post">마지막 글</a>
        <li><a href="/first-post">첫 글</a>
      </ol>
    </nav>
  </aside>
  <aside>
    <!-- 이 aside 역시 페이지와의 관련성은 미미합니다.
         블로그 운영자의 트위터 메시지가 들어 있습니다 -->
    <h1>트위터 피드</h1>
    <blockquote cite="http://twitter.example.net/t31351234">
      휴가중이니 블로그에 글을 많이 쓸께요.
    </blockquote>
    <blockquote cite="http://twitter.example.net/t31219752">
      곧 휴가에요!
    </blockquote>
  </aside>
  <article>
    <!-- 블로그 글입니다. -->
    <h1>마지막 글</h1>
    <p>이건 내 마지막 글입니다.</p>
    <footer>
      <p><a href="/last-post" rel=bookmark>Permalink</a>
    </footer>
    </article>
  <article>
    <!-- 이것도 블로그 글입니다. -->
    <h1>첫 글</h1>
    <p>이건 내 첫 글입니다.</p>
    <aside>
      <!-- 이 aside는 <article> 요소 안에 들어 있으므로 블로그 글에 관한 겁니다.
           블로그롤은 페이지 전체와 연관이 있는 것이지 이 글과는 전혀 관계가 없으므로
           이 위치에 블로그롤을 놓았다면 그건 잘못 쓴 거라 할 수 있습니다. -->
      <h1>글 올리기</h1>
      <p>뭔가 생각할 때면 글을 올리고 싶어집니다. 글 올리기는 재미있어요!</p>
    </aside>
    <footer>
      <p><a href="/first-post" rel=bookmark>Permalink</a>
    </footer>
  </article>
  <footer>
    <nav>
      <a href="/archives">이전 글</a> —
      <a href="/about">나는</a> —
      <a href="/copyright">저작권</a>
    </nav>
  </footer>
</body>

4.4.6 The h1, h2, h3, h4, h5, and h6 elements

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
제목 컨텐츠.Heading content.
formatBlock이 될 수 있는 요소.formatBlock candidate.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

hgroup 요소 내부

As a child of an hgroup element.

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
interface HTMLHeadingElement : HTMLElement {};

이 요소들은 섹션의 제목을 나타냅니다.

These elements represent headings for their sections.

이 요소들의 의미는 제목과 섹션 절에서 정의합니다.

The semantics and meaning of these elements are defined in the section on headings and sections.

이 요소들의 이름에 있는 숫자가 제목의 등급을 나타냅니다. h1 요소가 가장 높은 등급이고, h6 요소는 가장 낮은 등급입니다. 이름이 같으면 등급도 같습니다.

These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.

다음 두 가지는 똑같습니다.

These two snippets are equivalent:

<body>
  <h1>이걸 그림(그리는 표면)이라 부릅시다.</h1>
  <h2>시작하기</h2>
  <h2>간단한 도형</h2>
  <h2>캔버스 좌표</h2>
  <h3>캔버스 좌표 다이어그램</h3>
  <h2>경로</h2>
</body>
<body>
  <h1>이걸 그림(그리는 표면)이라 부릅시다.</h1>
  <section>
    <h1>시작하기</h1>
  </section>
  <section>
    <h1>간단한 도형</h1>
  </section>
  <section>
    <h1>캔버스 좌표</h1>
    <section>
      <h1>캔버스 좌표 다이어그램</h1>
    </section>
  </section>
  <section>
    <h1>경로</h1>
  </section>
</body>

4.4.7 hgroup 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
제목 컨텐츠.Heading content.
formatBlock이 될 수 있는 요소.formatBlock candidate.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:

하나 이상의 h1 ~ h6 요소

One or more h1, h2, h3, h4, h5, and/or h6 elements.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

hgroup 요소는 섹션의 제목을 나타냅니다. 이 요소는 섹션의 제목이 몇 개의 레벨을 가질 때 - 예를 들어 부제목이나 tagline 등 - h1~h6 요소들을 그룹 짓기 위해 사용됩니다.

The hgroup element represents the heading of a section. The element is used to group a set of h1h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

문서의 요약이나 개요, 기타 흡사한 것에 대해 hgroup 요소의 텍스트는 자신이 포함하는 h1h6 자식 요소 중 가장 높은 등급의 텍스트를 사용합니다. 같은 등급이 여러 개 있다면 그중 가장 먼저 등장하는 제목 요소의 텍스트를 사용합니다. 자식 요소에 제목 요소가 없다면 hgroup 요소의 텍스트는 빈 문자열이 됩니다.

For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string.

hgroup 요소 내부에 있는 제목 컨텐츠의 다른 요소들은 부제목이나 서브타이틀을 나타냅니다.

Other elements of heading content in the hgroup element indicate subheadings or subtitles.

hgroup 요소의 등급은 포함된 h1h6 요소 중 가장 높은 등급의 것을 사용합니다. 자식 요소에 제목 요소가 없다면 h1 등급이 됩니다.

The rank of an hgroup element is the rank of the highest-ranked h1h6 element descendant of the hgroup element, if there are any such elements, or otherwise the same as for an h1 element (the highest rank).

제목과 섹션 절에서 hgroup 요소가 개별적인 섹션들에 어떻게 할당되는지 정의할 것입니다.

The section on headings and sections defines how hgroup elements are assigned to individual sections.

올바르게 사용된 제목의 몇 가지 예제입니다. 제목 데이터를 추출하는 프로그램은 강조된 텍스트를 추출할 것이며 부제목은 무시할 것입니다.

Here are some examples of valid headings. In each case, the emphasized text represents the text that would be used as the heading in an application extracting heading data and ignoring subheadings.

<hgroup>
 <h1>The reality dysfunction</h1>
 <h2>Space is not the only void</h2>
</hgroup>
<hgroup>
 <h1>Dr. Strangelove</h1>
 <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

이 예제에서 hgroup 을 사용한 요점은 h2 요소(두 번째 타이틀처럼 동작하는)를 개요 알고리즘으로부터 감추려는 것입니다.

The point of using hgroup in these examples is to mask the h2 element (which acts as a secondary title) from the outline algorithm.

4.4.8 header 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
formatBlock이 될 수 있는 요소.formatBlock candidate.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:

플로우 컨텐츠. 하지만 자손 요소로 header 요소나 footer 요소를 포함할 수 없습니다.

Flow content, but with no header or footer element descendants.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

header 요소는 소개 또는 내비게이션 목적의 도우미 그룹을 나타냅니다.

The header element represents a group of introductory or navigational aids.

header 요소는 보통 섹션의 제목(h1h6 또는 hgroup 요소)을 포함하지만 꼭 그래야 되는건 아닙니다. header 요소는 섹션의 차례나 검색 폼, 관련 로고 등을 감싸는 용도로 사용할 수도 있습니다.

A header element is intended to usually contain the section's heading (an h1h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

예제가 몇 개 있습니다. 첫 번째는 게임에 관한 예제입니다.

Here are some sample headers. This first one is for a game:

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

다음 예제는 header 요소를 써서 명세의 헤더를 마크업한겁니다.

The following snippet shows how the element can be used to mark up a specification's header:

<header>
  <hgroup>
    <h1>크기를 조절할 수 있는 벡터 그래픽 (SVG) 1.2</h1>
    <h2>W3C Working Draft 2004. 10. 12</h2>
  </hgroup>
  <dl>
    <dt>이 버전:</dt>
    <dd>
	  <a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">
	    http://www.w3.org/TR/2004/WD-SVG12-20041027/
	  </a>
	</dd>
    <dt>이전 버전:</dt>
    <dd>
	  <a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">
	    http://www.w3.org/TR/2004/WD-SVG12-20040510/
      </a>
	</dd>
    <dt>SVG 1.2의 최신 버전:</dt>
    <dd>
      <a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a>
    </dd>
    <dt>SVG 최신 권고안:</dt>
    <dd>
      <a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a>
    </dd>
    <dt>편집자:</dt>
    <dd>
      Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a>
    </dd>
    <dt>저자:</dt>
    <dd>
      <a href="#authors">저자 목록</a>을 보십시오
    </dd>
  </dl>
  <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
  </header>

header 요소는 섹션 컨텐츠가 아니므로 새로운 섹션을 암시하지는 않습니다.

The header element is not sectioning content; it doesn't introduce a new section.

h1 요소로 페이지 제목을 나타냈고 h2 요소로 부제목을 두 개 나타냈습니다. header 요소는 개요 알고리즘에 관여하지 않으므로 header 요소 뒤의 내용은 여전히 header 요소에서 시작한 마지막 서브섹션의 일부분입니다.

In this example, the page has a page heading given by the h1 element, and two subsections whose headings are given by h2 elements. The content after the header element is still part of the last subsection started in the header element, because the header element doesn't take part in the outline algorithm.

<body>
  <header>
    <h1>총 든 녹색 난장이들</h1>
      <nav>
      <ul>
        <li><a href="/games">게임</a>
        <li><a href="/forum">포럼</a>
        <li><a href="/download">내려받기</a>
      </ul>
    </nav>
    <h2>중요 뉴스</h2> <!-- 여기서 두 번째 서브섹션이 시작됩니다. -->
    <!-- 이 내용은 제목이 "중요 뉴스"인 서브섹션의 일부분입니다. -->
    <p>오늘자 버전을 실행하려면 클라이언트 프로그램을 업데이트해야 합니다..</p>
    <h2>게임</h2> <!-- 여기서 세 번째 서브섹션이 시작됩니다. -->
  </header>
  <p>게임을 세 개 설치하셨습니다.</p>
  <!-- 이 내용은 제목이 "게임"인 서브섹션의 일부분입니다. -->
   ...
요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
formatBlock이 될 수 있는 요소.formatBlock candidate.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:

플로우 컨텐츠. 하지만 자손 요소로 header 요소나 footer 요소를 포함할 수 없습니다.

Flow content, but with no header or footer element descendants.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

footer 요소는 가장 가까운 조상 요소인 섹션 컨텐츠 또는 섹션 루트의 푸터를 나타냅니다. 푸터는 일반적으로 작성자가 누구인지, 연관된 문서에 대한 링크, 저작권 정보, 기타 흡사한 정보들을 담습니다.

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

footer 요소가 전체 섹션을 포함한다면 그러한 섹션은 부록, 색인, 긴 길이의 판권 정보, 장황한 라이센스 협약, 기타 흡사한 내용을 나타냅니다.

When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

연락 정보는 address 요소에 담는 것이 적합하며, address 요소는 footer 요소 내에 나타날 수 있습니다.

Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.

푸터는 일반적으로 섹션의 마지막에 나타나지만, 꼭 그래야 하는 것은 아닙니다.

Footers don't necessarily have to appear at the end of a section, though they usually do.

가장 가까운 섹션 컨텐츠, 혹은 섹션 루트body 요소라면, footer 요소는 페이지 전체에 적용됩니다.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

footer 요소는 섹션 컨텐츠가 아닙니다. 새로운 섹션을 암시하지도 않습니다.

The footer element is not sectioning content; it doesn't introduce a new section.

푸터를 두 개 포함한 페이지가 있습니다. 하나는 상단에 있고 다른 하나는 하단에 있으며, 같은 내용을 담고 있습니다.

Here is a page with two footers, one at the top and one at the bottom, with the same content:

<body>
  <footer>
    <a href="../">차례로 돌아가기...</a>
  </footer>
  <hgroup>
    <h1>훈민정음</h1>
    <h2>훈민정음 언해본 서문</h2>
  </hgroup>
  <p>나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쌔 이런 젼차로
  어린 백셩이 니르고져 홇배이셔도 마참내 제 뜨들 시러펴디 못핧노미 하니라
  내 이랄 위하야 어엿비 너겨 새로 스믈여듧자랄 맹가노니 사람마다 해여 수비니겨
  날로 쑤메 뼌한킈 하고져 핧 따라미니라</p>
  <footer>
    <a href="../">차례로 돌아가기...</a>
  </footer>
</body>

이 예제는 사이트 전체 푸터와 섹션 푸터를 보여줍니다.

Here is an example which shows the footer element being used both for a site-wide footer and for a section footer.

<!DOCTYPE HTML>
<HTML>
<HEAD>
  <TITLE>과학자의 횡설수설</TITLE>
<BODY>
  <H1>과학자의 횡설수설</H1>
  <ARTICLE>
    <H1>에피소드 15</H1>
    <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
      <P><A HREF="/fm/015.ogv">동영상 내려받기</A>.</P>
    </VIDEO>
    <FOOTER> <!-- article의 푸터입니다 -->
      <P>발행일 <TIME PUBDATE DATETIME="2009-10-21T18:26-07:00"></TIME></P>
    </FOOTER>
  </ARTICLE>
  <ARTICLE>
    <H1>내가 좋아하는 기차들</H1>
    <P>나는 기차를 정말 좋아합니다. 그중에서도 최고는 Köf죠.</P>
    <P>Köf는 석탄이 실린 차량에 비해 땅딸막해 보이는데도
    석탄이 실린 차량을 끌고 가는 걸 보면 아주 재미있습니다.</P>
    <FOOTER> <!-- article의 푸터입니다 -->
      <P>발행일 <TIME PUBDATE DATETIME="2009-09-15T14:54-07:00"></TIME></P>
    </FOOTER>
  </ARTICLE>
  <FOOTER> <!-- article의 푸터입니다 -->
    <NAV>
      <P><A HREF="/credits.html">도와준 분</A> —
      <A HREF="/tos.html">서비스 항목</A> —
      <A HREF="/index.html">블로그 차례</A></P>
    </NAV>
    <P>Copyright © 2009 Gordon Freeman</P>
  </FOOTER>
</BODY>
</HTML>

일부 사이트는 푸터에 매우 많은 내용이 들어가게끔 디자인되었습니다. 이런 푸터를 간혹 "뚱뚱한 푸터" 라고 부릅니다. 이미지나 다른 글을 기리키는 링크, 피드백을 보낼 페이지 링크, 특별 이벤트 등이 모두 푸터에 들어가므로 "첫 페이지"가 푸터에 전부 들어갔다고 해도 과언이 아닙니다.

Some site designs have what is sometimes referred to as "fat footers" — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers... in some ways, a whole "front page" in the footer.

아래 마크업은 "뚱뚱한 푸터"로 디자인된 사이트의 아래 부분입니다.

This fragment shows the bottom of a page on a site with a "fat footer":

...
  <footer>
    <nav>
      <section>
        <h1>Articles</h1>
        <p><img src="somersaults.jpeg" alt=""> 체육관에 나와서
        공중제비 수업을 들어 보세요! Jim 선생님이 전체 과정을 두 단계로 나눠서
        가르쳐 드립니다. <a href="articles/somersaults/1">Part
        1</a>· <a href="articles/somersaults/1">Part 2</a></p>
        <p><img src="kindplus.jpeg"> 절벽 끝에서 일하는 것 같은 위태위태한
        상황에 지치셨죠<!-- sic -->? 객원 작가 Lara가 막대기 사이를 헤쳐 나가는
        법을 알려 드립니다. <a href="articles/kindplus/1">더 읽어보세요...</a></p>
        <p><img src="crisps.jpeg"> 감자칩은 다 떨어지고 감자만 남았습니다.
        감자로 뭘 할 수 있을까요? <a href="articles/crisps/1">
        더 읽어보세요...</a></p>
      </section>
      <ul>
        <li> <a href="/about">소개</a>
        <li> <a href="/feedback">피드백을 보내주세요!</a>
        <li> <a href="/sitemap">사이트맵</a>
      </ul>
    </nav>
    <p><small>Copyright © 2015 The Snacker —
    <a href="/tos">서비스 항목</a></small></p>
  </footer>
</body>
역주: 중간의 sic은 "원문 그대로임" 이란 뜻입니다. 다른 곳에서 따와 인용하는 단어에 철자나 다른 오류가 있을 때 "틀린걸 알지만 원문 그대로 쓰겠다"는 의미로 틀린 부분 뒤에 쓰는 표현입니다.

4.4.10 address 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
formatBlock이 될 수 있는 요소.formatBlock candidate.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:

플로우 컨텐츠. 하지만 자손 요소로 제목 컨텐츠섹션 컨텐츠, header, footer, address 요소는 가질 수 없습니다.

Flow content, but with no heading content descendants, no sectioning content descendants, and no header, footer, or address element descendants.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

address 요소는 가장 가까운 조상 요소인 article 또는 body 요소의 연락처 정보를 나타냅니다. 연락처 정보가 body 요소의 연락처 정보를 나타낸다면 그 정보는 문서 전체에 적용됩니다.

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

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

For example, a page at the W3C Web site related to HTML might include the following contact information:

<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 요소에 임의의 주소(예를 들어, 우편 주소)를 쓰면 안되지만 그 주소가 실제 연락처라면 예외로 합니다(우편 주소를 마크업 하기에 적합한 요소는 p 요소입니다).

The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)

address 요소에 연락정보 이외의 것을 담아서는 안됩니다.

The address element must not contain information other than contact information.

다음 예제는 잘못된 예제입니다.

For example, the following is non-conforming use of the address element:

<ADDRESS>최종 수정일: 1999/12/24 23:37:50</ADDRESS>

address 요소는 보통 다른 정보와 함께 footer 요소 안에 넣습니다.

Typically, the address element would be included along with other information in a footer element.

The contact information for a node node is a collection of address elements defined by the first applicable entry from the following list:

If node is an article element
If node is a body element

The contact information consists of all the address elements that have node as an ancestor and do not have another body or article element ancestor that is a descendant of node.

If node has an ancestor element that is an article element
If node has an ancestor element that is a body element

The contact information of node is the same as the contact information of the nearest article or body element ancestor, whichever is nearest.

If node's Document has a body element

The contact information of node is the same as the contact information of the body element of the Document.

Otherwise

There is no contact information for node.

User agents may expose the contact information of a node to the user, or use it for other purposes, such as indexing sections based on the sections' contact information.

이 예제의 푸터에는 연락 정보와 함께 저작권 정보를 넣었습니다.

In this example the footer contains contact information and a copyright notice.

<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.4.11 제목과 섹션

h1h6 요소들과 hgroup 요소는 제목heading입니다.

The h1h6 elements and the hgroup element are headings.

섹션 컨텐츠 요소의 첫 번째 제목 컨텐츠가 해당 섹션의 제목을 나타냅니다. 그 후에 나타나는 같거나 높은 등급의 제목은 새로운 섹션이 시작됨을 암시하며, 더 낮은 등급의 제목은 이전 섹션의 서브섹션이 시작됨을 암시합니다. 어느 쪽이든 해당 요소는 자신이 암시하고 있는 섹션의 제목을 나타냅니다.

The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.

blockquote 요소와 td 요소를 포함한 몇몇 요소를 섹션 루트라고 부릅니다. 이러한 요소는 독립된 개요를 가지므로 섹션 루트 내의 섹션과 헤딩은 섹션 루트의 조상 요소들의 개요에는 관여하지 않습니다. 역주

Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

섹션 컨텐츠 요소는 다른 제목 요소가 암시적으로 나타내는 섹션과 관계 없이 항상 가장 가까운 조상인 섹션 루트 또는 섹션 컨텐츠 요소의 서브섹션인 것으로 간주합니다.

Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.

다음 마크업을 보십시오.

For the following fragment:

<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>

구조는 이렇게 될 수 있습니다.역주

...the structure would be:

  1. Foo ("Grunt" 문단을 포함하는 명시적인 body 섹션의 제목입니다)

    Foo (heading of explicit body section, containing the "Grunt" paragraph)

    1. Bar (제목이 암시적 섹션을 시작합니다. 암시적 섹션은 인용구 블럭과 "Baz" 문단을 포함합니다)

      Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)

    2. Quux (제목이 암시적 섹션을 시작하는데 이 섹션에는 제목 말고는 아무것도 없습니다.)

      Quux (heading starting implied section with no content other than the heading itself)

    3. Thud (명시적인 section의 제목입니다)

      Thud (heading of explicit section section)

section이 앞서 있는 암시적 섹션들을 종료해서 "Grunt" 문단을 최상위 레벨에 위치하게끔 하는 것을 눈여겨보십시오.

Notice how the section ends the earlier implicit section so that a later paragraph ("Grunt") is back at the top level.

섹션은 어떠한 등급의 제목이라도 가질 수 있지만, h1 요소만 쓰거나 섹션의 중첩 레벨에 걸맞는 등급의 제목 요소를 쓸 것을 강력히 권장합니다.

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

또한, 섹션 컨텐츠 요소 내에 암시적인 섹션을 여럿 만들지 말고 섹션 컨텐츠 요소를 써서 명시적으로 만들기를 권합니다.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

예를 들어 다음은 문법적으로 올바릅니다만,

For example, the following is correct:

<body>
 <h4>사과</h4>
 <p>사과는 과일입니다.</p>
 <section>
  <h2>맛</h2>
  <p>사과는 사랑스런 맛이 납니다.</p>
  <h6>달콤함</h6>
  <p>빨간 사과는 녹색 사과보다 달콤합니다.</p>
  <h1>색깔</h1>
  <p>사과 색깔은 다양합니다.</p>
 </section>
</body>

이렇게 쓰면 더 명확합니다.

However, the same document would be more clearly expressed as:

<body>
 <h1>사과</h1>
 <p>사과는 과일입니다.</p>
 <section>
  <h2>맛</h2>
  <p>사과는 사랑스런 맛이 납니다.</p>
  <section>
   <h3>달콤함</h3>
   <p>빨간 사과는 녹색 사과보다 달콤합니다.</p>
  </section>
 </section>
 <section>
  <h2>색깔</h2>
  <p>사과 색깔은 다양합니다.</p>
 </section>
</body>

두 문서는 의미상 완전히 동일하며, 올바른 사용자 에이전트에서는 같은 개요를 생성할 것입니다.

Both of the documents above are semantically identical and would produce the same outline in compliant user agents.

이 예제 역시 같은 의미인데 관리하기에는 이쪽이 더 편리할 수 있습니다. (예를 들어, 편집 과정에서 섹션이 자주 이동한다면)

This third example is also semantically identical, and might be easier to maintain (e.g. if sections are often moved around in editing):

<body>
 <h1>사과</h1>
 <p>사과는 과일입니다.</p>
 <section>
  <h1>맛</h1>
  <p>사과는 사랑스런 맛이 납니다.</p>
  <section>
   <h1>달콤함</h1>
   <p>빨간 사과는 녹색 사과보다 달콤합니다.</p>
  </section>
 </section>
 <section>
  <h1>색깔</h1>
  <p>사과 색깔은 다양합니다.</p>
 </section>
</body>
4.4.11.1 개요outline 생성

This section defines an algorithm for creating an outline for a sectioning content element or a sectioning root element. It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk.

섹션 컨텐츠섹션 루트 요소의 개요outline섹션의 목록이며 이 목록은 중첩될 수 있습니다. 섹션은 DOM 트리의 노드에 대응하는 컨테이너입니다. 각각의 섹션은 자신과 연관된 제목을 가질 수 있고 포함할 수 있는 중첩된 섹션의 숫자에는 제한이 없습니다. (여기서 말하는 섹션은 section 요소가 아닙니다. 이것을 혼동하는 사람들이 있겠지만 이것은 단순히 개념적인 섹션입니다.)

The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections. The algorithm for the outline also associates each node in the DOM tree with a particular section and potentially a heading. (The sections in the outline aren't section elements, though some may correspond to such elements — they are merely conceptual sections.)

다음의 마크업은

The following markup fragment:

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

body 노드(즉, 문서 전체)에 대해 다음과 같은 개요를 만듭니다.

...results in the following outline being created for the body node (and thus the entire document):

  1. body 노드에 대응하는 섹션이 만들어집니다.

    Section created for body node.

    제목 A와 연결됩니다.

    Associated with heading "A".

    또한 문단 B와 연결됩니다.

    Also associated with paragraph "B".

    중첩된 섹션들은

    Nested sections:

    1. 최초의 h2 요소에 대해 암시적인 섹션이 만들어집니다.

      Section implied for first h2 element.

      제목 C와 연결됩니다.

      Associated with heading "C".

      문단 D와 연결됩니다.

      Also associated with paragraph "D".

      중첩된 섹션이 없습니다.

      No nested sections.

    2. 두 번째 h2 요소에 대해 암시적인 섹션이 만들어집니다.

      Section implied for second h2 element.

      제목 E와 연결됩니다.

      Associated with heading "E".

      문단 F와 연결됩니다.

      Also associated with paragraph "F".

      중첩된 섹션이 없습니다.

      No nested sections.

The algorithm that must be followed during a walk of a DOM subtree rooted at a sectioning content element or a sectioning root element to determine that element's outline is as follows:

  1. Let current outlinee be null. (It holds the element whose outline is being created.)

  2. Let current section be null. (It holds a pointer to a section, so that elements in the DOM can all be associated with a section.)

  3. Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty.

  4. As you walk over the DOM in tree order, trigger the first relevant step below for each element as you enter and exit it.

    If you are exiting an element and that element is the element at the top of the stack

    The element being exited is a heading content element.

    Pop that element from the stack.

    If the top of the stack is a heading content element

    Do nothing.

    When entering a sectioning content element or a sectioning root element

    If current outlinee is not null, and the current section has no heading, create an implied heading and let that be the heading for the current section.

    If current outlinee is not null, push current outlinee onto the stack.

    Let current outlinee be the element that is being entered.

    Let current section be a newly created section for the current outlinee element.

    Associate current outlinee with current section.

    Let there be a new outline for the new current outlinee, initialized with just the new current section as the only section in the outline.

    When exiting a sectioning content element, if the stack is not empty

    Pop the top element from the stack, and let the current outlinee be that element.

    Let current section be the last section in the outline of the current outlinee element.

    Append the outline of the sectioning content element being exited to the current section. (This does not change which section is the last section in the outline.)

    When exiting a sectioning root element, if the stack is not empty

    Run these steps:

    1. Pop the top element from the stack, and let the current outlinee be that element.

    2. Let current section be the last section in the outline of the current outlinee element.

    3. Finding the deepest child: If current section has no child sections, stop these steps.

    4. Let current section be the last child section of the current current section.

    5. Go back to the substep labeled finding the deepest child.

    When exiting a sectioning content element or a sectioning root element

    The current outlinee is the element being exited.

    Let current section be the first section in the outline of the current outlinee element.

    Skip to the next step in the overall set of steps. (The walk is over.)

    If the current outlinee is null

    Do nothing.

    When entering a heading content element

    If the current section has no heading, let the element being entered be the heading for the current section.

    Otherwise, if the element being entered has a rank equal to or greater than the heading of the last section of the outline of the current outlinee, then create a new section and append it to the outline of the current outlinee element, so that this new section is the new last section of that outline. Let current section be that new section. Let the element being entered be the new heading for the current section.

    Otherwise, run these substeps:

    1. Let candidate section be current section.

    2. If the element being entered has a rank lower than the rank of the heading of the candidate section, then create a new section, and append it to candidate section. (This does not change which section is the last section in the outline.) Let current section be this new section. Let the element being entered be the new heading for the current section. Abort these substeps.

    3. Let new candidate section be the section that contains candidate section in the outline of current outlinee.

    4. Let candidate section be new candidate section.

    5. Return to step 2.

    Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)

    Recall that h1 has the highest rank, and h6 has the lowest rank.

    Otherwise

    Do nothing.

    In addition, whenever you exit a node, after doing the steps above, if the node is not associated with a section yet and current section is not null, associate the node with the section current section.

  5. If the current outlinee is null, then there was no sectioning content element or sectioning root element in the DOM. There is no outline. Abort these steps.

  6. Associate any nodes that were not associated with a section in the steps above with current outlinee as their section.

  7. Associate all nodes with the heading of the section with which they are associated, if any.

  8. If current outlinee is the body element, then the outline created for that element is the outline of the entire document.

The tree of sections created by the algorithm above, or a proper subset thereof, must be used when generating document outlines, for example when generating tables of contents.

When creating an interactive table of contents, entries should jump the user to the relevant sectioning content element, if the section was created for a real element in the original document, or to the relevant heading content element, if the section in the tree was generated for a heading in the above process.

Selecting the first section of the document therefore always takes the user to the top of the document, regardless of where the first heading in the body is to be found.

The outline depth of a heading content element associated with a section section is the number of sections that are ancestors of section in the outline that section finds itself in when the outlines of its Document's elements are created, plus 1. The outline depth of a heading content element not associated with a section is 1.

User agents should provide default headings for sections that do not have explicit section headings.

Consider the following snippet:

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

Although it contains no headings, this snippet has three sections: a document (the body) with two subsections (a nav and an aside). A user agent could present the outline as follows:

  1. Untitled document
    1. Navigation
    2. Sidebar

These default headings ("Untitled document", "Navigation", "Sidebar") are not specified by this specification, and might vary with the user's language, the page's language, the user's preferences, the user agent implementor's preferences, etc.

The following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk, and the enter and exit arguments are callbacks that are called with the nodes as they are entered and exited. [ECMA262]

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.nextSibling) {
        node = node.nextSibling;
        continue start;
      }
      if (node == root)
        node = null;
      else
        node = node.parentNode;
    }
  }
}

가능하다면, 범용 컨테이너인 div와 span을 최대한 줄이고, 의미에 맞는 요소를 사용하면서 그 요소에 스크립트와 스타일을 연결하는 편이 좋습니다. 이러한 내용에 관한 좋은 글을 번역했던 일이 있으니 참고하십시오. 돌아가기

nav 요소를 써도 되지만 보통 불필요하다는 표현을 잘 음미해야 합니다. 푸터에 나타나는 중요 링크란 대개 회사 소개, 법적 고지, 연락처 등 일반 사용자는 그다지 관심을 갖지 않지만 사이트에는 중요한링크입니다. nav 요소는 고유한 역할을 가지며, 화면에 나타나는 것이 전부가 아닙니다. 예를 들어 스크린 리더에서 사용자의 편의를 위해 사이트 내비게이션으로 점프하는 기능을 넣었다면 nav 요소를 이용할 수 있습니다. 그런데 푸터에 있는 회사 소개라든가 법적 고지는 이런 기능과 아무 연관이 없으므로 nav 요소를 사용한다면 혼란을 초래할 겁니다. 스크린 리더 뿐 아니라 검색 엔진도 사이트 내비게이션을 많이 고려합니다. 불필요한 곳에서 nav 요소를 남용한다면 혼란을 초래할 겁니다.돌아가기

아래와 같은 구조가 만들어진다는 뜻입니다. section 요소가 회색으로 표현된 것은 그것이 암시적인 섹션이라는 뜻입니다.

<body>
  <h1>Foo</h1>
  <section>
    <h2>Bar</h2>
    <blockquote>
      <section>
        <h3>Bla</h3>
      </section>
    </blockquote>
    <p>Baz</p>
  </section>          <!-- <h2>Bar</h2> 가 시작한 암시적 섹션 끝 -->
  <h2>Quux</h2>
  <section>
  <h3>Thud</h3>
  </section>
  <p>Grunt</p>
</body>돌아가기

섹션 루트는 말 그대로 "독립된" 개요를 가지므로 섹션 루트 내부에 h1 요소가 있더라도 바깥의 개요에는 영향이 없다는 뜻입니다.

<section id="politics"><!-- 오늘자 신문 정치면 -->
  <h1>정치</h1>
  <h2>박근혜 대표, 신공항 백지화에 강한 불만 보여</h2>
  <p>
    박근혜 대표는 오늘...
    ...
  </p>
  <blockquote cite="http://www.iMB.com/idontknow.html#책임은국민이알아서">
    <h1>친박계 의원 회동</h1>
    .....
  </blockquote>
</section>

위 마크업을 보시면 박근혜 대표가 신공항 백지화에 불만을 표시했다는 기사를 h2 요소로 시작했습니다. h2 요소는 h1보다 낮은 등급이므로, 정치면의 서브섹션임을 암시합니다. (이것은 사실 article 요소가 적합하지만 섹션 루트를 설명하기 위해 그냥 씁니다.)

이 서브섹션에서, 다른 매체의 기사를 인용하고 있음을 나타내기 위해 blockquote 요소를 사용하고 cite 속성으로 주소를 명기했습니다. blockquote 내부에 h1 요소가 있지만, blockquote가 섹션 루트이므로 이 h1은 새로운 섹션을 암시하지 않고 blockquote 내부의 개요에만 관여합니다.돌아가기