W3C

HTML 5.1

W3C Recommendation,

4.4. 섹션화(sectioning) 콘텐트

4.4.1. p 요소(element)

카테고리:
흐름(flow) 콘텐트.
분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:
어구(phrasing) 콘텐트.
text/html에서 태그 생략:
p 요소(element)가 address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, main, menu, nav, ol, p, pre, section, table, ul 요소(element)가 즉시 뒤따르거나, 부모 요소(element)에 더 이상의 콘텐트가 존재하지 않고 부모 요소(element)가 a, audio, del, ins, map, noscript, video 요소(element)가 아닌 HTML 요소(element)가 아니라면, p 요소(element)의 종료 태그는 생략될 수 있습니다.
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
interface HTMLParagraphElement : HTMLElement {};

p 요소(element)는 문단나타냅니다.

문단들이 보통 빈 줄들을 통해 인접한 블럭들로부터 물리적으로 분리된 텍스트 블럭들에 의해 시각 매체에 표현되는 반면, 스타일 시트나 유저 에이전트는 다른 방법으로, 예를 들어 인라인 단락 기호 (¶)를 사용하여, 문단 구분을 표현하는 것이 동일하게 당연할 것입니다.

다음 예제들은 적합한 HTML 코드 조각들 입니다:
<p>The little kitten gently seated itself on a piece of
carpet. Later in his life, this would be referred to as the time the
cat sat on the mat.</p>
<fieldset>
  <legend>Personal information</legend>
  <p>
    <label>Name: <input name="n"></label>
    <label><input name="anon" type="checkbox"> Hide from other users</label>
  </p>
  <p><label>Address: <textarea name="a"></textarea></label></p>
</fieldset>
<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>

p 요소(element)는 더 명시적인 요소(element)가 적합할 경우 사용되지 않아야(should) 합니다.

다음 예제는 기술적으로는 맞습니다:
<section>
  <!-- ... -->
  <p>Last modified: 2001-04-23</p>
  <p>Author: fred@example.com</p>
</section>

하지만, 다음 마크업이 더 좋을 것입니다:

<section>
  <!-- ... -->
  <footer>Last modified: 2001-04-23</footer>
  <address>Author: fred@example.com</address>
</section>

혹은:

<section>
  <!-- ... -->
  <footer>
  <p>Last modified: 2001-04-23</p>
  <address>Author: fred@example.com</address>
  </footer>
</section>
목록 요소(element)들은 (특히, olul요소(element)들) p 요소(element)들의 자식이 될 수 없습니다. 따라서, 문장이 글머리 기호 목록을 포함하는 경우, 누군가는 그것이 어떻게 마크업 되어야(should) 하는지 궁금해 할 수 있습니다.
예를 들어, 이 기이한 문장은 관련되는 글머리 기호들을 가집니다
  • wizards,

  • faster-than-light travel, and

  • telepathy,

그리고 아래에서 더 논의됩니다.

해결책은 HTML 관점에서, 문단이 논리적 개념이 아니라, 구조적 개념이라는 것을 인식하는 것입니다. 위 기이한 예제에서, 이 명세에 의해 정의된 대로 실제로 다섯 개의 문단들이 있습니다: 목록 앞 하나, 각 글머리 기호에 대해 하나, 목록 후 하나.

따라서 위 예제에 대한 마크업은 다음이 될 수 있습니다:
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
  <li>wizards,
  <li>faster-than-light travel, and
  <li>telepathy,
</ul>
<p>and is further discussed below.</p>

여러 "구조적" 문단들로 구성되는 "논리적" 문단들을 편리하게 스타일을 하고자하는 작성자는 p 요소(element) 대신에 div 요소(element)를 사용할 수 있습니다.

따라서 예를 들어 위 예제는 다음과 같이 될 수 있습니다:
<div>For instance, this fantastic sentence has bullets relating to
  <ul>
    <li>wizards,
    <li>faster-than-light travel, and
    <li>telepathy,
  </ul>
and is further discussed below.</div>

이 예제는 여전히 5개의 구조적 문단들을 가지지만, 이제 작성자는 예제의 각 부분을 별도로 간주해야 하는 대신 단지 div을 사용할 수 있습니다.

4.4.2. hr 요소(element)

카테고리:
흐름(flow) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:
없음.
text/html에서 태그 생략:
종료 태그 없음.
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
separator (기본 값 - 설정하지 마세요) 또는 presentation.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
interface HTMLHRElement : HTMLElement {};

hr 요소(element)는 문단 수준의 주제별 구분을, 예를 들어 스토리에서 장면 변화, 또는 참고 서적의 섹션 내에서 다른 주제로의 전환, 나타냅니다.

다음 가상의 프로젝트 메뉴얼의 발췌문은 섹션에서 주제들을 구분하기 위해 hr 요소(element)를 사용하는 두 섹션들을 보여줍니다.
<section>
  <h1>Communication</h1>
  <p>There are various methods of communication. This section
  covers a few of the important ones used by the project.</p>
  <hr>
  <p>Communication stones seem to come in pairs and have mysterious
  properties:</p>
  <ul>
    <li>They can transfer thoughts in two directions once activated
    if used alone.</li>
    <li>If used with another device, they can transfer one’s
    consciousness to another body.</li>
    <li>If both stones are used with another device, the
    consciousnesses switch bodies.</li>
  </ul>
  <hr>
  <p>Radios use the electromagnetic spectrum in the meter range and
  longer.</p>
  <hr>
  <p>Signal flares use the electromagnetic spectrum in the
  nanometer range.</p>
</section>
<section>
  <h1>Food</h1>
  <p>All food at the project is rationed:</p>
  <dl>
    <dt>Potatoes</dt>
    <dd>Two per day</dd>
    <dt>Soup</dt>
    <dd>One bowl per day</dd>
  </dl>
  <hr>
  <p>Cooking is done by the chefs on a set rotation.</p>
</section>

section 요소(element)들과 h1 요소(element)들은 암묵적으로 스스로 주제별로 변경하기 때문에, 섹션들끼리 사이에 hr 요소(element)가 필요하지 않습니다.

다음 피터 F. 해밀턴의 판도라의 별에서의 발췌문은 장면 전환 전과 장면 전환 뒤에 따르는 두 문단들을 보여줍니다. 두 번째와 세 번째 문단 사이에 중앙에 위치한 혼자 있는 별을 포함하는 간격으로 표현된 장면 전환은 여기에서 hr 요소(element)를 사용하여 표현됩니다.
<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won’t be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night’s
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond’s winters.</p>

hr 요소(element)는 문서의 개요(outline)에 영향을 주지 않습니다.

4.4.3. pre 요소(element)

카테고리:
흐름(flow) 콘텐트.
분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:
어구(phrasing) 콘텐트.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
interface HTMLPreElement : HTMLElement {};

