<ol>

개요

HTML <ol> 요소 (or HTML Ordered List Element) 는 정렬된 리스트의 항목들을 나타냅니다. 일반적으로, 정렬된 리스트의 항목들은 앞에 번호와 함께 표시되며, 이 번호는 순자,문자,로마 숫자,간단한 점과 같이 어떤 형태로든 나타날수 있습니다. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.

There is no limitation to the depth and imbrication of lists defined with the <ol> and <ul> elements.

• 컨텐츠 범주플로우 컨텐츠, and if the <ol> element's children include at least one <li> element, palpable content.
• 허용된 컨텐츠 0개 이상의 <li> 요소.
• 태그 생략 None, both the starting and ending tag are mandatory.
• 허용된 부모 요소플로우 컨텐츠를 허용하는 요소
• DOM 인터페이스 HTMLOListElement

속성

이 요소는 전역 속성을 포함합니다.

compact

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers.

주의: Do not use this attribute, as it has been deprecated: the <ol> element should be styled using CSS. To give a similar effect than the compact attribute, the CSS property line-height can be used with a value of 80%.

reversed HTML5

This Boolean attribute specifies that the items of the item are specified in the reverse order, i.e. that the least important one is listed first.

startHTML5

This integer attribute specifies the start value for numbering the individual list items. Although the ordering type of list elements might be Roman numerals, such as XXXI, or letters, the value of start is always represented as a number. To start numbering elements from the letter "C", use <ol start="3">.

Note: This attribute was deprecated in HTML4, but reintroduced in HTML5.

type

Indicates the numbering type:

• 'a' indicates lowercase letters,
• 'A' indicates uppercase letters,
• 'i' indicates lowercase Roman numerals,
• 'I' indicates uppercase Roman numerals,
• and '1' indicates numbers (default).

The type set is used for the entire list unless a different type attribute is used within an enclosed <li> element.

참고: 이 속성은 HTML4에서 사용되지않음 되었지만, HTML5에서 재도입되었습니다. Unless the value of the list number matters (e.g. in legal or technical documents where items are to be referenced by their number/letter), the CSS list-style-type property should be used instead.

예제

간단한 예제

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

위 HTML의 결과:

1. first item
2. second item
3. third item

start 속성 사용하기

<ol start="7">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

위 HTML의 결과:

7. first item
8. second item
9. third item

중첩된 리스트

<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

위 HTML의 결과:

1. first item
2. second item
   1. second item first subitem
   2. second item second subitem
   3. second item third subitem
3. third item

중첩된 <ol>와 <ul>

<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

위 HTML의 결과:

1. first item
2. second item
   • second item first subitem
   • second item second subitem
   • second item third subitem
3. third item

사양

브라우저 호환성

같이 보기

• 다른 리스트 관련 요소: <ul>, <li>, <menu> and the obsolete <dir>;
• CSS properties that may be specially useful to style the <ol> element:
  • the list-style property, useful to choose the way the ordinal is displayed,
  • CSS counters, useful to handle complex nested lists,
  • the line-height property, useful to simulate the deprecated compact attribute,
  • the margin property, useful to control the indent of the list.