HTML 목록 태그 ul, ol, li 정리하기

웹페이지에서는 목록 형태의 내용을 자주 사용합니다.

예를 들어 메뉴, 할 일 목록, 순서가 있는 설명, 상품 목록처럼 여러 항목을 나열할 때 목록 태그를 사용합니다.

HTML에서 목록을 만들 때 주로 사용하는 태그는 ul, ol, li입니다.

이 글에서 다루는 내용

목록 태그가 필요한 이유
ul 태그
ol 태그
li 태그
순서 없는 목록과 순서 있는 목록의 차이

1. 목록 태그가 필요한 이유

목록은 단순히 줄을 나눠서 쓰는 것과 다릅니다.

사과
바나나
포도

위처럼 작성하면 사람은 목록처럼 볼 수 있지만, HTML 구조상 목록이라는 의미가 명확하지 않습니다.

목록이라면 목록 태그를 사용하는 것이 좋습니다.

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

이렇게 작성하면 브라우저와 검색 엔진이 이 내용을 목록으로 이해할 수 있습니다.

2. `ul` 태그

ul은 순서가 없는 목록을 만들 때 사용합니다.

ul은 unordered list의 줄임말입니다.
즉, 순서가 중요하지 않은 목록이라는 뜻입니다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

화면에는 보통 다음처럼 점 표시가 붙어서 보입니다.

• HTML
• CSS
• JavaScript

순서가 중요하지 않은 항목을 나열할 때 ul을 사용합니다.

예를 들면 다음과 같습니다.

메뉴 목록
준비물 목록
관심 기술 목록
상품 특징 목록

3. `ol` 태그

ol은 순서가 있는 목록을 만들 때 사용합니다.

ol은 ordered list의 줄임말입니다.
즉, 순서가 중요한 목록이라는 뜻입니다.

<ol>
  <li>HTML 파일을 만든다.</li>
  <li>기본 구조를 작성한다.</li>
  <li>브라우저에서 실행한다.</li>
</ol>

화면에는 보통 다음처럼 숫자가 붙어서 보입니다.

1. HTML 파일을 만든다.
2. 기본 구조를 작성한다.
3. 브라우저에서 실행한다.

순서대로 진행해야 하는 내용을 작성할 때 ol을 사용합니다.

예를 들면 다음과 같습니다.

설치 순서
회원가입 절차
요리 순서
문제 풀이 단계

4. `li` 태그

li는 목록 안의 각 항목을 나타내는 태그입니다.

li는 list item의 줄임말입니다.
즉, 목록 항목이라는 뜻입니다.

li는 보통 ul 또는 ol 안에서 사용합니다.

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
</ul>

<ol>
  <li>첫 번째 단계</li>
  <li>두 번째 단계</li>
</ol>

ul과 ol은 목록 전체를 감싸는 태그입니다.
li는 그 안에 들어가는 각각의 항목입니다.

쉽게 비유하면 다음과 같습니다.

태그	비유
`ul`, `ol`	목록을 담는 박스
`li`	박스 안에 들어가는 항목

5. 순서 없는 목록과 순서 있는 목록 차이

ul과 ol의 차이는 순서가 중요한지 아닌지입니다.

구분	`ul`	`ol`
의미	순서 없는 목록	순서 있는 목록
기본 표시	점 표시	숫자 표시
사용 상황	항목 나열	단계 설명
예시	메뉴, 준비물, 특징	가입 절차, 설치 순서, 풀이 단계

예를 들어 장보기 목록은 순서가 크게 중요하지 않습니다.

<ul>
  <li>계란</li>
  <li>우유</li>
  <li>식빵</li>
</ul>

하지만 라면 끓이는 방법은 순서가 중요합니다.

<ol>
  <li>물을 끓인다.</li>
  <li>면과 스프를 넣는다.</li>
  <li>3분 정도 끓인다.</li>
</ol>

이처럼 순서가 필요 없으면 ul, 순서가 필요하면 ol을 사용합니다.

같은 내용도 목적에 따라 태그가 달라집니다

예를 들어 아래 두 목록은 글자만 보면 비슷할 수 있습니다.