pre 요소(element)는 구조가 요소(element)들에 의해서 보다 인쇄 방식에 의해 표현되는 미리 서식화 된(preformatted) 텍스트의 블럭을 나타냅니다.

pre 요소(element) 시작 태그에 즉시 뒤따르는 선행 개행 문자는 제거됩니다.

pre 요소(element)가 사용될 수 있는 경우의 몇 가지 예들:

작성자들은 미리 서식화된 텍스트가 음성 합성기들, 점자 표시기들 같은 것의 사용자에 대한 경우가 되는 것과 같은 서식을 잃어버릴 경우 경험 될 방법을 고려하도록 권장됩니다. ASCII 아트 같은 경우, 텍스트 형식의 설명 같은 대체 표현이 문서의 독자들에게 좀 더 보편적인 접근 가능하게 될 것입니다.

컴퓨터 코드 블럭을 표현하기 위해, pre 요소(element)가 code 요소(element)와 함께 사용될 수 있습니다; 컴퓨터 출력 블럭을 표현하기 위해 pre 요소(element)가 samp 요소(element)와 함께 사용될 수 있습니다. 유사하게, 사용자가 입력하는 텍스트를 나타내기 위해 kbd 요소(element)가 pre 요소(element)와 함께 사용될 수 있습니다.

다음 코드 조각에서, 컴퓨터 코드의 견본이 제시됩니다.
<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
다음 코드 조각에서, sampkbd 요소(element)들은 Zork I의 세션을 보여주기 위해 pre 요소(element)의 콘텐트에 혼합되어 있습니다.
<pre><samp>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

></samp> <kbd>open mailbox</kbd>

<samp>Opening the mailbox reveals:
A leaflet.

></samp></pre>
다음은 시의 고유한 부분을 형성하는 그것의 일반적이지 않은 형식을 보존하기 위해 pre 요소(element)를 사용하는 현대 시를 보여줍니다.
<pre>                maxling

it is with a          heart
                heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

4.4.4. blockquote 요소(element)

카테고리:
흐름(flow) 콘텐트.
섹션화(sectioning) 루트.
분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:
흐름(flow) 콘텐트.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
cite - 인용구 소스로의 링크.
허용된 ARIA 역할(role) 속성(attribute) 값들:
모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
interface HTMLQuoteElement : HTMLElement {
  attribute DOMString cite;
};

HTMLQuoteElement 인터페이스는 q 요소(element)에 의해서도 사용됩니다.

blockquote 요소(element)는 선택적으로, footercite 요소(element) 내에 있어야 하는 출처(citation)를 가지고, 그리고 선택적으로, 주석(annotation)들과 축약어들 같은 인라인 변경사항들을 가지고, 다른 소스로부터 인용(quote)되는 콘텐트를 나타냅니다.

출처(citation)와 인라인 변경 사항들과 다른 blockquote 안의 콘텐트는 다른 소스로부터 인용(quote)되어야(must) 하고, 그것이 주소를 가진다면, 주소는 cite 속성(attribute)에 언급될 수 있습니다.

페이지가 블로그 게시물의 댓글들 같이, 여러 사람들로부터의 의견을 포함하는 경우에, '다른 소스'는 다른 사람에 의해 작성된 동일한 페이지의 텍스트를 포함할 수 있습니다.

cite 속성(attribute)이 존재한다면, 그것은 유효한 잠정적으로 공백으로 둘러 싸일 수 있는 URL이어야(must) 합니다. 해당하는 출처(citation) 링크를 얻기 위해, 속성(attribute)의 값은 요소에 관련하여 해결(resolve) 되어야(must) 합니다. 유저 에이전트는 사용자가 그 출처(citation) 링크들을 따라가는 것을 허용할 수 있지만, 그것은 독자들을 위한 것이 아니라, 주로 특정한 사용을 위해 (예를 들어, 사이트의 인용구(quotation)들의 사용에 대한 통계를 수집하는 서버 사이드 스크립트들에 의해) 의도된 것입니다.

cite IDL 속성(attribute)은 요소(element)의 cite 콘텐트 속성(attribute)을 반영해야(must) 합니다.

blockquote의 콘텐트는 축약 되거나, 추가된 콘텐트를 가지거나, 주석(annotation)들을 가질 수 있습니다. 인용된 텍스트에 대한 모든 그러한 추가 사항들이나 변경 사항들은 텍스트로 나타나야(must) (텍스트 수준에서) 합니다. 이것은 "emphasis mine" 같은, 관습적인 규약들이나 명시적인 언급들의 사용을 의미할 수 있습니다.

"emphasis mine"
작성자가 제시한 인용구가 원문 출처에서 언급한 인용구보다 우선시 된다는 것을 강조하기 위해 사용하는 표기

예를 들어, 영어에서, 축약어들은 전통적으로 대괄호들을 사용하여 식별됩니다. "Fred ate the cracker. He then said he liked apples and fish." 라는 문장을 가진 페이지를 고려해보세요; 이것은 다음과 같이 인용(quote)될 수 있습니다:
<blockquote>
  <p>[Fred] then said he liked [...] fish.</p>
</blockquote>

따옴표 표기는 blockquote 내에서 인용(quote)된 텍스트와 주석(annotation)들 사이를 구별하기 위해 사용될 수 있습니다.

예를 들어, 작성자에 의해 인라인 메모가 제공됩니다:
<figure>
<blockquote>
"That monster custom, who all sense doth eat
Of habit’s devil," <abbr title="et cetera">&c.</abbr> not in Folio

"What a falling off was there !
From me, whose love was of that dignity
That it went hand in hand even with the vow
I made to her in marriage, and to decline
Upon a wretch."
</blockquote>
<footer><cite class="title">Shakespeare manual</cite> by <cite class="author">Frederick Gard Fleay</cite>,
p19 (in Google Books)
</footer>
</figure>

위 예제에서, 출처(citation)는 figure 요소(element)의 footer에 포함되고, 이것은 인용구와 인용에 대한 정보를 그룹핑하고 연관시킵니다. 이 경우에, figcaption 요소(element)는 출처(citation)가 캡션이 아니기 때문에 출처(citation)에 대한 컨테이너로 사용되지 않았습니다.

인용구(quotation)에 대한 속성(attribution)은 blockquote 요소(element)내에 위치할 수 있을 것이지만, 텍스트 내의 속성(attribution)들을 위한 cite 요소(element) 안이나 footer 요소(element) 안에 있어야(must)합니다.

예를 들어, 여기 인용구(quote)를 이 속성(attribution)에 분명하게 관련시기키 위해, 인용(quote)된 텍스트 뒤에 footer에 주어진 속성(attribution)이 있습니다:
<blockquote>
  <p>I contend that we are both atheists. I just believe in one fewer
  god than you do. When you understand why you dismiss all the other
  possible gods, you will understand why I dismiss yours.</p>
  <footer><cite>Stephen Roberts</cite></footer>
