명세 전체 차례
    1. 4.5 그룹 컨텐츠
      1. 4.5.1 p 요소
      2. 4.5.2 hr 요소
      3. 4.5.3 pre 요소
      4. 4.5.4 blockquote 요소
      5. 4.5.5 ol 요소
      6. 4.5.6 ul 요소
      7. 4.5.7 li 요소
      8. 4.5.8 dl 요소
      9. 4.5.9 dt 요소
      10. 4.5.10 dd 요소
      11. 4.5.11 figure 요소
      12. 4.5.12 figcaption 요소
      13. 4.5.13 div 요소

4.5 그룹 컨텐츠

4.5.1 p 요소

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

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

Where flow content is expected.

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

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

The p element represents a paragraph.

문단은 보통 시각 매체에서 빈 줄을 통해 구분되는 텍스트 블럭으로 표현되지만, 스타일 시트나 사용자 에이전트가 문단 경계들을 다른 방법 - 예를 들어 인라인 문단부호(¶)를 사용해서 - 으로 표현한다 해도 명세의 요구사항에 어긋나는 것은 아닙니다.

While paragraphs are usually represented in visual media by blocks of text that are physically separated from adjacent blocks through blank lines, a style sheet or user agent would be equally justified in presenting paragraph breaks in a different manner, for instance using inline pilcrows (¶).

다음 예제는 올바른 마크업입니다.

The following examples are conforming HTML fragments:

<p>작은 고양이가 카펫 위에 천천히 앉았습니다.
이 고양이는 나중에 이 일을 회고하며
'cat sat on the mat'이라 말했을 겁니다..</p>
<fieldset>
  <legend>개인 정보</legend>
  <p>
    <label>이름: <input name="n"></label>
    <label><input name="anon" type="checkbox"> 다른 사용자에게는 숨기십시오.</label>
  </p>
  <p><label>주소: <textarea name="a"></textarea></label></p>
</fieldset>
<p>Femley 씨가 만든 예제가 있었습니다.<br>
Femley 씨의 마크업 실력은 좀 의심스러웠지요.<br>
유효성 검사기가 불평을 쏟아냈고,<br>
저자는 매우 고통스러워했습니다.<br>
마크업에 있는 에러에 운율을 맞추느라고요.</p>

더 적합한 요소가 있으면 p 요소 대신 해당 요소를 써야 합니다.

The p element should not be used when a more specific element is more appropriate.

다음 예제는 기술적으로는 정확합니다.

The following example is technically correct:

<section>
 <!-- ... -->
 <p>최종 수정일: 2001-04-23</p>
 <p>저자: fred@example.com</p>
</section>

하지만 이렇게 마크업하는 편이 더 좋습니다.

However, it would be better marked-up as:

<section>
 <!-- ... -->
 <footer>최종 수정일: 2001-04-23</footer>
 <address>저자: fred@example.com</address>
</section>

또는 이렇게 할 수도 있습니다.

Or:

<section>
 <!-- ... -->
 <footer>
  <p>최종 수정일: 2001-04-23</p>
  <address>저자: fred@example.com</address>
 </footer>
</section>

4.5.2 hr 요소

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

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

Where flow content is expected.

이 요소가 포함할 수 있는 것Content model:
이 요소는 비어 있어야 합니다.Empty.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
interface HTMLHRElement : HTMLElement {};

hr 요소는 문단 레벨에서 주제의 분리를 나타냅니다. 예를 들어 씬 전환 또는 참고서의 섹션 내에서 다른 화제로의 전환 등입니다.

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

다음은 가상의 프로젝트 설명서에서 발췌한 마크업입니다. 각 섹션은 hr 요소로 섹션 내부 토픽을 분리했습니다.

The following fictional extract from a project manual shows two sections that use the hr element to separate topics within the section.

<section>
  <h1>의사 소통</h1>
  <p>의사 소통에는 여러 방법이 있습니다. 이 섹션은 프로젝트에
  사용한 의사 소통 방법 중 중요한 몇 가지를 다룹니다.</p>
  <hr>
  <p>의사 소통의 돌은 한 쌍으로 존재하며 신비한 속성이 있습니다.</p>
  <ul>
    <li>단독으로 쓰면 생각을 양쪽으로 전달합니다.</li>
    <li>다른 장치에서 쓰면 한쪽의 의식을 다른 쪽에 전달합니다.</li>
    <li>한 쌍을 각각 서로 다른 장치에서 쓰면 양쪽의 의식을 교환합니다.</li>
  </ul>
  <hr>
  <p>라디오는 미터 이상의 파장의 전자기 스펙트럼을 이용합니다.</p>
  <hr>
  <p>Signal flare는 나노미터 파장의 전자기 스펙트럼을 이용합니다.</p>
