HTML <li> 태그 value 속성 – 순서 있는 목록의 시작 번호 지정하기

HTML <li> value 속성이란?

<li> 요소의 value 속성은 목록 항목(list item)의 시작 번호를 지정하는 데 사용됩니다. 이 속성의 값은 반드시 숫자여야 하므로, 순서 없는 목록(<ul>)이 아닌 순서 있는 목록(<ol>)에서만 사용할 수 있습니다.

기본적으로 순서 있는 목록은 1부터 번호가 매겨지지만, value 속성을 활용하면 원하는 숫자부터 목록 번호를 시작할 수 있습니다. 여러 개의 목록을 하나로 이어서 표현해야 할 때 특히 유용합니다.

문법(Syntax)

<li value="num">

위 문법에서 num은 해당 목록 항목에 지정할 숫자 값입니다. 이후 항목들은 num부터 1씩 증가한 번호가 자동으로 부여됩니다.

value 속성 사용 예제

다음은 <li> 요소의 value 속성을 실제로 구현한 예제입니다.

예제 코드

<!DOCTYPE html>
<html>
<body>
<h1>Subjects</h1>
<p>Following are the subjects −</p>
<ol>
    <li>Maths</li>
    <li>Science</li>
    <li>English</li>
    <li>French</li>
</ol>
<p>Remaining subjects −</p>
<ol>
    <li value="5">Coffee</li>
    <li>Accounts</li>
    <li>Programming</li>
    <li>Networking</li>
</ol>
</body>
</html>

실행 결과

HTML li 태그 value 속성 – 순서 있는 목록의 시작 번호 지정하기

예제 분석

위 예제에는 두 개의 순서 있는 목록(<ol>)이 사용되었습니다.

<p>Following are the subjects −</p>
<ol>
    <li>Maths</li>
    <li>Science</li>
    <li>English</li>
    <li>French</li>
</ol>
<p>Remaining subjects −</p>
<ol>
    <li value="5">Coffee</li>
    <li>Accounts</li>
    <li>Programming</li>
    <li>Networking</li>
</ol>

첫 번째 목록은 기본값인 1부터 번호가 시작되지만, 두 번째 목록은 value 속성을 사용하여 5번부터 번호가 시작되도록 설정했습니다.

<ol>
    <li value="5">Coffee</li>
    <li>Accounts</li>
    <li>Programming</li>
    <li>Networking</li>
</ol>

실행 결과 "Coffee"는 5번으로 표시되고, 이후 항목들은 6, 7, 8로 이어지며 번호가 매겨집니다. 이처럼 value 속성을 활용하면 여러 개의 목록을 마치 하나의 연속된 목록처럼 자연스럽게 표현할 수 있습니다.

참고 사항

value 속성은 HTML5에서 <ol> 내부의 <li> 요소에 대해 공식적으로 지원되며, Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 정상적으로 작동합니다. 참고로 음수나 0 같은 값도 지정할 수 있으며, 더 세밀한 번호 제어가 필요하다면 CSS의 counter 기능을 활용하는 것도 좋은 방법입니다.

HTML 태그 value 속성 – 순서 있는 목록의 시작 번호 지정하기