</blockquote>
여기 속성(attribution)은 인용(quote)된 텍스트의 마지막 행에 cite 요소(element)에 주어집니다. 작성자로의 링크도 포함되는 것에 주목하세요.
<blockquote>
  The people recognize themselves in their commodities; they find their
  soul in their automobile, hi-fi set, split-level home, kitchen equipment.
  — <cite><a href="https://en.wikipedia.org/wiki/Herbert_Marcuse">Herbert Marcuse</a></cite>
</blockquote>

blockquote의 마크업이 인용(quote)된 소스로부터임을 나타내는 공식적인 방법은 없습니다. footercite 요소(element)들이 포함되고 이 요소(element)들이 blockquote 내에 출처(citation)들을 식별하기 위해 사용된다면, 인용된 소스의 요소(element)들이 그들의 원본을 식별하기 위한 메타데이터를 가지고, 예를 들어 class 속성(attribute)를 사용하여 (정의된 확장 가능한 메커니즘) 주석이 달릴 수 있는 것이 제안됩니다.

이 예제에서 인용(quote)의 소스는 class 속성(attribute)를 사용하여 주석이 달린 cite 요소(element)를 포함합니다:
<blockquote>
  <p>My favorite book is <cite class="from-source">At Swim-Two-Birds</cite></p>
  <footer>- <cite>Mike[tm]Smith</cite></footer>
</blockquote>

아래 다른 예제들은 속성(attribution)을 보여주는 다른 방법들을 보여줍니다.

여기 blockquote 요소(element)는 figure 요소(element)와 그것의 figcaption과 함께 사용됩니다:
<figure>
  <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what’s true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.</p>
  </blockquote>
  <figcaption><cite>Carl Sagan</cite>, in "<cite>Wonder and Skepticism</cite>", from
  the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
  1995)</figcaption>
</figure>
이 다음 예제는 cite와 함께 blockquote의 사용을 보여줍니다:
<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="https://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...
이 예제는 사용자가 댓글을 달고 있는 게시물를 보여주기 위해 포럼 게시물이 blockquote를 사용할 수 있는 방법을 보여줍니다. article 요소(element)는 쓰레딩을 마크업하기 위해 각 게시물에 사용됩니다.
<article>
  <h1><a href="https://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
  <article>
    <header><strong>t3yw</strong> 12 points 1 hour ago</header>
    <p>I bet a narwhal would love that.</p>
    <footer><a href="?pid=29578">permalink</a></footer>
    <article>
      <header><strong>greg</strong> 8 points 1 hour ago</header>
      <blockquote><p>I bet a narwhal would love that.</p></blockquote>
      <p>Dude narwhals don’t eat bacon.</p>
      <footer><a href="?pid=29579">permalink</a></footer>
      <article>
        <header><strong>t3yw</strong> 15 points 1 hour ago</header>
        <blockquote>
          <blockquote><p>I bet a narwhal would love that.</p></blockquote>
          <p>Dude narwhals don’t eat bacon.</p>
        </blockquote>
        <p>Next thing you’ll be saying they don’t get capes and wizard
        hats either!</p>
        <footer><a href="?pid=29580">permalink</a></footer>
        <article>
          <header><strong>boing</strong> -5 points 1 hour ago</header>
          <p>narwhals are worse than ceiling cat</p>
          <footer><a href="?pid=29581">permalink</a></footer>
        </article>
      </article>
    </article>
    <article>
      <header><strong>fred</strong> 1 points 23 minutes ago</header>
      <blockquote><p>I bet a narwhal would love that.</p></blockquote>
      <p>I bet they’d love to peel a banana too.</p>
      <footer><a href="?pid=29582">permalink</a></footer>
    </article>
  </article>
</article>
이 예제는 blockquote 요소(element)들 내에 p 요소(element)들을 사용할 필요가 없다는 것을 보여주는, 짧은 코드 조각들에 대한 blockquote의 사용을 보여줍니다:
<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...

대화를 표현하는 방법의 예들은 이후 섹션에 보여집니다; 이것은 이 목적을 위해 citeblockquote 요소(element)들을 사용하는 것은 적절하지 않습니다.

4.4.5. ol 요소(element)

카테고리:
흐름(flow) 콘텐트.
요소(element)의 자식이 적어도 하나의 li 요소(element)를 포함한다면: 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:
0개 이상의 li스크립트 지원 요소(element)들.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
reversed - 목록에 번호를 거꾸로 지정.
start - 첫 번째 항목의 서수 값
type - 목록 표식의 종류.
허용된 ARIA 역할(role) 속성(attribute) 값들:
list 역할(role) (기본 값 - 설정하지 마세요), directory, group, listbox, menu, menubar, presentation, radiogroup, tablist, toolbar, tree.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
interface HTMLOListElement : HTMLElement {
  attribute boolean reversed;
  attribute long start;
  attribute DOMString type;
};

ol 요소(element)는 의도적으로 정렬된 항목들의 목록을 나타내기 때문에, 순서를 변경하는 것은 문서의 의미를 변경할 것입니다.

목록의 항목들은 트리 순서에 따라 ol 요소(element)의 li 요소(element) 자식 노들입니다.

reversed 속성(attribute)은 불리언 속성(attribute)입니다. 이것이 존재한다면, 목록인 내림차순 목록 (..., 3, 2, 1) 임을 나타냅니다. 속성(attribtue)가 생략되었다면, 목록은 오름차순 목록 (1, 2, 3, ...)입니다.

start 속성(attribute)가 존재한다면 이 속성(attribute)은 첫 번째 목록 항목의 서수 값을 제공하는 유효한 정수이어야(must) 합니다.

start 속성(attribute)이 존재한다면, 유저 에이전트들은 속성(attribute)의 값을 결정하기 위해 순서에 따라 정수로 그것을 해석해야(must) 합니다. 속성(attribute)이 누락되거나 값이 참조된 알고리즘을 따라 숫자로 변환될 수 없는 경우에 사용되는 기본 값은 요소(element)가 reversed 속성(attribute)를 가지지 않는다면 1이고, 그렇지 않으면 li 자식 요소(element)들의 수입니다.

목록의 첫 번째 항목은 그 li 요소(element)가 성공적으로 해석될 수 있는 값을 가지는 경우 그 value 속성(attribtue)에 의해 주어진 서수 값을 가지고, 그렇지 않는 한, ol 요소(element)의 start 속성(attribtue)에 의해 주어진 서수 값을 가집니다.

목록의 각 이후 항목들은 그것이 value 속성(attribute)을 가진다면 value 속성(attribute)에 의해 주어진 서수 값을 가지거나, value 속성(attribute)을 가지지 않는다면, reversed가 없다면 이전 항목의 서수 값에 1을 더한 값을, reversed가 있다면 1을 뺀 값을 가집니다.

