HTML <ol>: 정렬 목록 요소

HTML <ol> 요소는 항목을 순서대로 정렬한 목록을 나타냅니다. 주로 숫자를 사용해 순서를 표현합니다.

<p>태양계의 내행성 (순서대로):</p>
<ol>
  <li>수성</li>
  <li>금성</li>
  <li>지구</li>
  <li>화성</li>
</ol>

특성

전역 특성을 포함합니다.

reversed

목록 순서가 역순임을 지정하는 불리언 특성입니다. 서수가 내림차순으로 붙습니다.

start

목록 항목을 세기 시작할 숫자를 지정하는 정수형 특성입니다. 서수 유형이 로마 숫자나 영문자여도 아라비아 숫자 값(1, 2, 3, …)을 사용해야 합니다. 예를 들어, 목록의 시작을 영문자 “d”나 로마 숫자 “iv”로 지정하고 싶으면 start="4"를 사용하세요.

type

서수 유형을 지정합니다.

• a: 영어 소문자.
• A: 영어 대문자.
• i: 로마 숫자 소문자.
• I: 로마 숫자 대문자.
• 1: 숫자. (기본 값)

사용 일람

• <ol>과 <ul>은 필요한 만큼 중첩할 수 있으며, 서로 혼합해서 중첩하는 것도 가능합니다.

• <ol>과 <ul>은 둘 다 목록을 나타냅니다. 차이점은 <ol>에선 항목의 순서가 중요하다는 것입니다. 다음과 같은 목록에서는 순서가 중요합니다.

  • 레시피의 단계
  • 길 찾는 법
  • 함유량을 내림차순으로 정렬한 영양성분 목록

  어떤 목록을 사용해야 하는지 모르겠다면 항목의 순서를 섞어보세요. 의미가 달라지면 <ol>을 사용해야 하고, 달라지지 않으면 <ul>을 사용해도 됩니다.

예제

중첩 목록

<ol>
  <li>가</li>
  <li>
    나
    <!-- 닫는 </li> 태그를 여기 두지 않아요! -->
    <ol>
      <li>나-1</li>
      <li>나-2</li>
      <li>나-3</li>
    </ol>
    <!-- 여기서 닫아줘요 -->
  </li>
  <li>다</li>
</ol>

명세

HTML Living Standard

브라우저 호환성

같이 보기

• 목록 항목: <li>
• 비정렬 목록: <ul>