</section>
<section>
  <h1>음식</h1>
  <p>이 프로젝트에서는 모든 음식을 배급합니다.</p>
  <dl>
    <dt>감자</dt>
    <dd>하루 두 개</dd>
    <dt>수프</dt>
    <dd>하루 한 그릇</dd>
  </dl>
  <hr>
  <p>요리사들이 순번에 따라 요리합니다.</p>
</section>

section 요소와 h1 요소가 테마의 변화를 암시하므로 섹션 사이에는 hr 요소가 필요하지 않습니다.

There is no need for an hr element between the sections themselves, since the section elements and the h1 elements imply thematic changes themselves.

다음 예제는 Peter F. Hamilton의 Pandora's Star에서 발췌했습니다. 씬 전환 앞에 두 개의 문단, 씬 전환 후에 하나의 문단이 있습니다. 인쇄된 매체에서는 씬 전환을 중앙에 별표를 포함한 공백으로 나타났는데 여기에서는 hr 요소를 사용하여 나타냈습니다.역주

The following extract from Pandora's Star by Peter F. Hamilton shows two paragraphs that precede a scene change and the paragraph that follows it. The scene change, represented in the printed book by a gap containing a solitary centered star between the second and third paragraphs, is here represented using the 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 Commonwearth 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 요소는 문서의 개요에는 영향을 미치지 않습니다.

The hr element does not affect the document's outline.

4.5.3 pre 요소

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

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

Where flow content is expected.

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

pre 요소는 형식화된 텍스트 블럭을 나타냅니다. 그러한 블럭에서는 요소가 아니라 인쇄형태가 구조를 표현합니다.

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

HTML 문법에서 pre 요소 직후에 나타나는 newline 문자는 잘립니다.

In the HTML syntax, a leading newline character immediately following the pre element start tag is stripped.

pre 요소를 사용할 수 있는 몇가지 예는 다음과 같습니다.

Some examples of cases where the pre element could be used:

리더기나 점자 출력기 처럼 pre 요소의 형식을 지킬 수 없는 장치에서 pre 요소가 어떻게 표현될지 고려해 보길 권합니다. 특수문자로 그린 그림이라면 텍스트로 이루어진 설명 같은 대체 표현으로 문서를 읽는 이들에게 좀 더 높은 접근성을 제공할 수 있습니다.

Authors are encouraged to consider how preformatted text will be experienced when the formatting is lost, as will be the case for users of speech synthesizers, braille displays, and the like. For cases like ASCII art, it is likely that an alternative presentation, such as a textual description, would be more universally accessible to the readers of the document.

code 요소와 함께 pre 요소를 사용해서 컴퓨터 코드의 블럭을 표현할 수 있습니다. pre 요소와 samp 요소를 사용해서 코드의 결과물을 표현할 수 있습니다. pre 요소와 kbd 요소를 사용해서 사용자의 입력을 표현할 수 있습니다.

To represent a block of computer code, the pre element can be used with a code element; to represent a block of computer output the pre element can be used with a samp element. Similarly, the kbd element can be used within a pre element to indicate text that the user is to enter.

A newline in a pre element should separate paragraphs for the purposes of the Unicode bidirectional algorithm. This requirement may be implemented indirectly through the style layer. For example, an HTML+CSS user agent could implement these requirements by implementing the CSS 'unicode-bidi' property. [BIDI] [CSS]

컴퓨터 코드 샘플입니다.

In the following snippet, a sample of computer code is presented.

<p><code>Panel</code> 생성자</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

pre 요소 안에 sampkbd 요소를 써서 Zork I 의 한 세션을 나타냈습니다.

In the following snippet, samp and kbd elements are mixed in the contents of a pre element to show a session of Zork I.

<pre>
  <samp>당신은 현관을 널빤지로 덧댄, 크고 흰 집 옆 들판에
  서 있습니다. 작은 우편함도 있습니다.</samp>

  <kbd>우편함을 연다</kbd>

  <samp>우편함을 열었더니 광고 전단이 나왔습니다.</samp>
</pre>

시의 고유한 부분인 독특한 포맷을 유지하기 위해 pre 요소를 사용했습니다.

The following shows a contemporary poem that uses the pre element to preserve its unusual formatting, which forms an intrinsic part of the poem itself.

<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.5.4 blockquote 요소

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

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

Where flow content is expected.

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

q 요소 역시 HTMLQuoteElement 인터페이스를 사용합니다.

The HTMLQuoteElement interface is also used by the q element.

blockquote 요소는 다른 소스로부터 가져온 인용 섹션을 나타냅니다.

The blockquote element represents a section that is quoted from another source.