type 속성(attribute)은 목록에서 사용되는 표식 종류가 중요한 경우에 (예를 들어, 항목들이 그들의 숫자/문자에 의해 참조되는 것이기 때문에) 이를 명시하는데 사용될 수 있습니다. 속성(attribute)이 명시된다면 속성(attribute)은 대소문자를 구분하여 다음 표의 행의 하나의 첫 번째 칸에 주어진 문자의 하나와 일치하는 값을 가져야(must) 합니다. type 속성(attribtue)은 첫 번째 칸이 속성(attribute)의 값에 일치하는 행의 두 번째 열의 칸에 주어진 상태를 나타냅니다; 일치하는 칸들이 없거나, 혹은 속성(attribute)이 생략되었다면, 속성(attribute)은 decimal 상태를 나타냅니다.

키워드 상태 설명 values 1-3과 3999-4001 값에 대한 예제들
1 (U+0031) decimal 십진수 1. 2. 3. ... 3999. 4000. 4001. ...
a (U+0061) lower-alpha 소문자 라틴 알파벳 a. b. c. ... ewu. ewv. eww. ...
A (U+0041) upper-alpha 대문자 라틴 알파벳 A. B. C. ... EWU. EWV. EWW. ...
i (U+0069) lower-roman 소문자 로마 숫자들 i. ii. iii. ... mmmcmxcix. i̅v̅. i̅v̅i. ...
I (U+0049) upper-roman 대문자 로마 숫자들 I. II. III. ... MMMCMXCIX. I̅V̅. I̅V̅I. ...
유저 에이전트는 목록의 항목들을 ol 요소(element)의 type 속성(attribute)의 상태와 일치하는 방법으로 표현해야(should) 합니다. 0보다 작거나 같은 숫자는 type 속성(attribute)에 상관없이 항상 십진법을 사용해야(should) 합니다.

CSS 유저 에이전트에 대해, 이 속성(attribute)를 list-style-type CSS 속성(property)에 매핑시키는 것은 §10 Rendering 섹션에서 주어집니다(매핑은 간단합니다: 위 상태들은 그들의 해당하는 CSS 값들과 동일한 이름들을 가집니다).

CSS 유저 에이전트들에서 이 속성(attribute)를 구현하는데 사용되는 기본 CSS 목록 스타일들을 재정의하는 것이 가능합니다; 그렇게 하는 것은 목록 항목들이 표시되는 방법에 영향을 줄 것입니다.

reversed, start, type IDL 속성(attribute)들은 동일한 이름의 각 콘텐트 속성(attribute)들을 반영해야(must) 합니다. start IDL 속성(attribute)은 그것의 콘텐트 속성과 동일한 기본 값을 가집니다.
다음 마크업은 순서가 중요한 목록을 보여주고, 따라서 ol 요소(element)가 적절한 위치를 보여줍니다. 이 목록과 ul 요소(element)를 사용하는 동일한 항목들의 예제들을 참고하여 ul 섹션 내의 동등한 목록을 비교해보세요.
<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
  <li>Switzerland
  <li>United Kingdom
  <li>United States
  <li>Norway
</ol>

목록의 순서를 변경하는 것이 문서의 의미를 어떻게 변경하는지 주목하세요. 다음 예제에서, 처음 두 개 항목들의 상대적인 순서를 변경하는 것은 작성자의 출생지를 변경시켰습니다:

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
  <li>United Kingdom
  <li>Switzerland
  <li>United States
  <li>Norway
</ol>

4.4.6. ul 요소(element)

카테고리:
흐름(flow) 콘텐트.
요소(element)의 자식이 적어도 하나의 li 요소(element)를 포함한다면: 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:
Zero or more li and script-supporting elements.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
list 역할(role) (기본 값 - 설정하지 마세요), directory, group, listbox, menu, menubar, presentation, radiogroup, tablist, toolbar, tree.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
interface HTMLUListElement : HTMLElement {};

ul 요소(element)는 항목들의 순서가 중요하지 않은 — 즉, 순서를 변경하는 것이 문서의 의미(meaning)를 실질적으로 변경하지 않는 항목들의 목록을 나타냅니다.

목록의 항목들은 ul 요소(element)의 li 요소(element) 자식 노드들입니다.

다음 마크업은 순서가 중요하지 않고, 따라서 ul 요소(element)가 적절한 목록을 보여줍니다. 이 목록과 ol 요소(element)를 사용하는 동일한 항목들의 예를 참고하여 ol 섹션 내의 동등한 목록을 비교해보세요.
<p>I have lived in the following countries:</p>
<ul>
  <li>Norway
  <li>Switzerland
  <li>United Kingdom
  <li>United States
</ul>

목록의 순서를 변경하는 것이 문서의 의미(meaning)을 변경하지 않는 것에 주목하세요. 위 코드 조각의 항목들은 알파벳 순서로 주어지지만, 아래 코드 조각에서는 전혀 문서의 의미(meaning)의 변경 없이, 2007년 경상수지의 크기의 순서로 주어집니다:

<p>I have lived in the following countries:</p>
<ul>
  <li>Switzerland
  <li>Norway
  <li>United Kingdom
  <li>United States
</ul>

4.4.7. li 요소(element)

카테고리:
없음.
이 요소(element)가 사용될 수 있는 컨텍스트:
ol 요소(element)들 안에.
ul 요소(element)들 안에.
콘텐트 모델:
흐름(flow) 콘텐트.
text/html에서 태그 생략:
li 요소(element)의 종료 태그li 요소(element)에 다른 li 요소(element)가 즉시 뒤따르거나 부모 요소에 더 이상의 콘텐트가 존재하지 않는다면 생력될 수 있습니다.
콘텐트 속성(attribute)들:
범용 속성(attribute)들
If the element is not a child of an ul or menu element: value
허용된 ARIA 역할(role) 속성(attribute) 값들:
listitem 역할(role) (기본 값 - 설정하지 마세요), menuitem, menuitemcheckbox, menuitemradio, option, presentation, radio, separator, tab, treeitem.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
interface HTMLLIElement : HTMLElement {
  attribute long value;
};

li 요소(element)는 목록 항목을 나타냅니다. 그것의 부모 요소(element)가 ol, ul, menu 요소(element)라면, 요소(element)는 이 요소(element)에 대해 정의된 부모 요소(element) 목록의 항목입니다. 그렇지 않으면, 목록 항목은 어떤 다른 li 요소(element)에도 정의된 목록 관련 관계를 가지지 않습니다.

부모 요소(element)가 ol 요소(element)라면, li 요소(element)는 서수 값을 가집니다.

value 속성(attribute)이 존재한다면, 목록 항목의 서수 값을 제공하는 유효한 정수이어야(must) 합니다.

