목록으로 항목 정리하기

자기소개 페이지에 준비물과 작업 순서를 추가할 때는 항목의 순서가 의미에 영향을 주는지 먼저 살펴봅니다. 준비물은 나열 순서가 바뀌어도 되지만, 작업 단계는 순서가 바뀌면 안내의 뜻이 달라질 수 있습니다.

어떤 목록을 선택할까요?

핵심은 항목을 바꾸어 놓았을 때 의미가 달라지는지 판단하는 것입니다. 순서가 중요하지 않은 항목은 <ul>로 묶고, 순서가 중요한 항목은 <ol>로 묶습니다. 두 목록 모두 각 항목을 <li> 요소로 감쌉니다. ul은 unordered list, ol은 ordered list, li는 list item을 뜻합니다.

예를 들어 공책과 연필은 어느 것을 먼저 적어도 준비물이라는 의미가 같습니다. 반면 내용을 정리한 뒤 소개 글을 쓰는 과정은 순서가 중요하므로 순서 있는 목록으로 표현할 수 있습니다.

자기소개 페이지에 목록 추가하기

다음 예제는 Chromium을 기준으로 작성한 독립적인 HTML 문서입니다. 별도의 입력은 없으며, 본문에 적은 자기소개와 목록 내용이 화면에 표시될 예정입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>나의 소개</title>
</head>
<body>
  <h1>나의 소개</h1>
  <p>안녕하세요. 웹 페이지 만들기를 배우고 있습니다.</p>

  <h2>준비물</h2>
  <ul>
    <li>공책</li>
    <li>연필</li>
    <li>지우개</li>
  </ul>

  <h2>소개 글 작성 순서</h2>
  <ol>
    <li>소개할 내용을 정리합니다.</li>
    <li>정리한 내용으로 소개 글을 씁니다.</li>
    <li>완성한 글을 다시 읽습니다.</li>
  </ol>
</body>
</html>

예상 화면에는 제목과 소개 문장 아래에 준비물 세 가지가 글머리표와 함께 나타납니다. 그다음 소개 글 작성 순서 세 단계가 1부터 시작하는 번호와 함께 나타납니다. 글머리표의 모양과 간격은 브라우저의 기본 표시 방식에 따라 달라질 수 있습니다.

코드가 목록이 되는 이유

<h2>는 뒤따르는 목록의 주제를 알려 줍니다. 첫 번째 목록에서는 <ul>이 준비물 전체를 감싸고, 그 안의 <li> 세 개가 각각 하나의 항목을 나타냅니다. 순서가 중요하지 않으므로 일반적으로 글머리표가 붙습니다.

두 번째 목록에서는 <ol>이 작업 단계 전체를 감쌉니다. 브라우저는 순서 있는 목록의 항목에 일반적으로 번호를 붙이므로, 독자는 제시된 순서대로 단계를 읽을 수 있습니다. 목록 요소와 항목 요소의 포함 관계를 코드에서도 들여쓰기로 구분하면 읽기 쉽습니다.

흔한 실수와 경계 조건

<li>를 <ul>이나 <ol> 밖에 따로 두지 말고 해당 목록 안에 넣으세요. 목록 안에 항목을 구분하지 않은 문장만 적는 대신, 항목마다 <li>를 하나씩 사용합니다. 화면에 번호를 직접 입력하는 것보다 <ol>을 사용하면 목록의 순서가 HTML 구조에도 표현됩니다.

항목이 하나뿐이어도 목록으로 표현할 수 있습니다. 다만 관련 항목이 더 이상 없고 단순한 문장 하나라면 문단이 더 자연스러울 수 있습니다. 항목의 개수보다 콘텐츠의 의미를 기준으로 선택하세요.

연습과 해설

자기소개 페이지에 좋아하는 활동인 독서와 산책을 추가하려고 합니다. 두 활동의 순서는 중요하지 않습니다. 어떤 목록을 사용하고 항목은 어떻게 묶을까요?

해설: 순서를 바꾸어도 의미가 같으므로 <ul>을 사용합니다. 그 안에 독서와 산책을 각각 별도의 <li>로 넣습니다.

<ul>
  <li>독서</li>
  <li>산책</li>
</ul>

참고: WHATWG HTML 표준: 목록 요소, MDN: HTML 목록