blockquote 요소의 내용은 반드시 다른 소스로부터 가져온 것이어야 하며, 주소를 나타낼 수 있다면 cite 속성으로 표시할 수 있습니다.

Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

cite 속성의 값은 반드시 유효한, 앞뒤로 공백을 허용하는 URL이어야 합니다. 이에 대응하는 링크를 얻을 때는 속성의 값을 blockquote 요소에 대해 상대적으로 해석해야 합니다. 사용자 에이전트는 사용자가 그러한 링크를 따라갈 수 있도록 해야 합니다.

If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents should allow users to follow such citation links.

The cite IDL attribute must reflect the element's cite content attribute.

blockquote 안에서 cite를 사용하는 방법입니다.

This next example shows the use of cite alongside blockquote:

<p>그의 다음 작품 이름은 <cite>Sonnet 130</cite>이었는데 이 이름은 적절했습니다.</p>
<blockquote cite="http://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 요소를 사용했습니다.

This example shows how a forum post could use blockquote to show what post a user is replying to. The article element is used for each post, to mark up the threading.

<article>
 <h1><a href="http://bacon.example.com/?blog=109431">쇠지렛대 위의 베이컨</a></h1>
 <article>
  <header><strong>t3yw</strong>1시간 12분 전</header>
  <p>일각고래가 그걸 좋아한다는데 걸겠어.</p>
  <footer><a href="?pid=29578">permalink</a></footer>
  <article>
   <header><strong>greg</strong>1시간 8분 전</header>
   <blockquote><p>일각고래가 그걸 좋아한다는데 걸겠어.</p></blockquote>
   <p>이봐 일각고래는 베이컨을 안 먹는다구.</p>
   <footer><a href="?pid=29579">permalink</a></footer>
   <article>
    <header><strong>t3yw</strong>45분 전</header>
    <blockquote>
     <blockquote><p>일각고래가 그걸 좋아한다는데 걸겠어.</p></blockquote>
     <p>이봐 일각고래는 베이컨을 안 먹는다구.</p>
    </blockquote>
    <p>자네는 이제 일각고래에게 마법사 모자와 망토가 없다고 떠들어대겠구만!</p>
    <footer><a href="?pid=29580">permalink</a></footer>
    <article>
     <article>
      <header><strong>boing</strong>55분 전</header>
      <p>빌어먹을! 난 쥐보다 일각고래가 더 싫어.</p>
      <footer><a href="?pid=29581">permalink</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong>23분 전</header>
   <blockquote><p>일각고래가 그걸 좋아한다는데 걸겠어.</p></blockquote>
   <p>일각고래는 바나나 껍질 벗기는 것도 좋아할 것 같은데!</p>
   <footer><a href="?pid=29582">permalink</a></footer>
  </article>
 </article>
</article>

이 예제는 짧은 코드에서 blockquote 요소를 사용하는 방법을 보여줍니다. blockquote 요소 안에 꼭 p 요소를 써야 하는 건 아닙니다.

This example shows the use of a blockquote for short snippets, demonstrating that one does not have to use p elements inside blockquote elements:

<p>그는 자신의 "교훈" 목록을 다음과 같이 시작했습니다.</p>
<blockquote>누구라도 자신의 입장을 다른 사람이 이해할
거라고 가정해서는 안되며, 그 자체에 장점이 있다고
생각해야 한다.</blockquote>
<p>"교훈" 목록에는 비슷한 이야기가 몇가지 더 있었고 이렇게 끝났습니다.</p>
<blockquote>마지막으로, 어떤 순간에서든 협상이 깨질
위험에 대비하고 있어야 하며 가능성이란 단어에 현혹되어선
안된다.</blockquote>
<p>이제 이 문제들을 다루겠습니다...

대화를 나타내기에 적합한 마크업은 이후 섹션에 나타날 겁니다. blockquote 요소와 cite 요소는 대화를 마크업 하기에 적절하지 않습니다.

Examples of how to represent a conversation are shown in a later section; it is not appropriate to use the cite and blockquote elements for this purpose.

4.5.5 ol 요소

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

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

Where flow content is expected.

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

0개 이상의 li 요소

Zero or more li elements.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
reversed
start
type
DOM 인터페이스DOM interface:
interface HTMLOListElement : HTMLElement {
           attribute boolean reversed;
           attribute long start;
           attribute DOMString type;
};

ol 요소는 의도적으로 순서를 갖게끔 만든 목록을 나타냅니다. 이러한 순서를 바꾸면 문서의 의미도 바뀝니다.

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

ol 요소의 자식 노드인 li 요소가 트리 순서로 목록을 구성합니다.

The items of the list are the li element child nodes of the ol element, in tree order.

reversed 속성은 불리언 속성입니다. 속성을 사용하면 목록은 역순(..., 3, 2, 1)입니다. 속성을 사용하지 않았다면 목록은 정순(1, 2, 3, ...)입니다.