value 속성(attribute)이 존재한다면, 유저 에이전트들은 속성(attribute)의 값을 결정하기 위해 정수로 해석해야(must)합니다. 속성(attribute)의 값이 숫자로 변환될 수 없다면, 속성(attribute)은 그것이 존재하지 않는 것 처럼 취급되어야(must) 합니다. 속성(attribute)은 기본 값을 가지지 않습니다.

value 속성(attribute)은 요소(element)의 부모 ol 요소(element)가 있다면 그것에 관련하여 처리됩니다. 부모 ol 요소(element)가 없다면, 속성(attribute)은 영향을 가지지 않습니다. ( ol 요소(element) 참조)

value IDL 속성(attribute)은 value 콘텐트 속성(attribute)의 값을 반영해야(must) 합니다.

다음 예는, top 10 영화들이 나열 된 (역순으로) 것입니다. 목록이 figure 요소(element)와 그것의 figcaption 요소(element)를 사용하여 제목이 주어지는 방식에 주목하세요.
<figure>
  <figcaption>The top 10 movies of all time</figcaption>
  <ol>
    <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
    <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
    <li value="8"><cite>A Bug’s Life</cite>, 1998</li>
    <li value="7"><cite>Toy Story</cite>, 1995</li>
    <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
    <li value="5"><cite>Cars</cite>, 2006</li>
    <li value="4"><cite>Toy Story 2</cite>, 1999</li>
    <li value="3"><cite>Finding Nemo</cite>, 2003</li>
    <li value="2"><cite>The Incredibles</cite>, 2004</li>
    <li value="1"><cite>Ratatouille</cite>, 2007</li>
  </ol>
</figure>

마크업은 ol 요소(element)에 reversed 속성(attribtue)를 사용하여 다음과 같이 작성될 수도 있습니다:

<figure>
  <figcaption>The top 10 movies of all time</figcaption>
  <ol reversed>
    <li><cite>Josie and the Pussycats</cite>, 2001</li>
    <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
    <li><cite>A Bug’s Life</cite>, 1998</li>
    <li><cite>Toy Story</cite>, 1995</li>
    <li><cite>Monsters, Inc</cite>, 2001</li>
    <li><cite>Cars</cite>, 2006</li>
    <li><cite>Toy Story 2</cite>, 1999</li>
    <li><cite>Finding Nemo</cite>, 2003</li>
    <li><cite>The Incredibles</cite>, 2004</li>
    <li><cite>Ratatouille</cite>, 2007</li>
  </ol>
</figure>

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

4.4.8. dl 요소(element)

카테고리:
흐름(flow) 콘텐트.
요소(element)의 자식이 적어도 하나의 이름-값 그룹을 포함한다면: 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:
선택적으로 스크립트 지원 요소(element)들과 섞어서, 하나 이상의 dd 요소(element)들이 뒤따르는 하나 이상의 dt 요소(element)들로 각각 구성되는 0개 이상의 그룹들.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
list 역할(role) (기본 값 - 설정하지 마세요), directory, group, listbox, menu, menubar, presentation, radiogroup, tablist, toolbar, tree.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
interface HTMLDListElement : HTMLElement {};

dl 요소(element)는 0개 이상의 용어-설명 그룹들의 설명 목록을 나타냅니다. 각 용어-설명 그룹은 하나 이상의 용어들과 (dt 요소(element)들에 의해 표현 된), 하나 이상의 설명들 (dd 요소(element)들에 의해 표현 된)로 구성됩니다.

용어-설명 그룹들은 이름과 정의, 질문과 답, 범주와 주제, 혹은 다른 용어-설명 쌍의 그룹들이 될 수 있습니다.

이 예제에서 dl은 이름과 설명의 간단한 목록을 나타내는데 사용됩니다:

<dl>
  <dt>Blanco tequila</dt>
  <dd>The purest form of the blue agave spirit...</dd>
  <dt>Reposado tequila</dt>
  <dd>Typically aged in wooden barrels for between two and eleven months...</dd>
</dl>

용어-설명 그룹 내의 각 용어는 단일 dt 요소(element)에 의해 나타나져야(must) 합니다. 용어-설명 그룹 내의 설명들은 선택 가능한 것들입니다. 각 설명은 단일 dd 요소(element)로 나타나져야(must) 합니다.

이 예에서 dl 요소(element)는 여러 설명들을 가지는 용어들의 세트를 나타냅니다:

<p>Information about the rock band Queen:</p>
<dl>
  <dt>Members</dt>
  <dd>Brian May</dd>
  <dd>Freddie Mercury</dd>
  <dd>John Deacon</dd>
  <dd>Roger Taylor</dd>
  <dt>Record labels</dt>
  <dd>EMI</dd>
  <dd>Parlophone</dd>
  <dd>Capitol</dd>
  <dd>Hollywood</dd>
  <dd>Island</dd>
</dl>

dl 요소(element) 내의 용어-설명 그룹들의 순서와 각 그룹 내의 용어들과 설명들의 순서는 중요할 수 있습니다.

이 예에서 dl은 지시들의 순서가 중요한 지시들의 세트를 보여주는데 사용됩니다:

<p>Determine the victory points as follows (use the first matching case):</p>
<dl>
  <dt> If you have exactly five gold coins </dt>
  <dd> You get five victory points </dd>
  <dt> If you have one or more gold coins, and you have one or more silver coins </dt>
  <dd> You get two victory points </dd>
  <dt> If you have one or more silver coins </dt>
  <dd> You get one victory point </dd>
  <dt> Otherwise </dt>
  <dd> You get no victory points </dd>
</dl>

dl 요소(element)가 dtdd 자식 요소(element)들을 포함하지 않는다면, 용어-설명 그룹들을 포함하지 않습니다.

dl 요소(element)가 하나 이상의 비 여백 텍스트 노드 자식을 가지거나, dtdd 요소(element)들 둘 모두 아닌 자식을 가진다면, 모든 그 텍스트 노드들과 요소(element)들 뿐만 아니라 그것들의 후손들은 (모든 dtdd 요소(element)들을 포함하여) dl 내의 모든 용어-설명 그룹의 부분을 구성하지 않습니다.

dl 요소(element)가 하나 이상의 dt 자식 요소(element)를 가지지만 dd 자식 요소(element)를 가지지 않는다면, 그것은 용어들은 있지만 설명들이 없는 하나의 그룹으로 구성됩니다.

dl 요소(element)가 하나 이상의 dd 자식 요소(element)를 가지지만 dt 자식 요소(element)를 가지지 않는다면, 그것은 설명들은 있지만 용어들이 없는 하나의 그룹으로 구성됩니다.

dd 요소(element)가 dl 요소(element)의 첫 번째 자식이라면 (스크립트 지원 요소(element)를 제외하고), 첫 번째 그룹은 연관된 용어를 가지지 않습니다.

dt 요소(element)가 dl 요소(element)의 마지막 자식이라면 (스크립트 지원 요소(element)를 제외하고), 마지막 그룹은 연관된 설명들을 가지지 않습니다.

