HTML에서 순서 목록(ordered list)을 만들려면 <ol> 태그를 사용합니다. 순서 목록은 <ol> 태그로 시작하고, 각 목록 항목은 <li> 태그로 표시됩니다. 목록 항목에는 기본적으로 숫자가 붙지만, 속성 설정에 따라 소문자 알파벳, 대문자 알파벳, 로마 숫자 등 다양한 방식으로 번호를 지정할 수 있습니다.
type 속성으로 소문자 번호 지정하기
소문자 알파벳으로 번호가 매겨진 순서 목록을 만들려면 <ol> 태그의 type 속성을 사용합니다. 이 속성에 "a" 값을 지정하면 목록 항목이 a, b, c와 같은 소문자 알파벳으로 표시됩니다.
<ol type = "a">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>
참고: CSS를 사용하는 방법
HTML5에서는 type 속성 대신 CSS의 list-style-type 속성을 사용하는 것이 더 권장됩니다. 예를 들어 다음과 같이 작성할 수 있습니다.
<ol style="list-style-type: lower-alpha;">
<li>항목 1</li>
<li>항목 2</li>
</ol>
예제
아래 코드를 실행하면 소문자 알파벳으로 번호가 매겨진 순서 목록이 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>월드컵 참가 국가</title>
</head>
<body>
<h1>월드컵 참가 국가 목록</h1>
<ol type = "a">
<li>인도</li>
<li>호주</li>
<li>남아프리카공화국</li>
<li>뉴질랜드</li>
<li>파키스탄</li>
<li>스리랑카</li>
<li>서인도제도</li>
<li>방글라데시</li>
</ol>
</body>
</html>
위 코드를 브라우저에서 실행하면 각 국가 이름 앞에 a, b, c, d... 형태의 소문자 알파벳 번호가 순서대로 붙어 있는 목록을 확인할 수 있습니다.