The reversed attribute is a boolean attribute. If present, it indicates that the list is a descending list (..., 3, 2, 1). If the attribute is omitted, the list is an ascending list (1, 2, 3, ...).

start 속성의 값은 유효한 정수여야 합니다. 이 값은 목록 중 첫 번째 것의 순번이 됩니다.

The start attribute, if present, must be a valid integer giving the ordinal value of the first list item.

If the start attribute is present, user agents must parse it as an integer, in order to determine the attribute's value. The default value, used if the attribute is missing or if the value cannot be converted to a number according to the referenced algorithm, is 1 if the element has no reversed attribute, and is the number of child li elements otherwise.

The first item in the list has the ordinal value given by the ol element's start attribute, unless that li element has a value attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that value attribute.

Each subsequent item in the list has the ordinal value given by its value attribute, if it has one, or, if it doesn't, the ordinal value of the previous item, plus one if the reversed is absent, or minus one if it is present.

마커의 종류가 중요하다면(예를 들어 아이템이 그 숫자/글자에 의해 참조됩니다) type 속성으로 마커의 종류를 지정할 수 있습니다. 속성을 사용했다면 그 값은 다음 테이블에서 첫 열에 있는 문자와 대소문자 구분하여 일치해야 합니다. 두 번째 열의 상태가 각 키워드에 대응합니다. 대응하지 않는 키워드를 사용했거나 속성을 사용하지 않았다면 기본값은 decimal 상태입니다.

The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g. because items are to be referenced by their number/letter). The attribute, if specified, must have a value that is a case-sensitive match for one of the characters given in the first cell of one of the rows of the following table. The type attribute represents the state given in the cell in the second column of the row whose first cell matches the attribute's value; if none of the cells match, or if the attribute is omitted, then the attribute represents the decimal state.

Keyword State Description Examples for values 1-3 and 3999-4001
1 (U+0031) decimal Decimal numbers 1. 2. 3. ... 3999. 4000. 4001. ...
a (U+0061) lower-alpha Lowercase latin alphabet a. b. c. ... ewu. ewv. eww. ...
A (U+0041) upper-alpha Uppercase latin alphabet A. B. C. ... EWU. EWV. EWW. ...
i (U+0069) lower-roman Lowercase roman numerals i. ii. iii. ... mmmcmxcix. i̅v̅. i̅v̅i. ...
I (U+0049) upper-roman Uppercase roman numerals I. II. III. ... MMMCMXCIX. I̅V̅. I̅V̅I. ...

User agents should render the items of the list in a manner consistent with the state of the type attribute of the ol element. Numbers less than or equal to zero should always use the decimal system regardless of the type attribute.

For CSS user agents, a mapping for this attribute to the 'list-style-type' CSS property is given in the rendering section (the mapping is straightforward: the states above have the same names as their corresponding CSS values).

The reversed, start, and type IDL attributes must reflect the respective content attributes of the same name. The start IDL attribute has the same default as its content attribute.

다음 마크업은 순서가 중요한 목록이므로 ol 요소가 적당합니다. 이 목록을 ul 섹션의 목록과 비교해 보십시오.

The following markup shows a list where the order matters, and where the ol element is therefore appropriate. Compare this list to the equivalent list in the ul section to see an example of the same items using the ul element.

<p>나는 다음 나라에서 살았습니다 (살았던 순서대로 썼습니다).</p>
<ol>
 <li>스위스
 <li>영국
 <li>미국
 <li>노르웨이
</ol>

목록의 순서를 바꾸면 문서의 의미도 바뀜을 눈여겨보십시오. 다음 예제에서는 처음 두 아이템의 순서를 바꿨으므로 저자가 태어난 국가가 바뀌었습니다. 역주

Note how changing the order of the list changes the meaning of the document. In the following example, changing the relative order of the first two items has changed the birthplace of the author:

<p>나는 다음 나라에서 살았습니다 (살았던 순서대로 썼습니다).</p>
<ol>
 <li>영국
 <li>스위스
 <li>미국
 <li>노르웨이
</ol>

4.5.6 ul 요소

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

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

Where flow content is expected.

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

0개 이상의 li 요소

Zero or more li elements.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
interface HTMLUListElement : HTMLElement {};

ul 요소는 순서가 중요하지 않은 목록을 나타냅니다. 즉 그 순서를 바꿔도 문서의 의미가 바뀌지는 않습니다.

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

목록의 아이템은 li 요소입니다.

The items of the list are the li element child nodes of the ul element.

다음 마크업은 순서가 중요하지 않은 목록을 나타내므로 ul 요소가 적합합니다. 이 목록을 ol 섹션의 것과 비교해 보십시오.