주목: dl 요소(element)가 그것의 콘텐트 모델과 일치하지 않는 경우, 그것은 종종 dd 요소(element)가 dt 요소(element) 대신 사용되거나, 그 반대이기 때문입니다.

4.4.9. dt 요소(element)

카테고리:
없음.
이 요소(element)가 사용될 수 있는 컨텍스트:
dl 요소(element)들 내의 dddt 요소(element)들 앞에.
콘텐트 모델:
후손 header, footer, 섹션화(sectioning) 콘텐트, 제목(heading) 콘텐트를 가지지 않는 흐름(flow) 콘텐트
text/html에서 태그 생략:
dt 요소(element)에 다른 dt 요소(element)나 dd 요소(element)가 즉시 뒤따른다면, dt 요소(element)의 종료 태그는 생략될 수 있습니다.
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
없음.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
어떤 aria-* 속성(attribute)들도 없음.
DOM 인터페이스:
HTMLElement를 사용.

dt 요소(element)는 설명 목록 (dl 요소(element)) 내의 용어-설명 그룹의 부분인 용어를 나타냅니다.

이 예에서 dt 요소(element)들은 질문들을 나타내고 dd 요소(element)들은 답들을 나타냅니다:

<dl>
  <dt>What is my favorite drink?</dt>
  <dd>Tea</dd>
  <dt>What is my favorite food?</dt>
  <dd>Sushi</dd>
  <dt>What is my favourite film?</dt>
  <dd>What a Wonderful Life</dd>
</dl>

dl 요소(element)에 사용되는 경우, dt 요소(element)는 반드시 용어에 대한 정의를 나타내는 것은 아닙니다. dfn 요소(element)가 정의를 나타내는데 사용되어야(should) 합니다.

이 예에서 dfn 요소(element)는 dt 요소(element)는 정의되는 용어를 포함하고, 이에 대한 정의가 dd 요소(element)에 의해 표현됨을 나타냅니다:

<dl>
  <dt lang="en-us"><dfn>Color</dfn></dt>
  <dt lang="en-gb"><dfn>Colour</dfn></dt>
  <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd>
</dl>

4.4.10. dd 요소(element)

카테고리:
없음.
이 요소(element)가 사용될 수 있는 컨텍스트:
dl 요소(element)들 내의 dtdd 요소(element)들 이후에 .
콘텐트 모델:
흐름(flow) 콘텐트.
text/html에서 태그 생략:
dd 요소(element)에 다른 dd 요소(element)나 dt 요소(element)가 즉시 뒤따르거나, 부모 요소에 더 이상의 콘텐트가 없다면 dd 요소(element)의 종료 태그는 생략될 수 있습니다.
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
없음
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
HTMLElement를 사용.

dd 요소(element)는 설명 목록 (dl 요소(element)) 내의 용어-설명 그룹의 부분인 설명을 나타냅니다 .

이 예에서 dd 요소(element)들은 dt 요소(element)들에 나타난 키코드들을 동작시키는 키들을 나타냅니다:

<dl>
  <dt>37</dt>
  <dd>Left</dd>
  <dt>38</dt>
  <dd>Right</dd>
  <dt>39</dt>
  <dd>Up</dd>
  <dt>40</dt>
  <dd>Down</dd>
</dl>

4.4.11. figure 요소(element)

카테고리:
흐름(flow) 콘텐트.
섹션화(sectioning) 루트.
분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:
선택적으로 figcaption 자식 요소(element)를 포함하는 흐름(flow) 콘텐트.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
Any role value.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
HTMLElement를 사용.

figure 요소(element)는 선택적으로 캡션을 가지고, 독립적이고 (완전한 문장 같은) 문서의 주요 흐름에서 단일 개체로서 참조되는 일부 흐름(flow) 콘텐트나타냅니다.

이 컨텍스트에서 독립은 반드시 독립적임을 의미하지는 않습니다. 예를 들어, 문단 내 각 문장은 독립적입니다; 문장의 일부인 이미지는 figure에 대해 적절하지 않을 것이지만, 이미지들로 만들어진 전체 문장은 적절할 것입니다.

요소(element)는 삽화, 도표, 사진, 코드 목록 등등에 주석을 다는데(annotate) 사용될 수 있습니다.

figure가 그것의 캡션으로 식별하는 것에 의해 (예를 들어, 삽화 번호에 의해) 문서의 주요 콘텐트로부터 참조되는 경우, 그러한 콘텐트가 문서의 흐름에 영향을 주지 않고 그 주요한 콘텐트로부터, 예를 들어, 페이지의 사이드로 혹은 전용 문서로 혹은 부록으로 쉽게 이동하는 것이 가능합니다.

figure 요소(element)가 그것의 관련된 위치에 의해 참조된다면, 예를 들어 "사진 위에" 혹은 "다음 삽화가 보여주는 바와 같이", 삽화를 이동시키는 것은 페이지의 의미(meaning)를 방해할 것입니다. 작성자는 그러한 참조들을 사용하는 것보다 삽화를 참조하기 위해 레이블들을 사용하여 페이지가 페이지의 의미(meaning)에 영향을 주는 것 없이 쉽게 재 스타일링 될 수 있도록 하는 것이 권장됩니다.

figure의 후손 figcaption가 있다면, 이것은 figure 요소(element)의 콘텐츠의 캡션을 나타냅니다. 자식 figcaption 요소(element)가 없다면, 캡션이 존재하지 않습니다.

figure 요소(element)의 콘텐츠는 주변 흐름의 일부입니다. 페이지의 목적이 삽화를, 예를 들어 이미지 공유 사이트에서 사진을, 보여주는 것이라면, figurefigcaption 요소(element)들이 그 삽화에 대한 캡션을 명시적으로 제공하는데 사용될 수 있습니다. 단지 살짝 연관되거나 주변 흐름보다는 별도의 목적을 제공하는 콘텐트를 위해서는 aside 요소(element)가 사용되어야(should) 합니다 (그리고 그것이 figure를 감쌀 수 있습니다). 예를 들어, article에서 콘텐트를 반복하는 인용구(pull quote)는 콘텐트의 일부가 아니라, 그것은 독자를 유인하거나 주요 주제들을 강조하는 목적에 대한 콘텐트의 반복이기 때문에, figure 안에 보다는 aside 안이 더 적절할 것입니다.

