HTML で用語を定義する

教科書では、キーワードが初めて出てきたときに、キーワードを太字にしてすぐに定義するのが一般的です。

私たちは HTML でもそうしていますが、 HTML は視覚的なメディアではないので太字を使いません。 <dfn> は、初めて出現するキーワードをマークするための特別な要素です。 <dfn> タグは、定義（段落全体）ではなく定義される単語を囲みます。

<p><dfn>Firefox</dfn> は、Mozilla Foundation によって作成されたウェブブラウザーです。</p>

<abbr> で略語を特別にマークすることが最適です。 これにより、スクリーンリーダーが適切に読むことができ、すべての略語を統一的に操作できるようになります。 新しいキーワードの場合と同様に、初めて出現したときに略語を定義する必要があります。

<p>
  <dfn><abbr>HTML</abbr> (hypertext markup language、ハイパーテキストマークアップ言語)</dfn> は、ウェブ上のドキュメントを構造化するために使用される記述言語です。
</p>

<dfn> は定義されたキーワードをマークし、現在の段落がキーワードを定義していることを示します。 言い換えれば、<dfn> 要素とそのコンテナーの間に暗黙の関係があります。 より正式な関係を望む場合、または定義が段落全体ではなく 1 つの文で構成されている場合は、 aria-describedby 属性を使用して、より正式に定義に関連付けることができます。

<p>
  <span id="ff">
    <dfn aria-describedby="ff">Firefox</dfn>
    は、Mozilla Foundation によって作成されたウェブブラウザーです。
  </span>
  <a href="https://www.mozilla.org">mozilla.org</a> からダウンロードできます。
</p>

支援技術は、この属性を使用して、指定された用語の代替テキストを見つけることができます。 <dfn> 要素だけでなく、キーワードを囲む任意のタグで aria-describedby を使用して定義できます。 aria-describedby は、説明を含む要素の id を参照します。

説明リストは、用語とそれに対応する説明のリスト（例: 定義リスト、辞書の項目、よくある質問、キーと値のペア）です。

説明された用語は、 <dt> 要素内にあります。 対応する説明が直ちに続き、 1 つ以上の <dd> 要素に含まれています。 説明リスト全体を <dl> 要素で囲みます。

ここでは簡単な例として、食べ物と飲み物の種類を説明します。

<dl>
  <dt>ジャンバラヤ</dt>
  <dd>
    ふつう鶏肉、ソーセージ、シーフード、スパイスを含む米ベースの料理
  </dd>

  <dt>すき焼き</dt>
  <dd>
    日本の名物料理。薄切りの肉、野菜、麺を酒と醤油で煮込んだもの。
  </dd>

  <dt>キャンティ</dt>
  <dd>トスカーナ産辛口赤ワイン</dd>
</dl>

視覚ブラウザーには、前述のリストが次のように表示されます。

キーワードをより目立たせたいのであれば、太字にしてみるのもよいでしょう。 HTML は視覚的な媒体ではないことを忘れないでください。すべての視覚効果には CSS が必要です。ここで必要なのは、 CSS の font-weight プロパティです。

dt {
  font-weight: bold;
}

この結果、下記のような少し読みやすい結果が得られます。

• <dfn>
• <dl>
• <dt>
• <dd>
• aria-describedby 属性の使用方法