The following markup shows a list where the order does not matter, and where the ul element is therefore appropriate. Compare this list to the equivalent list in the ol section to see an example of the same items using the ol element.

<p>나는 다음 나라에서 살았습니다.</p>
<ul>
 <li>노르웨이
 <li>스위스
 <li>영국
 <li>미국
</ul>

목록의 순서를 바꾸어도 문서의 의미가 달라지지 않음을 눈여겨 보십시오. 위 예제 항목은 abc 순서로 되어 있습니다만, 아래의 순서는 2007년 현재 수익의 순서대로 되어 있습니다. 문서의 의미는 전혀 바뀌지 않습니다. 역주

Note that changing the order of the list does not change the meaning of the document. The items in the snippet above are given in alphabetical order, but in the snippet below they are given in order of the size of their current account balance in 2007, without changing the meaning of the document whatsoever:

<p>나는 다음 나라에서 살았습니다.</p>
<ul>
 <li>스위스
 <li>노르웨이
 <li>영국
 <li>미국
</ul>

4.5.7 li 요소

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

ol 요소의 내부

Inside ol elements.

ul 요소의 내부

Inside ul elements.

Inside menu elements.
이 요소가 포함할 수 있는 것Content model:
플로우 컨텐츠Flow content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes

ol 요소의 내부에서 사용되었을 경우: value

If the element is a child of an ol element: value

DOM 인터페이스DOM interface:
interface HTMLLIElement : HTMLElement {
           attribute long value;
};

li 요소는 목록의 아이템을 나타냅니다. li 요소의 부모 요소가 ol 요소거나 ul 요소, menu 요소라면 li 요소는 부모 요소에서 정한 바에 따라 그 목록의 아이템이 됩니다. 그렇지 않다면 목록 아이템은 다른 li 요소와 목록 관계를 갖지 않습니다.

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

부모 요소가 ol 요소인 경우, li 요소는 순서있는 값을 가집니다.

If the parent element is an ol element, then the li element has an ordinal value.

value 속성의 값은 반드시 유효한 정수여야 하며 이 값이 목록 아이템의 순번이 됩니다.

The value attribute, if present, must be a valid integer giving the ordinal value of the list item.

If the value attribute is present, user agents must parse it as an integer, in order to determine the attribute's value. If the attribute's value cannot be converted to a number, the attribute must be treated as if it was absent. The attribute has no default value.

The value attribute is processed relative to the element's parent ol element (q.v.), if there is one. If there is not, the attribute has no effect.

The value IDL attribute must reflect the value of the value content attribute.

상위 10개의 영화가 (역순으로) 나열되어 있습니다. figure 요소와 figcaption 요소를 사용해서 제목을 마크업한 방법을 눈여겨 보십시오.

The following example, the top ten movies are listed (in reverse order). Note the way the list is given a title by using a figure element and its 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 요소의 reversed 속성을 이용해서 다음과 같이 재작성할 수도 있습니다.

The markup could also be written as follows, using the reversed attribute on the ol element:

<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 요소가 menu 요소의 자식이면서 또한 command를 정의하는 자식요소를 포함한다면, li 요소는 command를 정의하는 자식요소 중 첫 번째와 마찬가지로 :enabled:disabled 가상클래스를 통해 선택할 수 있습니다.

If the li element is the child of a menu element and itself has a child that defines a command, then the li element will match the :enabled and :disabled pseudo-classes in the same way as the first such child element does.

If the li element is the child of a menu element and itself has a child that defines a command, then the li element will match the :enabled and :disabled pseudo-classes in the same way as the first such child element does.

4.5.8 dl 요소

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

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

Where flow content is expected.

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

dt 요소 뒤에 하나 이상의 dd 요소로 구성된 그룹을 0개 이상 포함할 수 있습니다.

Zero or more groups each consisting of one or more dt elements followed by one or more dd elements.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
interface HTMLDListElement : HTMLElement {};

dl 요소는 0개 이상의 이름-값 그룹(정의 목록)을 나타냅니다. 각 그룹은 반드시 하나 이상의 이름(dt 요소)와 그에 뒤따르는 하나 이상의 값(dd 요소)를 포함하여야 합니다. dl 요소 하나에 같은 이름의 dt 요소를 중복해서 쓸 수 없습니다.

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements). Within a single dl element, there should not be more than one dt element for each name.

이름-값 그룹은 단어와 정의일 수도 있고, 메타데이터 주제와 값일 수도 있습니다. 이름-값 데이터기만 하면 됩니다.

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

그룹 내의 값은 대체 가능합니다; 여러 문단이 있다면 값 하나를 구성한다면 그러한 문단들은 반드시 같은 dd 요소 안에 있어야 합니다.

