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="http://www.mozilla.org">mozilla.org</a> からダウンロードできます。
</p>

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

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

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

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

<dl>
  <dt>jambalaya</dt>
  <dd>
    rice-based entree typically containing chicken, sausage, seafood, and spices
  </dd>

  <dt>sukiyaki</dt>
  <dd>
    Japanese specialty consisting of thinly sliced meat, vegetables, and
    noodles, cooked in sake and soy sauce
  </dd>

  <dt>chianti</dt>
  <dd>dry Italian red wine originating in Tuscany</dd>
</dl>

グラフィカルブラウザーに前述のリストが表示される方法は次のとおりです。

キーワードをより際立たせたい場合は、それらを強調することができます。 HTML は視覚的な媒体ではないことを忘れないでください。 すべての視覚効果に対して CSS が必要です。 CSS の font-weight プロパティは、ここで必要なものです。

dt {
  font-weight: bold;
}

これにより、以下のわずかに読みやすい結果が生成されます。

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