Document Outline

지성봉

現 콘텐츠연합플랫폼(주) 웹 퍼블리셔

HTML 5.1 명세 1년째 개인 번역 중

Document Outline in HTML 5.1

Adenda

Document Outline in HTML 5.1
1. What is outline?
2. HTML5 Outline Algorithm
What is different between HTML 5 and HTML 5.1?
주의해야 할 것들
How to check outline?
Outline을 정말 고려해야 하는가?

What is outline?

a {
    outline : 1px solid #181818
}

outline: 개요를 서술하다; 윤곽을 보여주다; 개요; 윤곽

The document outline is the structure of a document.
HTML5 Doctor

섹션화 콘텐트(sectioning content) 요소나 섹션화 루트(sectioning root) 요소에 대한 개요는 하나 이상의 잠재적으로 중첩되는 섹션들의 목록으로 구성됩니다.
... (중략) ...
섹션은 원래(original) DOM 트리의 일부 노드에 해당하는 컨테이너 입니다.
... (중략) ...
Document의 body 요소(element)에 대해 생성된 개요(outline)은 전체 문서의 개요(outline)입니다.
4.3.10.1 개요(outline) 생성, W3C HTML 5.1 Spec.

Section

<section>
    Section 1
</section>

섹션은 원래(original) DOM 트리의 일부 노드에 해당하는 컨테이너 입니다.
... (중략) ...
개요(outline)의 섹션들은 섹션 요소(element)들에 해당 할 수 있기는 하지만 섹션 요소(element)들은 아닙니다 — 그것들은 단지 개념적인 섹션들입니다.
4.3.10.1 개요(outline) 생성, W3C HTML 5.1 Spec.

The document outline is the section structure structure of a document.

HTML5 Outline Algorithm

제목(heading)은 암묵적 섹션을 생성
섹션화(sectioning) 콘텐트는 명시적 섹션 생성
제목(heading)이 없는 섹션의 제목은 기본 제목을 사용.

섹션화 루트(sectioning root) 요소들은 자신의 개요를 가짐

<body>                * Section created for body node

    <h1>A</h1>
    <p>B</p>

</body>

섹션 안의 헤딩 요소들 중 첫 번째 요소가 그 개요에 대한 헤딩(heading)이 된다.

<body>                * Section created for body node

    <h1>A</h1>        * Associated with heading "A"
    <p>B</p>          * Associated with paragraph "B"

</body>

Structural outline

outline test

하위 등급(rank)의 헤딩(heading)은 이전 섹션의 일부로 암묵적인 하위 섹션을 시작

<body>                * Section created for body node

    <h1>A</h1>        * Associated with heading "A"
    <p>B</p>          * Associated with paragraph "B"

    <h2>C</h2>            — Subsection implied for h2 element
    <p>D</p>              — Associated with heading "C" and paragraph "D"

</body>

Structural outline

A
1. C

outline test

동일 등급(rank)의 헤딩(heading)은 새로운 (암묵적인) 섹션을 시작

<body>                * Section created for body node

    <h1>A</h1>        * Associated with heading "A"
    <p>B</p>          * Associated with paragraph "B"

    <h2>C</h2>            — Subsection implied for h2 element
    <p>D</p>              — Associated with heading "C" and paragraph "D"

    <h2>E</h2>            — Second new subsection implied for h2 element
    <p>F</p>              — Associated with heading "E" and paragraph "F"

</body>

Structural outline

A
1. C
2. E

outline test

상위 등급(rank)의 헤딩(heading)은 상위 아웃라인의 수준에서 새로운 (암묵적인) 섹션을 시작

<body>                * Section created for body node

    <h1>A</h1>        * Associated with heading "A"
    <p>B</p>          * Associated with paragraph "B"

    <h2>C</h2>            — Subsection implied for h2 element
    <p>D</p>              — Associated with heading "C" and paragraph "D"

    <h3>E</h3>                + Subsection implied for h3 element
    <p>F</p>                  + Associated with heading "E" and paragraph "F"

    <h2>G</h2>            — Second new subsection implied for h2 element
    <p>H</p>              — Associated with heading "G" and paragraph "H"

</body>

Structural outline

A
1. C
  1. E
2. G

outline test

섹션화 루트(sectioning root) 요소 내부의 섹션과 헤딩(heading)은 조상들의 개요에 영향을 주지 않는다.

<body>                * Section created for body node

    <h1>A</h1>        * Associated with heading "A"
    <p>B</p>          * Associated with paragraph "B"

    <h2>C</h2>            — Subsection implied for h2 element
    <p>D</p>              — Associated with heading "C" and paragraph "D"

    <blockquote>           do not contribute to the outlines of ancestors
        <h3>E</h3>
        <p>F</p>
    </blockquote>

    <h2>G</h2>            — Second new subsection implied for h2 element
    <p>H</p>              — Associated with heading "G" and paragraph "H"

</body>

Structural outline

A
1. C
2. G

outline test

섹션화 콘텐츠는 암묵적 섹션과 관계없이 가장 가까운 조상 섹션화 루트나 섹션화 콘텐트의 하위 섹션으로 간주