The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.

그룹 목록의 순서와 각 그룹 내의 이름-값의 순서가 중요할 수도 있습니다.

The order of the list of groups, and of the names and values within each group, may be significant.

If a dl element is empty, it contains no groups.

If a dl element contains non-whitespace text nodes, or elements other than dt and dd, then those elements or text nodes do not form part of any groups in that dl.

If a dl element contains only dt elements, then it consists of one group with names but no values.

If a dl element contains only dd elements, then it consists of one group with values but no names.

If a dl element starts with one or more dd elements, then the first group has no associated name.

If a dl element ends with one or more dt elements, then the last group has no associated value.

When a dl element doesn't match its content model, it is often due to accidentally using dd elements in the place of dt elements and vice versa. Conformance checkers can spot such mistakes and might be able to advise authors how to correctly use the markup.

항목("Authors") 한 개가 값("John", "Luke") 두 개와 연결되어 있습니다.

In the following example, one entry ("Authors") is linked to two values ("John" and "Luke").

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

정의 한 개가 단어 두 개에 연결되어 있습니다.

In the following example, one definition is linked to two terms.

<dl>
  <dt lang="en-US"> <dfn>color</dfn> </dt>
  <dt lang="en-GB"> <dfn>colour</dfn> </dt>
  <dd> 보이는 모습을 세 가지로 필터링해서 인식하는
시각 구조의 능력을 통해 얻는 (인간의) 감각 </dd>
</dl>

dl 요소를 사용해서 정렬된 메타데이터를 마크업하는 방법을 묘사합니다. 예제의 마지막에 있는 그룹은 메타데이터 제목 두 개("Authors", "Editors")가 값 두 개("Robert Rothman", "Daniel Jackson")와 연결되어 있습니다.

The following example illustrates the use of the dl element to mark up metadata of sorts. At the end of the example, one group has two metadata labels ("Authors" and "Editors") and two values ("Robert Rothman" and "Daniel Jackson").

<dl>
  <dt> 최종 수정 시각 </dt>
  <dd> 2004-12-23T23:33Z </dd>
  <dt> 권장 업데이트 주기 </dt>
  <dd> 1분 </dd>
  <dt> 저자 </dt>
  <dt> 편집자 </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
</dl>

dl 요소를 이용해서 한 그룹의 지시사항을 표현하는 방법입니다. 이 예제에서는 지시사항의 순서가 중요합니다(다른 예제에서는 중요하지 않습니다).

The following example shows the dl element used to give a set of instructions. The order of the instructions here is important (in the other examples, the order of the blocks was not important).

<p>승점은 다음과 같이 계산합니다(맨 처음 일치하는 겁니다).</p>
<dl>
  <dt> 금화가 정확히 5개 있다면 </dt>
  <dd> 승점은 5점입니다. </dd>
  <dt> 금화가 한 개 이상, 은화가 한 개 이상 있다면 </dt>
  <dd> 승점은 2점입니다. </dd>
  <dt> 은화가 한 개 이상 있다면 </dt>
  <dd> 승점은 1점입니다. </dd>
  <dt> 아니면 </dt>
  <dd> 승점은 없습니다. </dd>
</dl>

dl 요소를 이용해 용어집을 만들었습니다. 정의되고 있는 단어를 dfn 요소로 마크업했음을 눈여겨보십시오.

The following snippet shows a dl element being used as a glossary. Note the use of dfn to indicate the word being defined.

<dl>
 <dt><dfn>Apartment</dfn>, n.</dt>
 <dd>한 개 이상의 스레드를 한 개 이상의 COM 객체와 묶는 실행 문맥.</dd>
 <dt><dfn>Flat</dfn>, n.</dt>
 <dd>풀죽은 타이어.</dd>
 <dt><dfn>Home</dfn>, n.</dt>
 <dd>사용자의 로그인 폴더.</dd>
</dl>

dl 요소는 대화를 마크업하는데 적합하지 않습니다. 대화를 마크업하는 예제는 아래에 있습니다.

The dl element is inappropriate for marking up dialogue. Examples of how to mark up dialogue are shown below.

4.5.9 dt 요소

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

dl 요소 내부에서, dd 또는 dt 요소 앞에.

Before dd or dt elements inside dl elements.

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

dt 요소는 dl 요소에서 단어-정의 그룹의 일부인 단어나 이름을 나타냅니다.

The dt element represents the term, or name, part of a term-description group in a description list (dl element).

dl 요소 내에 사용되었을 때 dt 요소 자체는 자신이 정의되고 있는 단어임을 나타내지 않습니다. 어떤 단어가 정의됨을 나타내려면 dfn 요소를 사용합니다.

