이 글에서는 HTML(HyperText Markup Language) 에서 목록(List)을 표현할 때 사용하는 태그들을 정리합니다.

HTML: 목록(List)

웹 페이지에서 메뉴, 글 목차, 댓글 리스트, 사이드바 링크처럼 "비슷한 정보 여러 개를 나열하는 UI" 는 거의 다 목록 구조로 표현할 수 있습니다. 이때 리스트 태그를 제대로 쓰면, 브라우저와 스크린 리더가 구조를 정확하게 이해해서 접근성과 유지보수성이 좋아집니다.

순서 없는 목록: ul, li

순서가 중요하지 않은 나열 은 ul(unordered list)과 li(list item) 조합으로 표현합니다.

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>포도</li>
</ul>

• ul: "이 안에는 순서 없는 항목들의 묶음이 있다"는 의미.
• li: 각각의 항목 하나를 나타내는 태그.

사이트의 내비게이션 메뉴, 태그 목록, 단순 항목 나열 등에 주로 사용합니다.

순서 있는 목록: ol, li

순서나 단계가 중요한 목록 은 ol(ordered list)과 li를 사용합니다.

<ol>
  <li>회원가입</li>
  <li>이메일 인증</li>
  <li>로그인</li>
</ol>

• ol: "1, 2, 3..." 처럼 순서가 있는 목록.
• li: 각 단계나 순서의 한 항목.

요리 레시피 순서, 튜토리얼 단계, 우선순위가 있는 리스트에 잘 어울립니다.

설명 목록: dl, dt, dd

어떤 용어와 그에 대한 설명 을 짝으로 표현하고 싶을 때는 dl(description list)을 사용합니다.

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 정의하는 마크업 언어.</dd>

  <dt>CSS</dt>
  <dd>웹 페이지의 스타일(색, 크기, 배치 등)을 정의하는 언어.</dd>
</dl>

• dl: 전체 설명 목록의 묶음.
• dt: 설명 대상(용어, 제목).
• dd: 그에 대한 설명 내용.

FAQ, 용어 정리, 설정 항목 + 설명 텍스트 같은 곳에 사용합니다.

중첩 목록: 목록 안에 또 다른 목록

목록 안에 하위 항목을 넣고 싶으면 li 안에 또 다른 ul 혹은 ol을 중첩해서 사용할 수 있습니다.

<ul>
  <li>
    프론트엔드
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>백엔드</li>
</ul>

이렇게 하면 "프론트엔드" 아래에 하위 목록이 있는 계층 구조를 정확히 알 수 있습니다.

언제 div 대신 목록 태그를 쓸까?

목록 UI를 그냥 div 여러 개로 사용해도 화면에는 비슷하게 보일 수 있으나 다음과 같은 경우에는 목록 태그를 쓰는 게 좋습니다.

• 항목들이 "비슷한 유형의 데이터"로 반복될 때 (게시글 카드, 댓글, 메뉴 등).
• 순서가 있거나, 단계/절차를 표현할 때.
• 용어 + 설명 형태의 구조를 표현할 때.

위와 같이 "여러 개의 비슷한 요소가 나열" 되는 경우, ul/ol/dl을 고려해보는게 좋습니다.

주의할 점

1. 브라우저마다 기본 스타일이 다르다

같은 HTML이라도 Chrome, Safari, Firefox에서 다르게 보일 수 있다. CSS Reset이나 Normalize.css를 사용해서 기본 스타일을 통일해야 한다.