レーザー
レーザー（laser）は、
Light Amplification by Stimulated Emission of Radiation
の頭字語で、誘導放出による光の増幅を意味する...
タイトル: dfn要素
SEOタイトル: HTML <dfn> 要素の使い方と <abbr> との違い・アクセシビリティ
| この記事の要点 |
|
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 の意味論に従うなら の方が適切:
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 的に良いです。