<ol>

HTML <ol> 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.

콘텐츠 카테고리 플로우 콘텐츠. 또한, 최소 하나의 <li> 요소를 자식으로 둔다면 뚜렷한 콘텐츠.
가능한 콘텐츠 0개 이상의 <li>, <script>, <template> 요소.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
DOM 인터페이스 HTMLOListElement

특성

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

reversed
목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.
start
항목을 셀 때 시작할 수. type이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 start="4"를 사용하세요.
type
항목을 셀 때 사용할 카운터 유형.
  • 'a'는 소문자 알파벳,
  • 'A'는 대문자 알파벳,
  • 'i'는 소문자 로마 숫자,
  • 'I'는 대문자 로마 숫자,
  • '1' 는 숫자(기본값)을 나타냅니다.

type은 아래의 모든 <li>에 적용되지만, type 특성을 가진 <li>는 그 값을 대신 사용합니다.

참고: 항목을 각각의 숫자/문자로 참조하는 기술적 또는 법률적 문서가 아니라면 CSS list-style-type 속성을 대신 사용하세요.

사용 일람

보통 정렬 목록의 항목은 선행하는 숫자나 문자 등 마커와 함께 표시합니다.

<ol><ul>은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.

<ol><ul>은 모두 목록을 나타냅니다. 차이가 있다면 <ol>에서는 순서가 중요하다는 점입니다. 예를 들어,

  • 단계별 요리법
  • 내비게이션
  • 영양정보에서 비율의 내림차순으로 정렬한 원재료 목록

항목의 순서를 바꿨을 때 의미도 바뀐다면 <ol>을 사용하세요. 그렇지 않으면 <ul>을 사용할 수 있습니다.

예제

간단한 예제

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

로마 숫자로 표기

<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol> 

start 특성 사용하기

<p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

중첩 목록

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

정렬 목록 안의 비정렬 목록

<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 Living Standard
The definition of '<ol>' in that specification.
Living Standard
HTML5
The definition of 'HTMLOListElement' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<ol>' in that specification.
Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
olChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
compact
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
reversedChrome Full support 18Edge Full support ≤79Firefox Full support 18IE No support NoOpera Full support YesSafari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 18Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
startChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
typeChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

같이 보기

  • 리스트 관련 다른 요소: <ul>, <li>, <menu>
  • <ol> 요소와 유용하게 사용할 수 있는 CSS 속성
    • 서수를 표현할 방식을 지정하는 list-style 속성.
    • 복잡한 중첩 목록을 처리하기 위한 CSS 카운터
    • 더 이상 사용하지 않는 compact 특성을 대체할 수 있는 line-height
    • 항목의 들여쓰기를 조정하기 위한 margin 속성.