このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
HTML で用語を定義する
HTML は、インラインであろうと構造化された用語集であろうと、記述の意味を伝達するいくつかの方法を提供します。 この記事では、キーワードを定義する際に適切にマークアップする方法について説明します。
| 前提条件: | 基本的な HTML 文書の作成方法に精通している必要があります。 |
|---|---|
| 目標: | 新しいキーワードを導入する方法と説明リストを作成する方法を学びます。 |
用語の意味が必要なときは、おそらくまっすぐに辞書や用語集に行くでしょう。 辞書や用語集は、キーワードを 1 つ以上の説明と形式的に関連付けます。 この場合は次のようになります。
- 青い（形容詞）
晴れた日の空のような色。「晴れた青空」
しかし、私たちは常に次のように形式的ではない形でキーワードを定義しています。
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> <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>メモ:基本的なパターンは、ご覧の通り、<dt> の用語と<dd> の説明を交互に並べるというものです。もし 2 つ以上の用語が続けて出てきた場合、続く説明はそれらすべての用語に適用されます。もし 2 つ以上の説明文が同列にある場合、それらはすべて最後に指定された用語に適用されます。
視覚的な出力を改善する
視覚ブラウザーには、前述のリストが次のように表示されます。
キーワードをより目立たせたいのであれば、太字にしてみるのもよいでしょう。 HTML は視覚的な媒体ではないことを忘れないでください。すべての視覚効果にはCSS が必要です。ここで必要なのは、 CSS のfont-weight プロパティです。
dt { font-weight: bold;}この結果、下記のような少し読みやすい結果が得られます。