The dt element itself, when used in a dl element, does not indicate that its contents are a term being defined, but this can be indicated using the dfn element.

FAQ 목록입니다. 질문을 dt로, 답을 dd로 마크업했습니다.

This example shows a list of frequently asked questions (a FAQ) marked up using the dt element for questions and the dd element for answers.

<article>
  <h1>FAQ</h1>
  <dl>
    <dt>우리한테 뭐가 필요하지?</dt>
    <dd>우리 데이터.</dd>
    <dt>언제 필요하지?</dt>
    <dd>당장.</dd>
    <dt>어디 있지?</dt>
    <dd>잘 모르겠는데.</dd>
  </dl>
</article>

4.5.10 dd 요소

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

dl 요소 내부에서, dt 또는 dd 요소 다음

After dt or dd elements inside dl elements.

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

dd 요소는 dl 요소에서 단어-정의 그룹의 일부인 설명, 정의, 값을 나타냅니다.

The dd element represents the description, definition, or value, part of a term-description group in a description list (dl element).

dl 요소를 사용해서 사전의 단어 목록 같은 것을 정의할 수 있습니다. 다음 예제는 각 항목을 dtdfn으로 마크업했고, 여러 가지 정의를 dd로 마크업했습니다.

A dl can be used to define a vocabulary list, like in a dictionary. In the following example, each entry, given by a dt with a dfn, has several dds, showing the various parts of the definition.

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/'hæ p. nes/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/ri jois'/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

4.5.11 figure 요소

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

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

Where flow content is expected.

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

다음 중 하나: figcaption 요소 하나. 그 뒤에는 플로우 컨텐츠가 있어야 합니다.

Either: One figcaption element followed by flow content.

또는: 플로우 컨텐츠. 그 뒤에는 figcaption 요소가 하나 있어야 합니다.

Or: Flow content followed by one figcaption element.

또는: 플로우 컨텐츠역주

Or: Flow content.

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

figure 요소는 플로우 컨텐츠나타내며 선택적으로 캡션을 사용할 수 있습니다. 요소는 독립적이며 보통 문서의 주된 흐름에서 단일 유닛으로 참조됩니다.

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

따라서 figure 요소는 일러스트레이션, 다이어그램, 사진, 코드, 기타 비슷한 것에 주석을 다는 용도로 사용될 수 있고, figure 요소를 제거하거나 다른 위치 - 페이지의 옆, 전용 페이지, 혹은 부록 - 으로 옮기더라도 문서의 주된 흐름에는 영향을 미치지 않습니다.

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.

figure 요소는 figcaption 요소를 포함할 수 있습니다. figcaption 요소는 figure 요소 내용에 대한 캡션을 나타냅니다. figcaption 요소가 없다면 figure 요소는 캡션이 없는겁니다.

The first figcaption element child of the element, if any, represents the caption of the figure element's contents. If there is no child figcaption element, then there is no caption.

figure 요소로 코드 리스트를 마크업했습니다.

This example shows the figure element to mark up a code listing.

<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 요소로 사진을 마크업했습니다.

Here we see a figure element to mark up a photo.

<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubble 씨가 자신의 사무실 의자에 앉아서 최근
           프로젝트에 몰두해 있습니다.">
 <figcaption>일하는 Bubble 씨</figcaption>
</figure>

figure 가 아닌 이미지, figure를 사용한 이미지 및 비디오를 함께 쓴 예제입니다.

In this example, we see an image that is not a figure, as well as an image and a video that are.

<h2>Malinko의 만화</h2>

<p>이 사건은 한 만화에 관한, 일종의 "지적 소유권"
위배에 관한 사건입니다(증거물 A를 보십시오).
예고편이 다음 단어로 끝난 다음부터 소송이 시작됬습니다.

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

<p>이 예고편은 이미 방송됐습니다. 큼직한 노트북을 든 변호사가
가망 없는 변론을 시작했습니다. 예고편 전체는 증거물 B에 들어 있습니다.

<figure>
 <img src="ex-a.png" alt="지저분한 종이 위에 구불구불한 선이 두 줄 그어져 있습니다.">
 <figcaption>증거물 A. <cite>rough copy</cite> 만화.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>증거물 B. <cite>Rough Copy</cite> 예고편.</figcaption>
</figure>

<p>이 사건은 법원에서 판결이 끝났습니다.

figure 요소로 시를 마크업했습니다.

Here, a part of a poem is marked up using 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 요소입니다.

In this example, which could be part of a much larger work discussing a castle, the figure has three images in it.