<body>                * Section created for body node

    <h1>A</h1>        * Associated with heading "A"
    <p>B</p>          * Associated with paragraph "B"

    <h2>C</h2>            — Subsection implied for h2 element
    <p>D</p>              — Associated with heading "C" and paragraph "D"

    <h3>E</h3>                + Subsection implied for h3 element
    <p>F</p>                  + Associated with heading "E" and paragraph "F"

    <section>             — explicit <section> subsection for body node
        <h2>G</h2>        — Associated with heading "G" and paragraph "H"
        <p>H</p>
    </section>
</body>

Structural outline

A
1. C
  1. E
2. G

outline test

명시적 섹션이 생성될 때 헤딩(heading)이 존재하지 않을 경우 암묵적 헤딩(일반적으로 untitled)을 생성.
명시적인 섹션 제목(heading)을 가지지 않는 섹션들에 대한 기본 제목(heading)들을 제공

<body>                * Section created for body node
    <h1>A</h1>        * Associated with heading "A"
    <p>B</p>          * Associated with paragraph "B"

    <nav>                 — explicit <nav> subsection for body node
        <ul>               implied heading created for <nav> section
            <li>
                <a href="..">menu</a>
            </li>
        </ul>
    </nav>

    <section>             — explicit <section> subsection for body node
        <h2></h2>          default heading for <section> section
        <p>D</p>
    </section>
</body>

Structural outline

A
1. Untitled [nav element with no heading]
2. Untitled [section element with empty heading]

outline test

What is different between HTML 5 and HTML 5.1?

섹션들은 모든 등급의 제목(heading)들을 포함할 수 있고, 작성자들은 섹션의 중첩 레벨에 대한 적절한 등급의 제목(heading)들을 사용할 것이 강력히 권장됩니다. 4.3.10 제목(heading)들과 섹션들 - in HTML 5

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

<body>
    <h1>A</h1>
    <p>B</p>

    <section>
        <h1>C</h1>
        <p>D</p>

        <article>
            <h1>E</h1>
            <p>F</p>
        </article>
    </section>
</body>

주의해야 할 것들

문서 구조를 전달하기 위해 outline에 의존하지 마세요.

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

<body>                * Section created for body node
  <h1>Apples</h1>      * Associated with heading "Apples" 
  <p>Apples are fruit.</p>
  <section>               — explicit <section> section for body node
    <h2>Taste</h2>        — Associated with heading "Taste"
    <p>They taste lovely.</p>
    <section>                 + explicit <section> section for "Taste" section
      <h3>Sweet</h3>          + Associated with heading "Sweet"
      <p>Red apples are sweeter than green ones.</p>
    </section>
  </section>
  <section>               — explicit <section> section for body node
    <h3>Color</h3>        — Associated with heading "Color"
    <p>Apples come in various colors.</p>
  </section>
</body>

Structural outline

Apples
1. Taste
  1. Sweet
2. Color

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

Heading-level outline

<h1> Apples

<h2> Taste

<h3> Sweet

<h3> Color

`<h1>` 은 모든 heading들 중 선두로!

<body>

    <h2>C</h2>
    <p>D</p>

    <h1>A</h1>
    <p>B</p>

</body>

Structural outline

Heading-level outline

<h1> [missing]

<h2> C

<h1> A

`<li>` 요소 내부에 heading 사용하지 마세요

<body>
    <h1>A</h1>        section implied for h1 element
    <ul>
        <li>
            <h2>B</h2>      Subsection implied for h2 element
            <p>C</p>
        </li>                Section? List? 
        <li>
            <h2>D</h2>      Subsection implied for h2 element
            <p>E</p>
        </li>
        <li>
            <h2>F</h2>
            <p>G</p>
        </li>
    </ul>
</body>

li 요소(element)들 안에 제목(heading) 요소(element)들을 (예를 들어, h1) 포함시키는 경우, 작성자가 의도한 의미(semantics)를 전달하지 않을 것입니다. 제목(heading)은 새로운 섹션을 시작하고, 따라서 목록 내의 제목(heading)은 암묵적으로 여러 섹션들로 목록을 분리시킵니다.
4.4.7. li 요소(element) - HTML 5.1

How to check outline?

W3C Nu Html Checker

HeadingsMap

Chrome Extension, FireFox Addon

Document Outline

Document Outline in HTML 5.1

Adenda

What is outline?

Section

HTML5 Outline Algorithm

What is different between HTML 5 and HTML 5.1?

주의해야 할 것들

문서 구조를 전달하기 위해 outline에 의존하지 마세요.

`<h1>` 은 모든 heading들 중 선두로!

`<li>` 요소 내부에 heading 사용하지 마세요

How to check outline?

W3C Nu Html Checker

HeadingsMap

Outline을 정말 고려해야 하는가?

HTML provides the structure of the page.

Not yet... but in the future?

Thank you

Document Outline

Document Outline in HTML 5.1

Adenda

What is outline?

Section

HTML5 Outline Algorithm

What is different between HTML 5 and HTML 5.1?

주의해야 할 것들

문서 구조를 전달하기 위해 outline에 의존하지 마세요.

<h1> 은 모든 heading들 중 선두로!

<li> 요소 내부에 heading 사용하지 마세요

How to check outline?

W3C Nu Html Checker

HeadingsMap

Outline을 정말 고려해야 하는가?

HTML provides the structure of the page.

Not yet... but in the future?

Thank you

`<h1>` 은 모든 heading들 중 선두로!

`<li>` 요소 내부에 heading 사용하지 마세요