HTML <ol> 태그 – 올바른 이해와 사용 방법

`<ol>` 태그의 정의 및 사용법

<ol> 태그는
순서가 지정되어 있는 항목(items)의 목록(list)를 나타내는 태그입니다.
<ol>은 순서를 변경하면 그 의미가 실질적으로 변경된다는 의미인 Ordered List(순서가 지정된 목록)의 약자로 사용된 것입니다.

<ol> 태그는 순서가 중요한 항목들을그룹화하기 위해 사용됩니다. 이 요소의 하위 항목은 <li> 태그로 구성된 요소입니다. 이 항목 앞에는 글머리 번호(예를 들어 "1, 2, 3, ...")가 순서대로 자동으로 생성되어 표시됩니다.

HTML <li> 태그

순서가 지정되지 않는 항목들을 그룹화하기 위해서는 <ul> 태그를 사용하세요.

HTML <ul> 태그

다음은 <ol> 태그를 사용한 간단한 예제입니다.

HTML

<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ol>

HTML <p> 태그

<ol> 태그의 형식은 다음과 같습니다.

허용되는 콘텐츠와 주의할 점

<ol> 태그의 자식 요소로 사용될 수 있는 콘텐츠는 제한적입니다.

<li>
<script>
<template>

0개 이상의 이 요소들을 제외하고 다른 요소, 혹은 텍스의 삽입(text node를 의미함) 등은 사용할 수 없습니다.

다음의 예시는 <ol> 태그의 허용되지 않는 콘텐츠를 사용한 잘못된 사례들과 올바른 사례들입니다.

잘못된 사례와 올바른 사례 😃

HTML - 잘못된 사례 <ol> 태그의 자식 요소로 사용할 수 없는 <p> 태그가 사용되었습니다.

<ol>
    <p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ol>

HTML - 잘못된 사례 <ol> 태그의 콘텐츠로 텍스트가 사용되었습니다.

<ol>
    우리동네 분식점 메뉴중에서 맛있는 순서입니다.
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ol>

HTML - 올바른 사례

<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ol>

HTML - 잘못된 사례 <ol> 태그의 자식 요소로 사용할 수 없는 <a> 태그가 사용되었습니다.

<h3>실시간 검색 순위</h3>
<ol>
    <a href=""><li>HTML 공부하는 방법</li></a>
    <a href=""><li>CSS 공부하는 방법</li></a>
    <a href=""><li>JavaScipt 공부하는 방법</li></a>
    <a href=""><li>PHP 공부하는 방법</li></a>
</ol>

HTML <h1>~<h6>(제목) 태그

HTML - 올바른 사례

<h3>실시간 검색 순위</h3>
<ol>
    <li><a href="">HTML 공부하는 방법</a></li>
    <li><a href="">CSS 공부하는 방법</a></li>
    <li><a href="">JavaScipt 공부하는 방법</a></li>
    <li><a href="">PHP 공부하는 방법</a></li>
</ol>

HTML - 잘못된 사례가 아니지만 권장하지 않음 <ol> 태그에 콘텐츠가 없어도 구문상 잘못된 사례는 아닙니다. 하지만 HTML의 콘텐츠 맥락상 사용을 권장하지 않습니다.

<ol>
    <!-- 콘텐츠가 없습니다. -->
</ol>

유용한 속성

<ol> 태그에는 유용한 두 가지의 속성이 있습니다. reversed와 start 속성입니다.

`reversed` 속성

reversed는 목록의 순서를 역순으로 바꿔주는 속성입니다. 이 속성은 부울 속성(boolean attribute)으로 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol reversed>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ol>

`start` 속성

start는 <ol> 태그의 첫 번째 항목이 시작하는 순서를 지정합니다. 값은 정수값을 사용합니다. 음의 정수, 0, 양의 정수를 모두 사용할 수 있습니다.

HTML

<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ol>
<p>그 다음으로 맛있는 메뉴는 다음과 같습니다.</p>
<ol start="5">
    <li>만두</li>
    <li>라뽂이</li>
    <li>칼국수</li>
</ol>

중첩된 목록 사용하기

<ol> 태그 하위 항목인 <li> 태그에 <ul> 태그나 <ol> 태그를 필요한 만큼 중첩해서 사용할 수 있고 서로 교차해서도 사용할 수 있습니다.

<li> 태그에 <ul> 태그 중첩 <li> 태그에 <ul> 태그 중첩

<p>우리동네 분석점은 맛있는 메뉴가 많습니다.</p>
<ol>
    <li>
        면류
        <ul>
            <li>라면</li>
            <li>칼국수</li>
            <li>스파게티</li>
        </ul>
    </li>
    <li>
        김밥류
        <ul>
            <li>참치김밥</li>
            <li>야채김밥</li>
            <li>날치알김밥</li>
        </ul>
    </li>
    <li>
        돈까스류
        <ul>
            <li>일반돈까스</li>
            <li>돈까스정식</li>
        </ul>
    </li>
</ol>

<li> 태그에 <ol> 태그 중첩

<p>우리동네 분석점의 메뉴의 순서입니다.</p>
<ol>
    <li>
        면류
        <ol>
            <li>라면</li>
            <li>칼국수</li>
            <li>스파게티</li>
        </ol>
    </li>
    <li>
        김밥류
        <ol>
            <li>참치김밥</li>
            <li>야채김밥</li>
            <li>날치알김밥</li>
        </ol>
    </li>
    <li>
        돈까스류
        <ol>
            <li>일반돈까스</li>
            <li>돈까스정식</li>
        </ol>
    </li>
</ol>