HTML で用語を定義する

HTML は、インラインであろうと構造化された用語集であろうと、記述の意味を伝達するいくつかの方法を提供します。 この記事では、キーワードを定義する際に適切にマークアップする方法について説明します。

前提条件: 基本的な HTML 文書の作成方法に精通している必要があります。
目的: 新しいキーワードを導入する方法と説明リストを作成する方法を学びます。

用語の意味が必要なときは、おそらくまっすぐに辞書や用語集に行くでしょう。 辞書や用語集は、キーワードを 1 つ以上の説明と正式に関連付けます。 この場合は次のようになります。

Blue (Adjective)

Of a color like the sky in a sunny day. "The clear blue sky"

Of a subtle sadness, melancholy. "I'm feeling blue"

しかし、私たちは常に次のように非公式にキーワードを定義しています。

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

これらのユースケースに対処するために、HTML には説明と説明された単語をマークするためのタグが用意されているので、読者に意味が適切に伝わるようになります。

非公式の説明をマークする方法

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

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

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

メモ: 太字のもう 1 つの用途はコンテンツを強調することです。 太字自体は HTML の概念ではありませんが、強調を示すタグがあります。

特別な場合: 略語

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

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

メモ: HTML 仕様は実際には略語を拡張するために title 属性を用意しています（英語）。 ただし、これはインライン展開を提供するための許容可能な代替方法ではありません。 title の内容は、マウスを使用していない限り、ユーザーには完全に隠されています。 この仕様も同様にこれを認めています（英語）。

アクセシビリティの向上

<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>

メモ: ご覧のとおり、基本パターンは <dt> の用語を <dd> の説明で置き換えることです。 行内に 2 つ以上の用語が存在する場合は、以下の説明はそれらのすべてに適用されます。 行内に 2 つ以上の説明が存在する場合、それらはすべて最後に指定された用語に適用されます。

視覚的な出力を改善する

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

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

dt {
  font-weight: bold;
}

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

より詳しく知る