◀ 11.

HTML <dfn> 要素の使い方と <abbr> との違い・アクセシビリティ

▶
編集
この記事の要点
  • （Definition）は用語の定義箇所を示す HTML インライン要素
  • 使用例: HTTP とは Hypertext Transfer Protocol のことです
  • デフォルトスタイルはイタリック（font-style: italic）
  • title 属性 や aria-describedby で定義文を補足できる
  • （略語）は別物: 略語の展開を示す。dfn は用語の最初の定義箇所

dfn 要素とは

Definition Element。文中で用語が定義される箇所を意味的にマークアップするインライン要素です。


  HTTP は Web 上で HTML 等のリソースを転送する
  プロトコルです。サーバとクライアントが通信する際の規則を定めています。





  REST（Representational State Transfer）は Web API の
  設計原則の 1 つです。





  CSS で Web ページの
  見た目を定義できます。

デフォルトの見た目

ブラウザのデフォルト CSS は次のとおり:

/* ブラウザ標準 (UA stylesheet) */
dfn {
    font-style: italic;
}

カスタマイズも自由:

dfn {
    font-style: normal;
    font-weight: bold;
    background: #fffbea;
    padding: 0 0.2em;
    border-bottom: 2px solid #f4c430;
    cursor: help;
}

/* hover で title 属性を強調 */
dfn[title]:hover {
    background: #fff3e0;
}

意味論: なぜ や ではなく なのか

HTML5 では「意味（semantic）に応じたタグ」を使うことが推奨されます:

タグ意味使い所
用語が定義される箇所「○○とは××です」の○○
強調（emphasis）文の中で語調を上げる
重要性「警告: 必ず読んで」等
装飾的な太字（意味なし）製品名など慣習的に太字
装飾的なイタリック外国語、思考表現
略語の展開「HTML」

abbr 要素との使い分け




  HTTP は
  Web の通信プロトコルです。






  HTTP は HyperText Transfer Protocol の略で、
  Web 上で HTML 等のリソースを転送するプロトコルです。






  HTTP リクエストには
  GET と POST 等の種類があります。






  CSS は
  Web ページの見た目を制御します。

aria-describedby で定義文を関連付け

用語と定義文が離れている場合、ARIA で紐付けできます:


  Web の仕組みを学ぶには
  HTTP の理解が必要です。

title 属性の活用


  
    API
  
  は他のソフトウェアから機能を呼び出すための窓口です。

用語集ページでの活用


  
API

  
アプリケーション間で機能を呼び出すための仕組み...


  
REST

  
HTTP を用いた Web API の設計原則...


  
GraphQL

  
Facebook 発のクエリ言語。REST に代わる API 設計...

（用語）と組み合わせると、用語集ページとして機械可読になります。

id 属性とアンカーリンク

dfn に id を付けると、用語の定義箇所へ直接リンクできます:




  REST は Web API の設計原則です。






  詳細は REST の定義 をご覧ください。

Wikipedia 風の活用

Wikipedia の各記事の冒頭は （実装上）で太字表示されますが、これは「用語の定義」を示すパターンの典型です。HTML5 の意味論に従うなら の方が適切:


  
レーザー

  

    レーザー（laser）は、
    Light Amplification by Stimulated Emission of Radiation
    の頭字語で、誘導放出による光の増幅を意味する...

JavaScript で動的に用語集を生成

// ページ内のすべての dfn を集めて目次を作る
const terms = document.querySelectorAll('dfn');
const toc = document.querySelector('#term-index');

terms.forEach(dfn => {
  if (!dfn.id) dfn.id = 'dfn-' + dfn.textContent.toLowerCase().replace(/\s+/g, '-');
  const li = document.createElement('li');
  li.innerHTML = `${dfn.textContent}`;
  toc.appendChild(li);
});

SEO とアクセシビリティ

  • SEO: 検索エンジンは「この語の定義はここ」という意味情報として活用する可能性。リッチスニペット候補
  • スクリーンリーダー: 一部の SR は を「定義」と読み上げる。aria-describedby と組み合わせると効果的
  • Reader Mode: ブラウザのリーダーモードで強調表示されることがある

FAQ

Q: 用語が同じページに何度も出てくる場合、毎回 でマークアップする？
A: いいえ。最初に定義する箇所だけ 、それ以降は通常テキストまたは です。

Q: イタリック表示が嫌い
A: CSS で dfn { font-style: normal; } に上書き OK。意味論は維持されます。

Q: 自体に title 属性を付けるとき、ホバー表示の挙動は？
A: 通常のツールチップ表示。title が長い場合は aria-describedby で本文中の説明と紐付ける方が a11y 的に良いです。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 04:04:52 guest 204

人気ページ

最近更新/作成されたページ