<figure>
  <img src="castle1423.jpeg" title="에칭. 익명, ca. 1423."
       alt="그 성에는 탑이 하나 있는데 그 탑은 높은 벽으로 둘러싸여 있습니다.">
  <img src="castle1858.jpeg" title="캔버스에 유화. Maria Towle, 1858."
       alt="그 성에는 이제 탑이 두 개 있고 벽도 두 개 있습니다.">
  <img src="castle1999.jpeg" title="필름 사진. Peter Jankle, 1999."
       alt="그 성은 이제 폐허로 변했으며 맨 처음 있던 탑도 한 조각밖에 남지 않았습니다.">
  <figcaption>성의 변천사. 각각 1423년, 1858년, 1999년.</figcaption>
</figure>

4.5.12 figcaption 요소

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

figure 요소의 첫 번째 혹은 마지막 자식 요소

As the first or last child of a figure element.

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

figcaption 요소는 자신의 부모인 figure 요소의, 나머지 내용들에 대한 캡션, 혹은 제목을 나타냅니다.

The figcaption element represents a caption or legend for the rest of the contents of the figcaption element's parent figure element, if any.

4.5.13 div 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow 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:
interface HTMLDivElement : HTMLElement {};

div 요소에는 특별한 의미가 전혀 없습니다. div 요소는 자신의 자식 요소들을 나타냅니다. div 요소에 class, lang, title 속성을 써서 연속적인 요소 그룹에 공통인 의미를 마크업할 수 있습니다.

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

div 요소는 다른 적절한 요소가 전혀 없을 때 최후의 방편으로만 사용하기를 강력히 권장합니다. 좀 더 적절한 요소 대신에 div를 사용하면 사용자에게는 빈곤한 접근성을, 저자에게는 관리의 어려움을 초래합니다.

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.

예를 들어 블로그 포스트는 article, 챕터는 section, 페이지 내비게이션 그룹은 nav, 폼 컨트롤 그룹은 fieldset 요소로 묶을 수 있습니다.

For example, a blog post would be marked up using article, a chapter using section, a page's navigation aids using nav, and a group of form controls using fieldset.

div 요소는 스타일 목적이라든가, 같은 섹션에 포함된 문단 여러 개를 묶어 비슷한 방법으로 주석을 달고자 하는 목적 등에 유용하게 사용할 수 있습니다. 다음 예제에서, div 요소를 사용해 두 개의 문단에 동시에 언어를 설정하는 것을 볼 수 있습니다.

On the other hand, div elements can be useful for stylistic purposes or to wrap multiple paragraphs within a section that are all to be annotated in a similar way. In the following example, we see div elements used as a way to set the language of two paragraphs at once, instead of setting the language on the two paragraph elements separately:

<article lang="en-US">
  <h1>내가 쓰는 언어, 내 고양이들</h1>
  <p>내 고양이 하라는 한동안 집을 떠나 있었는데 하는 짓은
  별로 바뀌지 않았어요. 이웃집에 규칙적으로 놀러가서 장난감을
  얻어 보려고 하는 버릇이 생기긴 했네요.</p>
  <div lang="en-GB">
    <p>다른 고양이 담비는 검은 색colour과 흰 색이 섞인
    얼룩고양이인데 아주 귀염둥이입니다. 오늘 수영장에 갈 때
    담비가 길 옆pavement을 걸어 따라왔어요.
    어제 담비는 갑자기 이웃집에 쳐들어갔는데, 이웃 아파트flat가
    우리 아파트랑 똑같이 생긴걸 알고 있었는지 궁금해지네요.</p>
    <p>흠, 바로 앞 문단을 영국 영어로 썼군요. 사실 미국 영어로 쓰려고
    했는데 말이에요. 그러니까 "pavement", "flat", "colour" 대신...</p>
  </div>
  <p>"sidewalk", "apartment", "color" 라고 썼어야 했어요!</p>
</article>

인쇄했다면 이런 모양이었다는 이야기입니다.

...
comforting enough to get him through the rest of the night's
shift.
                            *
The Carlton AllLander drove Dudley home just after dawn. Like the
...돌아가기

첫 번째 예제에서 저자는 스위스에서 태어난 후, 영국 - 미국 - 노르웨이로 이사하면서 살았습니다. 두 번째 예제에서는 영국에서 태어난 후 스위스 - 미국 - 노르웨이로 이사하면서 살았습니다. 돌아가기

이 예제에서는 저자가 자신이 살았던 나라들을 어떠한 순서로 나열했는지를 명시하지 않았습니다. 따라서 나열 순서를 어떻게 바꾸더라도 저자가 의도한 바가 바뀌지는 않습니다. 돌아가기

다른 말로 이렇게 써도 같은 의미입니다. "플로우 컨텐츠. figcaption 요소를 써도 되고 쓰지 않아도 되는데, 썼다면 맨 앞이나 맨 뒤에 있어야 합니다. figcaption 요소를 두 개 쓸 수는 없습니다." 돌아가기