목록

장보기 목록과 요리법은 둘 다 목록이지만, 순서를 바꾸면 망가지는 것은 하나뿐입니다. HTML에는 둘을 위한 요소가 따로 있습니다.

순서 없는 목록과 순서 있는 목록

항목의 순서가 상관없다면 순서 없는 목록 <ul>을 씁니다. 브라우저는 항목마다 글머리 기호를 붙입니다. 요리 순서나 순위처럼 순서가 중요하다면 순서 있는 목록 <ol>을 쓰고, 번호는 브라우저가 매겨 줍니다. 어느 쪽이든 항목 하나하나는 <li>(목록 항목)이고, <ul>이나 <ol> 바로 안에는 <li>만 들어갈 수 있습니다. 글자나 다른 요소는 항목 안에 넣습니다.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

번호나 기호를 직접 치면 안 될까요? 그러면 브라우저는 목록이 있다는 것을 모릅니다. 화면 낭독기는 진짜 목록을 만나면 「목록, 항목 3개」처럼 길이를 알려 주므로, 듣는 사람은 얼마나 나올지 알고 건너뛸 수도 있습니다. <ol>에 단계 하나를 끼워 넣으면 뒤 번호가 저절로 바뀝니다. 번호를 직접 쳤다면 하나하나 고쳐야 합니다.

순서 있는 목록의 설정

<ol>에는 속성이 몇 가지 있습니다. start="4"는 4부터 셈니다. 문단을 사이에 두고 목록이 이어질 때 쓸모가 있습니다. reversed는 거꾸로 세어 10위부터 1위까지 보여 줄 때 좋습니다. type은 표시를 알파벳이나 로마 숫자로 바꿉니다. type="a", type="A", type="i", type="I"가 있습니다. 항목 하나만 번호를 건너뛰게 하려면 <li value="10">처럼 value를 씁니다. 글머리 기호와 번호의 모양, 색, 보일지 말지는 CSS가 정합니다.

목록 안의 목록

목록 항목 안에 목록을 통째로 넣을 수 있습니다. 안쪽 <ul>이나 <ol>을 그것이 속한 <li> 안, 항목 글자 뒤이자 닫는 태그 앞에 넣습니다. 자주 하는 실수는 안쪽 목록을 두 <li> 사이, 다시 말해 바깥 목록 바로 아래에 두는 것인데 이는 허용되지 않습니다. 하위 메뉴가 있는 메뉴나 세부 항목이 있는 개요를 이렇게 만듭니다.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

설명 목록

세 번째 목록은 용어집이나 묻고 답하기처럼 용어와 설명을 짝짓습니다. <dl>이 설명 목록이고, <dt>에 용어를, <dd>에 그 설명을 넣습니다. 용어 하나에 설명이 여러 개일 수도 있고, 용어 여러 개가 설명 하나를 함께 쓸 수도 있습니다. 브라우저는 기본으로 설명을 들여 씁니다.

목록은 생각보다 많은 곳에 있습니다. 대부분의 사이트 맨 위 메뉴는 <nav> 안에 링크를 담은 <ul>이고, CSS가 항목을 가로로 늘어놓고 글머리 기호를 숨깁니다. 상품 카드가 줄지어 있는 부분이나 검색 결과도 목록인 경우가 많습니다. 비슷한 것들이 모여 있다면 목록인지 물어 보세요. 대개 답은 「그렇다」입니다.

둘 중 하나를 고르는 쉬운 방법이 있습니다. 항목을 마구 섞는다고 생각해 보세요. 요리 순서나 10위 목록처럼 섞으면 뜻이 달라진다면 순서 있는 목록이므로 <ol>이 맞습니다. 여행 준비물처럼 아무것도 달라지지 않는다면 <ul>을 씁니다. 항목은 짧게, 같은 형태로 시작하면 훑어 보기 쉽습니다.