웹 문서를 작성하다 보면 여러 항목을 나열해야 하는 경우가 많습니다. HTML은 이를 위해 세 가지 목록 요소를 제공하며, 각각 용도와 구조가 다릅니다.
- 비순서 목록(Unordered List) — 순서가 중요하지 않은 항목을 나열할 때 사용하며, 가장 널리 쓰입니다.
- 순서 목록(Ordered List) — 항목에 번호가 붙으며, 단계나 순위 표현에 적합합니다.
- 설명 목록(Description List) — 용어와 그에 대한 설명을 짝지어 나타낼 때 사용합니다.
비순서 목록: <ul>
비순서 목록은 <ul>(unordered list) 요소로 정의하고, 각 항목은 <li>(list item) 요소로 작성합니다.
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>실행 결과:
- 사과
- 바나나
- 오렌지
기본적으로 비순서 목록의 항목 앞에는 원형 불릿(bullet)이 표시되지만, CSS의 list-style-type 속성을 활용하면 사각형, 원 등 다른 모양으로 바꾸거나 불릿을 완전히 제거할 수도 있습니다.
순서 목록: <ol>
순서 목록은 <ol>(ordered list) 요소로 정의하고, 마찬가지로 각 항목은 <li> 요소로 작성합니다.
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>실행 결과:
- 사과
- 바나나
- 오렌지
기본적으로 순서 목록은 1, 2, 3처럼 숫자로 표시되지만, CSS로 로마자나 알파벳 형식으로 변경할 수 있습니다. 또한 start 속성으로 시작 번호를 지정하거나, reversed 속성으로 항목을 역순으로 표시하는 것도 가능합니다.
설명 목록: <dl>
설명 목록은 앞의 두 목록과 구조 및 용도가 확연히 다릅니다. 하나의 용어와 그에 대한 설명을 짝지어 표현하는 데 특화되어 있으며, 세 가지 요소로 구성됩니다.
<dl>: 설명 목록 전체를 감싸는 부모 요소입니다.<dt>: 목록 안의 용어(이름)를 정의하며,<dl>의 자식 요소입니다.<dd>: 바로 앞의 용어(<dt>)에 대한 설명, 정의 또는 값을 제공합니다. 역시<dl>의 자식 요소입니다.
예시:
<dl>
<dt>아프리카코끼리</dt>
<dd>현재 살아있는 육지 동물 중 가장 큽니다.</dd>
<dt>기린</dt>
<dd>지구에서 가장 키가 큰 동물입니다.</dd>
<dt>흰수염고래</dt>
<dd>알려진 한 지구 역사상 가장 컸던 동물입니다.</dd>
</dl>실행 결과:
- 아프리카코끼리
- 현재 살아있는 육지 동물 중 가장 큽니다.
- 기린
- 지구에서 가장 키가 큰 동물입니다.
- 흰수염고래
- 알려진 한 지구 역사상 가장 컸던 동물입니다.
설명 목록은 현대 웹 개발에서 자주 사용되지 않는 편입니다. 주로 용어집(glossary)을 만들거나 메타데이터를 표시할 때 볼 수 있지만, 같은 결과는 다른 방식으로도 충분히 구현할 수 있습니다.
마무리
정리하면, 단순한 항목 나열에는 <ul>, 순서가 있는 항목에는 <ol>, 용어와 설명의 짝에는 <dl>을 사용하는 것이 좋습니다. 상황에 맞는 목록 요소를 선택하면 코드의 의미(semantics)가 명확해져 웹 접근성과 검색 엔진 최적화(SEO)에도 긍정적인 영향을 줍니다.