이 예제는 코드 나열을 마크업하기 위한 figure 요소(element)를 보여줍니다.
<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
  <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
  <pre><code>interface PrimaryCore {
  boolean verifyDataLine();
  void sendData(in sequence&lt;byte> data);
  void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>
여기 페이지의 주요 콘텐트인 사진을 (갤러리에서 처럼) 마크업 하기 위한 figure 요소(element)를 볼 수 있습니다.
<!DOCTYPE HTML>
<title>Bubbles at work — My Gallery™</title>
<figure>
  <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
            latest project intently.">
  <figcaption>Bubbles at work</figcaption>
</figure>
<nav><a href="19414.html">Prev</a><a href="19416.html">Next</a></nav>
이 예에서, 삽화가 아닌 이미지 뿐만 아니라 삽화인 이미지와 비디오를 볼 수 있습니다. 첫 번째 이미지는 사실상 예제의 두 번째 문장의 일부이므로 그것은 독립적인 개체가 아니며, 따라서 figure가 적절하지 않을 것입니다.
<h2>Malinko’s comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
  <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
  <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
  <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
  <video src="ex-b.mov"></video>
  <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.
여기, 시의 일부가 figure를 사용하여 마크업 됩니다.
<figure>
  <p>'Twas brillig, and the slithy toves<br>
  Did gyre and gimble in the wabe;<br>
  All mimsy were the borogoves,<br>
  And the mome raths outgrabe.</p>
  <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>
성(castle)에 대하여 논하는 매우 큰 저작물의 일부일 수 있는 이 예에서, 중첩된 figure 요소(element)들은 그룹 캡션과 그룹 내 각 삽화에 대한 개별 캡션들 모두를 제공하는데 사용됩니다:
<figure>
  <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
  <figure>
    <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
    <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
  </figure>
  <figure>
    <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
    <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
  </figure>
  <figure>
    <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
    <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
  </figure>
</figure>
앞선 예는 다음과 같이 좀 더 간결하게 작성될 수 있습니다 (중첩된 figure/figcaption 쌍들의 위치에 title 속성(attribute)들을 사용하여):
<figure>
  <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
  <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
  <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
  <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>
삽화는 종종 콘텐트로부터 암묵적으로만 참조됩니다:
<article>
  <h1>Fiscal negotiations stumble in Congress as deadline nears</h1>
  <figure>
    <img src="obama-reid.jpeg" alt="Obama and Reid sit together smiling in the Oval Office.">
    <figcaption>Barack Obama and Harry Reid. White House press photograph.</figcaption>
  </figure>
  <p>Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
  grasping for a way to reopen the government and raise the country’s borrowing authority with a
  Thursday deadline drawing near.</p>
  ...
</article>

4.4.12. figcaption 요소(element)

카테고리:
없음.
이 요소(element)가 사용될 수 있는 컨텍스트:
figure 요소(element)의 후손으로.
콘텐트 모델:
흐름(flow) 콘텐트.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
Any role value.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
HTMLElement를 사용.

figcaption 요소(element)는 figcaption 요소(element)의 부모 figure 요소(element)의 나머지 콘텐츠가 있다면 그에 대한 캡션이나 범례를 나타냅니다.

4.4.13. main 요소(element)

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

main 요소(element)는 문서나 어플리케이션의 <{body]>의 주요 콘텐트를 나타냅니다.

main 요소(element)는 섹션화(sectioning) 콘텐트가 아니며 문서 개요(outline)에 영향을 가지지 않습니다.

문서의 주요 콘텐트 영역은 그 문서에 유일하고, 사이트 탐색 링크들, 저작권 정보, 사이트 로고와 배너 및 검색 양식들 (문서나 어플리케이션의 주요 기능이 검색 양식의 것이 아닌 한) 같은 문서들의 세트에 걸쳐 반복되는 콘텐트를 제외한 콘텐트를 포함합니다.

작성자들은 article, aside, footer, header, nav 요소(element)의 후손으로 main 요소(element)를 포함하지 않아야(must) 합니다.

main 요소(element)는 문서나 어플리케이션의 하위 섹션들의 주요 콘텐트 영역을 식별하기 위한 사용에 적절하지 않습니다. 가장 간단한 해결책은 하위 섹션의 주요 콘텐트를 전혀 마크업 하지 않고 단지 암묵적으로 남겨두되 작성자가 적절한 §4.4 섹션화(sectioning) 콘텐트섹션화(sectioning) 콘텐트를 사용할 수 있도록 하는 것입니다.

다음 예에서, 주요 콘텐트가 main 요소(element)의 사용에 의해 식별되는 스케이트보드들에 대한 (웹 페이지의 주요 주제) 2개의 아티클을 볼 수 있습니다.

<!-- other content -->

<main>

  <h1>Skateboards</h1>
  <p>The skateboard is the way cool kids get around</p>

  <article>
    <h2>Longboards</h2>
    <p>Longboards are a type of skateboard with a longer
    wheelbase and larger, softer wheels.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Electric Skateboards</h2>
    <p>These no longer require the propelling of the skateboard
    by means of the feet; rather an electric motor propels the board,
    fed by an electric battery.</p>
    <p>... </p>
    <p>... </p>
  </article>

</main>

<!-- other content -->

여기 졸업식 프로그램 메인 콘텐트 섹션은 main 요소(element)의 사용에 의해 정의됩니다. 이 예에서 main 요소(element)가 메인 콘텐트의 하위 섹션들로의 링크들로 구성되는 nav 요소(element)를 포함하는 것에 주목하세요.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Graduation Ceremony Summer 2022</title>
  </head>
  <body>

    <header>The Lawson Academy:
    <nav>
      <ul>
        <li><a href="courses.html">Courses</a></li>
        <li><a href="fees.html">Fees</a></li>
        <li><a>Graduation</a></li>
      </ul>
    </nav>
    </header>

    <main>

      <h1>Graduation</h1>

      <nav>
        <ul>
          <li><a href="#ceremony">Ceremony</a></li>
          <li><a href="#graduates">Graduates</a></li>
          <li><a href="#awards">Awards</a></li>
        </ul>
      </nav>

      <h2 id="ceremony">Ceremony</h2>
      <p>Opening Procession</p>
      <p>Speech by Valedictorian</p>
      <p>Speech by Class President</p>
      <p>Presentation of Diplomas</p>
      <p>Closing Speech by Headmaster</p>

      <h2 id="graduates">Graduates</h2>
      <ul>
        <li>Eileen Williams</li>
        <li>Andy Maseyk</li>
        <li>Blanca Sainz Garcia</li>
        <li>Clara Faulkner</li>
        <li>Gez Lemon</li>
        <li>Eloisa Faulkner</li>
      </ul>

      <h2 id="awards">Awards</h2>
      <ul>
        <li>Clara Faulkner</li>
        <li>Eloisa Faulkner</li>
        <li>Blanca Sainz Garcia</li>
      </ul>

    </main>

    <footer> Copyright 2012 B.lawson</footer>

  </body>
</html>

다음 예에서, headerfooter는 웹사이트에 일반적이고 main의 콘텐트에 따라 다르지 않기 때문에 둘 모두 main 요소(element) 밖에 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Great Dogs for Families</title>
  </head>
  <body>

    <header>
      <h1>The Border Terrier</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="health.html">Health</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>Welcome!</h2>
      <p>This site is all about the Border Terrier, the best breed of dog
      that there is!</p>
    </main>
    <footer>
      <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small>
    </footer>

  </body>
</html>

여기, 동일한 일반적인 headerfooter 요소(element)들이 main 밖에 남아있고, 추가적인 header 요소(element)가 관련된 제목(heading)과 페이지 내의 내비게이션을 포함함에 따라 그 콘텐트가 main 내의 콘텐트에 관련되기 때문에 main 요소(element) 안에 있습니다. 페이지 내의 내비게이션은 main 요소(element) 내에 또 존재하는 footer 안에 반복됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Great Dogs for Families</title>
  </head>
  <body>

    <header>
      <h1>The Border Terrier</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="health.html">Health</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <header>
          <h2>About</h2>
          <nav>
            <ul>
              <li><a href="#basic">Basic</a></li>
              <li><a href="#app">Appearance</a></li>
              <li><a href="#temp">Temperament</a></li>
            </ul>
          </nav>
        </header>
        <section id="basic">
          <h3>Basic Information</h3>
          <p>The Border Terrier is a small, rough-coated breed of
          dog of the terrier group, originally bred as fox and vermin
          hunters. [...]</p>
        </section>
        <section id="app">
          <h3>Appearance</h3>
          <p>Identifiable by their otter-shaped heads, Border Terriers
          have a broad skull and short (although many be fairly long),
          strong muzzle with a scissors bite. [...]</p>
        </section>
        <section id="temp">
          <h3>Temperament</h3>
          <p>Though sometimes stubborn and strong willed, border terriers
          are, on the whole very even tempered, and are friendly and rarely
          aggressive. [...] </p>
        </section>
        <footer>
          <a href="#basic">Basic</a> -
          <a href="#app">Appearance</a> -
          <a href="#temp">Temperament</a>
        </footer>
      </section>
    </main>
    <footer>
      <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small>
    </footer>

  </body>
</html>

이 예는 aside를 포함한다는 것을 제외하고 이전 것과 대체로 동일합니다. aside의 콘텐트는 모든 콘텐트가 보더 테리어에 대한 main 요소(element) 내의 콘텐트에 관련된 것으로 간주되므로, asidemain 요소(element) 안에 배치됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Great Dogs for Families</title>
  </head>
  <body>

    <header>
      <h1>The Border Terrier</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="health.html">Health</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <header>
          <h2>About</h2>
          <nav>
            <ul>
              <li><a href="#basic">Basic</a></li>
              <li><a href="#app">Appearance</a></li>
              <li><a href="#temp">Temperament</a></li>
            </ul>
          </nav>
        </header>
        <section id="basic">
          <h3>Basic Information</h3>
          <p>The Border Terrier is a small, rough-coated breed of
          dog of the terrier group, originally bred as fox and vermin
          hunters. [...]</p>
        </section>
        <section id="app">
          <h3>Appearance</h3>
          <p>Identifiable by their otter-shaped heads, Border Terriers
          have a broad skull and short (although many be fairly long),
          strong muzzle with a scissors bite. [...]</p>
        </section>
        <section id="temp">
          <h3>Temperament</h3>
          <p>Though sometimes stubborn and strong willed, border terriers
          are, on the whole very even tempered, and are friendly and rarely
          aggressive. [...] </p>
        </section>
        <aside>
          <h3>History</h3>
          <p>The Border Terrier originates in, and takes its name from the
          Scottish borders. [...] </p>
        </aside>
        <footer>
          <a href="#basic">Basic</a> -
          <a href="#app">Appearance</a> -
          <a href="#temp">Temperament</a>
        </footer>
      </section>
    </main>
    <footer>
      <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small>
    </footer>

  </body>
</html>

다음 예에서, 광고를 포함하는 두 aside 요소(element)들은 그들의 콘텐트가 main 내의 콘텐트에 따라 다르지 않기 때문에 main 요소(element) 밖에 배치되었습니다. 이 aside들은 headerfooter에서 보여진 것과 같이 일반적인 것들이기 때문에, 모든 페이지에 존재할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Great Dogs for Families</title>
  </head>
  <body>

    <header>
      <h1>The Border Terrier</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="health.html">Health</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>Welcome!</h2>
      <p>This site is all about the Border Terrier, the best breed of dog
      that there is!</p>
    </main>
    <aside class="advert">
      <h2>Border Farm Breeders</h2>
      <p>We are a certified breeder of Border Terriers, contact us at...</p>
    </aside>
    <aside class="advert">
      <h2>Grumpy’s Pet Shop</h2>
      <p>Get all your pet’s needs at our shop!</p>
    </aside>

    <footer>
      <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small>
    </footer>

  </body>
</html>

4.4.14. div 요소(element)

카테고리:
흐름(flow) 콘텐트.
분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
흐름(flow) 콘텐트가 예상 되는 곳.
콘텐트 모델:
흐름(flow) 콘텐트.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:
Any role value.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
interface HTMLDivElement : HTMLElement {};

div 요소(element)는 전혀 특별한 의미(meaning)를 가지지 않습니다. 그것은 자신의 자식을 나타냅니다. 그것은 연속적인 요소(element)들의 그룹에 공통된 의미론(semantics)을 마크업 하기 위해 class, lang, title 속성(attribute)들을 가지고 사용될 수 있습니다.

작성자들은 다른 요소(element)가 적절하지 않은 경우에 대해, 최후의 수단의 요소(element)로 div 요소(element)를 간주하도록 강력하게 권장됩니다. div 요소(element) 대신 좀 더 적절한 요소(element)들의 사용은 독자들에 대한 더 나은 접근성과 작성자들에 대한 쉬운 유지보수로 이어집니다.

예를 들어, article를 사용하여 마크업되는 블로그 게시물, section을 사용하는 챕터, nav를 사용하여 지원된 페이지의 내비게이션, fieldset을 사용하는 양식 장치들(form contorls)의 그룹입니다.

반면에, div 요소(element)들은 스타일 목적들이나 비슷한 방법으로 모두 주석(annotate)이 달리는 섹션 내의 여러 문단들을 감싸는데 유용할 수 있습니다. 다음 예에서, 별도의 두 문단 요소(element)들에 언어를 설정하는 대신, 한 번에 두 개의 문단의 언어를 설정하기 위한 방법으로 사용된 div 요소(element)들이 보여집니다:

<article lang="en-US">
  <h2>My use of language and my cats</h2>
  <p>My cat’s behavior hasn’t changed much since her absence, except
  that she plays her new physique to the neighbors regularly, in an
  attempt to get pets.</p>
  <div lang="en-GB">
  <p>My other cat, colored black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognizes that
  their flat is a mirror image of ours.</p>
  <p>Hm, I just noticed that in the last paragraph I used British
  English. But I’m supposed to write in American English. So I
  shouldn’t say "pavement" or "flat" or "color"...</p>
  </div>
  <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>