<ul>
  <li>회원가입</li>
  <li>로그인</li>
  <li>마이페이지</li>
</ul>

<ol>
  <li>회원가입</li>
  <li>로그인</li>
  <li>마이페이지</li>
</ol>

하지만 의미는 다릅니다.

메뉴처럼 그냥 나열하는 것이면 ul
순서대로 따라야 하는 단계라면 ol

즉 글자가 같아도 왜 나열하는지에 따라 태그를 골라야 합니다.

6. 목록 안에 목록 넣기

목록 안에는 또 다른 목록을 넣을 수도 있습니다.

<ul>
  <li>프론트엔드
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>백엔드
    <ul>
      <li>Java</li>
      <li>Spring Boot</li>
      <li>MySQL</li>
    </ul>
  </li>
</ul>

위 코드는 큰 분류 안에 세부 항목을 넣은 구조입니다.

블로그 카테고리, 메뉴, 학습 목차를 만들 때 이런 구조를 사용할 수 있습니다.

중첩 목록은 어디에 잘 어울릴까?

중첩 목록은 아래처럼 상위 분류와 하위 분류가 분명할 때 잘 어울립니다.

웹 개발
  HTML
  CSS
  JavaScript
알고리즘
  배열
  트리
  그래프

반대로 단순히 한 줄씩 길게 나열된 설명이라면 목록보다 문단이나 제목 구조가 더 자연스러울 수 있습니다.

7. 전체 예시

아래는 ul, ol, li를 함께 사용한 예시입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML 목록 태그 예시</title>
</head>
<body>
  <h1>HTML 목록 태그</h1>

  <h2>공부할 기술 목록</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <h2>학습 순서</h2>
  <ol>
    <li>HTML 기본 구조를 익힌다.</li>
    <li>자주 사용하는 태그를 정리한다.</li>
    <li>간단한 웹페이지를 만들어 본다.</li>
  </ol>
</body>
</html>

위 예시에서 공부할 기술 목록은 순서가 중요하지 않으므로 ul을 사용했습니다.
학습 순서는 순서대로 진행하는 내용이므로 ol을 사용했습니다.

자주 헷갈리는 부분

`li`를 혼자 쓰면 구조가 어색합니다

아래처럼 쓰는 경우가 있습니다.

<li>사과</li>
<li>바나나</li>

화면에 뭔가 보일 수는 있어도, 목록 전체를 감싸는 구조가 빠져 있습니다.

그래서 보통은 아래처럼 ul이나 ol 안에 넣는 것이 좋습니다.

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

순서가 중요하지 않은데 `ol`을 쓰면 의미가 어색해집니다

숫자가 붙는다고 무조건 보기 좋은 것은 아닙니다.

메뉴, 기술 스택, 준비물처럼 순서가 핵심이 아닌 내용은 ul이 더 자연스럽습니다.

중첩 목록에서는 들여쓰기 구조를 잘 맞추는 것이 좋습니다

중첩 목록은 부모 li 안에 하위 목록이 들어가는 구조입니다.

그래서 코드를 정리해서 쓰지 않으면 어디까지가 상위 항목인지 헷갈리기 쉽습니다.

정리

태그	의미	사용 예시
`ul`	순서 없는 목록	메뉴, 준비물, 특징
`ol`	순서 있는 목록	절차, 단계, 순서
`li`	목록 항목	목록 안의 각각의 항목

목록을 만들 때는 먼저 순서가 중요한지 판단해야 합니다.

순서가 중요하지 않으면 ul을 사용합니다.
순서가 중요하면 ol을 사용합니다.
그리고 각각의 항목은 li 태그로 작성합니다.

한 줄 요약

HTML에서 목록을 만들 때는 ul 또는 ol로 목록 전체를 감싸고, 각 항목은 li 태그로 작성합니다.

문단과 제목처럼 텍스트 구조를 먼저 정리하고 싶다면 HTML 제목과 문단 태그 정리하기 글을 함께 보면 좋습니다.

웹페이지 전체 구조를 주제별 영역으로 나누는 방식은 시맨틱 태그로 HTML 구조 설계하기 글에서 이어서 볼 수 있습니다.