HTML講座 / ol・ul・dlと入れ子のリスト

HTML講座

順番が意味を持つ項目にはol、順番が重要でない項目にはul、名称と説明の組にはdlを使います。olとulの各項目はliで表し、サブリストは対応する親のliの中に置きます。

三種類のリストを使い分ける

要素	使う場面	項目の要素
ol	調理や設定の手順など、順番に意味がある	li
ul	持ち物や特徴など、並べ替えても意味が変わらない	li
dl	用語と定義、項目名と値の組	dtとdd

番号や丸印の見た目で選ぶのではなく、項目を並べ替えると意味が変わるかで判断します。記号やインデントなどの装飾はCSSの担当です。

一つのファイルで表示を比べる

次の完全な文書をindex.htmlとしてUTF-8で保存して開きます。順番のある手順、持ち物の箇条書き、名称と説明の組が別々に表示されます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML lists</title>
    <style>
      body { font-family: "Noto Sans KR", sans-serif; }
    </style>
  </head>
  <body>
    <h1>Planning a trip</h1>
    <h2>Supplies</h2>
    <ul>
      <li>Water</li>
      <li>Map</li>
    </ul>
    <h2>Steps</h2>
    <ol>
      <li>Choose dates</li>
      <li>Pack a bag</li>
    </ol>
    <h2>Terms</h2>
    <dl>
      <dt>Departure</dt>
      <dd>The day the trip begins</dd>
      <dt>Arrival</dt>
      <dd>The day you reach the destination</dd>
    </dl>
  </body>
</html>

olの項目の順番を入れ替えて、手順として不自然にならないか確認します。次にulの項目を入れ替えて比べ、元の内容に戻してください。改行やスペースを並べてリストの見た目を再現するより、リスト要素を使う方が構造を伝えられます。

番号の開始位置と逆順を指定する

startはリスト全体の開始番号、liのvalueはその項目の番号を指定します。次の例は5、9、10の順になります。途中で番号を変える必要がある内容にだけ使います。

<ol start="5">
  <li>Fifth step</li>
  <li value="9">Ninth step</li>
  <li>Tenth step</li>
</ol>

reversedは逆順に数えます。次の三項目では、開始番号を別に指定しなければ3、2、1になります。

<ol reversed>
  <li>Third item</li>
  <li>Second item</li>
  <li>First item</li>
</ol>

番号の変更は、順序のない内容に手順としての意味を与えるものではありません。まず内容に合うリストを選び、その後で番号を調整します。

dlで名称と説明を対応させる

dtが名称や用語、ddが対応する説明や値です。辞書だけでなく、製品の仕様や営業時間などにも使えます。

<dl>
  <dt>Opening hours</dt>
  <dd>Weekdays, 9 a.m. to 6 p.m.</dd>
  <dt>Closed</dt>
  <dd>Saturday and Sunday</dd>
</dl>

この営業時間は構文を説明するための架空の例です。一つの名称に複数の説明がある場合も、どの説明がどの名称に対応するかを明確にします。dlの中で通常の項目をliに置き換えないようにしてください。

サブリストは親のliの中に置く

衣類という項目の内訳を示す場合、そのliを閉じる前にサブリストを入れます。サブリストを外側のulの直下に置くのではありません。

<ul>
  <li>Water</li>
  <li>Clothing
    <ul>
      <li>Jacket</li>
      <li>Socks</li>
    </ul>
  </li>
</ul>

次は、順序のある旅行準備の中に、順序のない持ち物一覧を入れた例です。外側と内側で違う種類のリストを使えます。

<ol>
  <li>Choose travel dates</li>
  <li>Pack a bag
    <ul>
      <li>Clothing</li>
      <li>Toiletries</li>
    </ul>
  </li>
  <li>Leave for the trip</li>
</ol>

入れ子の閉じる順序はHTMLの文法と同じです。リスト全体を段落のpで囲まず、段落とリストを独立した構造にします。

リストを確認する

並べ替えで意味が変わるか、各項目が正しい要素に入っているか、名称と説明が対応しているかを確認します。サブリストのインデントが変でも、まずHTMLの親子関係を調べ、その後でCSSを確認してください。MDNのHTMLリストの解説で使用例を確認できます。実際のページで共通メニューを作る場合は複数ページのサイト制作でもリストやリンクの整理を練習できます。

HTML講座