複数の用語と説明をグループ化するには、dlの中で1つ以上のdt要素の後に1つ以上のdd要素を配置します。このガイドでは、適切なグループ化の選び方、Macのテキストエディットで小さな用語集を作成する方法、用語同士の関係が明確に保たれていることを確認する方法を説明します。

HTMLの説明リストでは用語をどのようにグループ化するか

説明リストは、名前と値の関連付けを表します。各グループには少なくとも1つの用語と1つの説明が含まれ、すべての用語が説明より前に置かれます。説明の後に続く次の用語は、新しいグループの始まりです。こうした関係は、文書内の順序によって決まります。HTML Standard: dl要素

用語集では、用語がレイアウト用語で、その説明が意味を解説するものになる場合があります。連続する複数の用語で、1つの説明を共有できます。別名ごとに同じ説明を繰り返す必要はありません。MDN: 説明用語要素

実際に考えるべきなのは、何をひとまとまりにするかです。マークアップを書く前に、想定する関連付けをそれぞれ普通の言葉で書き出してください。この架空の例では、「Gap」と「Gutter」は1つの説明を共有し、「Tile」には2つの異なる意味があります。

想定する関係 1つのグループ内の構造
1つの用語と1つの説明 1つのdt、続けて1つのdd
1つの説明を共有する複数の用語 すべてのdt要素、続けて1つのdd
1つの用語と複数の別個の説明 1つのdt、続けて複数のdd要素
複数の用語と複数の別個の説明 すべてのdt要素、続けてすべてのdd要素
複数の段落を含む1つの説明 複数の段落を含む1つのdd

これらのパターンは、標準のグループ化規則に沿っています。特に、別個の説明は別々の値を表し、1つの値に属する段落は同じddの中に置きます。HTML Standard: 説明リストのセマンティクス

どの説明を同じグループにまとめるべきか

次の基準で判断してください。提案するグループ内のすべての説明は、そのグループのすべての用語に無理なく当てはまるでしょうか。答えが「いいえ」なら、内容を別々のグループに分けます。これは関連付けモデルに基づく編集上の確認方法で、意図しない組み合わせがページに表示される前に見つけるのに役立ちます。

複数の用語と1つの共通する説明

このコード片では、架空の用語集にある2つの用語が1つの説明を共有しています。両方の用語が説明より前に置かれており、MDNが説明する複数用語のパターンに沿っています。MDN: 複数の用語と1つの説明

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

これは、説明がたまたま抜けている別々の項目が2つあるという意味ではありません。この例では、意図的に2つの名前を1つのグループとして扱っています。用語集でそれぞれ異なる意味を割り当てる場合は、各名前に個別の説明を付けてください。

1つの用語と複数の別個の説明

同じグループ内では、ある説明の後に別の説明を続けられます。ここでは、架空の用語集で「Tile」を2つの異なる概念に使っています。MDN: 説明詳細要素

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

同じ複数の意味を共有する名前がいくつかある場合は、追加の用語を最初の説明より前に配置します。最初の用語が最初の説明だけに対応し、2番目の用語が2番目の説明だけに対応すると考えないでください。そのように対応させるには、グループを分ける必要があります。MDNでは、複数の用語と説明を組み合わせる方法を明示的に説明しています。MDN: 複数の用語と説明

複数の段落を含む1つの説明

2つ目の段落が最初の説明を詳しく述べるものなら、両方を1つのddの中に置きます。ddには段落を含むフローコンテンツを配置できます。こうすれば、読みやすい内部構造を保ちながら、1つの説明として扱えます。MDN: 説明詳細要素の技術的概要

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

Macのテキストエディットで完成例を作成する

新しいファイルから始めると、既存の文書を変更せずに結果を確認できます。テキストエディットでFile > New、続けてFormat > Make Plain Textを選択します。Appleは、これをHTMLファイルを作成する際の開始手順として案内しています。Apple: MacのテキストエディットでHTML書類を扱う

以下の文書全体を貼り付けます。上記の3つの判断を小さな用語集にまとめたものです。各グループには個別のdivラッパーがあり、グループ全体にスタイルや属性を適用できる構造としてサポートされています。MDN: 名前と値のグループをラップする

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

File > Saveを選び、ファイル名にlayout-glossary.htmlと入力してSaveをクリックします。テキストエディットから使用する拡張子を尋ねられたら、Use .htmlを選択します。これは、手書きのHTMLファイルを保存するためにAppleが案内している手順です。Apple: HTMLファイルを作成する

保存したファイルをブラウザで開きます。表示されたテキストが、次の3つの想定した関連付けに合っているか確認します。「Gap」と「Gutter」は1つの説明を共有し、「Tile」には2つの説明があり、「Canvas」には2つの段落を含む1つの説明があります。ブラウザの標準の余白が好みのデザインと異なっていても、この比較で意図した内容の関係を確認できます。

編集時にもグループ化を保つ

HTMLでは、dl内に用語と説明のグループを直接配置する構造と、div要素でグループを囲む構造のどちらも使えます。1つのリスト内では、どちらか一方の構造を選んで使います。上記のラッパーを使った例では、各グループの用語と説明をラッパーの直下に置きます。用語と説明を別々のコンテナで囲まないでください。HTML Standard: 説明リストのコンテンツモデル

例を修正するときは、次の短い確認手順を使います。

  1. 変更するグループを見つける。
  2. そのグループの用語全体を説明より前に置く。
  3. 新たな説明文が別の値なのか、現在の値に属する追加の段落なのかを判断する。
  4. 関連のない用語を追加するときは、新しいグループを作る。
  5. 文書を保存して、ブラウザのプレビューを再読み込みする。

たとえば、2つの「Tile」の説明の間に「Panel」を追加すると、意図した関係が途切れます。後に続く説明は、新たに始まったグループに属するためです。新しい用語と説明は、別のラッパーに入れてください。これは、説明の後に現れる用語が新しいグループの始まりになるという標準の規則に沿っています。HTML Standard: グループ化のアルゴリズム

テキストエディットでファイルを開き直したときに書式付きテキストとして表示される場合は、File > Openを使って書類を選び、Show Optionsをクリックして、開く前にIgnore rich text commandsを選択します。今後作成するファイルについては、TextEdit > Settings > Open and Saveの下にあるDisplay HTML files as HTML code instead of formatted textを選択します。Apple: HTML書類をコードとして表示する

最後の確認では意味に注目します。用語を特定し、共有する説明を特定し、段落の区切りが意図せず別の値になっていないことを確かめます。関連付けが正しければ、あとは文書に必要な表示スタイルを適用するだけです。

出典