--- title:
    slug: Web/HTML/Element/ol tags: - Element - HTML - HTML grouping content - 'HTML:Flow content' - Reference translation_of: Web/HTML/Element/ol ---
    {{HTMLRef}}

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

    {{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}
    콘텐츠 카테고리 플로우 콘텐츠. 또한, 최소 하나의 {{htmlelement("li")}} 요소를 자식으로 둔다면 뚜렷한 콘텐츠.
    가능한 콘텐츠 0개 이상의 {{htmlelement("li")}}, {{htmlelement("script")}}, {{htmlelement("template")}} 요소.
    태그 생략 {{no_tag_omission}}
    가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
    가능한 ARIA 역할 {{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}
    DOM 인터페이스 {{DOMxRef("HTMLOListElement")}}

    특성

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

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

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

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

    사용 일람

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

    <ol>과 {{htmlelement("ul")}}은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.

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

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

    예제

    간단한 예제

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

    {{EmbedLiveSample("간단한_예제", 400, 100)}}

    로마 숫자로 표기

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

    {{EmbedLiveSample("로마_숫자로_표기", 400, 100)}}

    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>

    {{EmbedLiveSample("start_특성_사용하기", 400, 100)}}

    중첩 목록

    <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>

    {{EmbedLiveSample("중첩_목록", 400, 150)}}

    정렬 목록 안의 비정렬 목록

    <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>

    {{EmbedLiveSample("정렬_목록_안의_비정렬_목록", 400, 150)}}

    명세

    명세 상태 주석
    {{SpecName('HTML WHATWG', 'grouping-content.html#the-ol-element', '<ol>')}} {{Spec2('HTML WHATWG')}}
    {{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}} {{Spec2('HTML5 W3C')}}
    {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}} {{Spec2('HTML4.01')}}

    브라우저 호환성

    {{Compat("html.elements.ol")}}

    같이 보기