HTML の略語要素 (<abbr>
) は略語や頭字語を表します。任意で title
属性で、略語の完全形または説明を提供することができます。 title
属性はこの完全な説明のみを含み、それ以外を含んではいけません。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
略語をマークして理解しやすくするは、 <abbr>
及び関連要素を使用する学習のガイドです。
コンテンツカテゴリ | フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
許可されている ARIA ロール | すべて |
DOM インターフェイス | HTMLElement |
属性
この要素にはグローバル属性のみに対応しています。 title
属性は <abbr>
要素と共に使用すると、特定の意味論的な意味を持ちます。これは完全な人間が読める形の説明または略語の完全形を含む必要があります。この文字列は、マウスポインターが要素の上で静止したとき、ブラウザーがツールチップとして表示することが良くあります。
それぞれの <abbr>
要素は他の独立しています。同じ文書内で他の省略形ではない表現の文字列に自動的に結びつかない場合は、 title
を使用してください。
使用上のメモ
よくある使用例
必ずしもすべての略語を <abbr>
でマークアップする必要はありません。しかし、有用な場合がいくつかあります。
- 略語が使用され、文書コンテンツの流れの外で完全形や定義を提供したい場合は、
<abbr>
を適切なtitle
と共に使用してください。 - 読み手にとってなじみのない略語を定義する場合、用語を
<abbr>
を使用して表現し、title
属性や行内文字列で定義を提供してください。 - テキスト内に略語が存在し、意味の注釈が必要な場合、
<abbr>
要素は有用です。一方、これは整形やスクリプトの目的で使用することができます。 <abbr>
は<dfn>
との組み合わせで、略語や頭字語の用語の定義を行なうことができます。以下の略語の定義の例をご覧ください。
文法的な考慮事項
文法的に数を表現する言語(つまり、項目の数が文の文法に影響する言語)では、 <abbr>
要素内の title
属性で同じ文法的な数値を使用してください。これは、アラビア語のように2よりも大きい数の文法を持つ言語で特に重要ですが、英語にも当てはまります。
既定のスタイル
この要素の目的は単に作者の利便性のためであり、すべてのブラウザーが既定でこの要素を行内 (display
: inline
) で表示します。ただし、既定のスタイルはブラウザーによりさまざまです。
- Internet Explorer など一部のブラウザーは、この要素を
<span>
要素と同じスタイルを適用します。 - Opera、Firefox などのブラウザーは、この要素の内容に点線の下線を引きます。
- ごく一部のブラウザーは、ドットの下線を引くだけでなく、小さな大文字で表示するものがあります。本件を扱う CSS に
font-variant
: none
のようなスタイルを追加することで、このようなスタイルを避けることができます。
例
意味論的な略語のマークアップ
完全形や説明を提供せずに略語をマークアップするには、この例にあるように、単に属性なしで <abbr>
を使用してください。
HTML
<p><abbr>HTML</abbr> を使うのは楽しくて簡単です!</p>
結果
略語の整形
この単純な例に見られるように、 CSS を使用して略語のために専用のスタイルを設定することができます。
HTML
<p><abbr>CSS</abbr> を使うと、略語の整形ができます!</p>
CSS
abbr { font-variant: all-small-caps; }
結果
完全形の提供
title
属性を追加することで、略語や頭字語の完全形や定義を提供することができます。
HTML
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
結果
略語の定義
こちらに示すように、 <abbr>
と <dfn>
を組み合わせることで、より正式に略語を定義することができます。
HTML
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a markup language used to create the semantics and structure of a web page.</p> <p>A <dfn id="spec">Specification</dfn> (<abbr title="Specification">spec</abbr>) is a document that outlines in detail how a technology or API is intended to function and how it is accessed.</p>
結果
略語をマークして理解しやすくするの記事にもっと詳細な例があります。
アクセシビリティの考慮事項
頭字語や略語を、ページ内で最初に使われたときに完全な形で綴ることは、特に中身が技術用語や産業用語であった場合に、人々が理解するのに有益です。
例
<p>JavaScript Object Notation (<abbr>JSON</abbr>) は軽量のデータ交換形式です。</p>
これは特に、コンテンツで説明している用語や概念になじみがない人、その言語の初心者、認知症の人などに有益です。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <abbr> の定義 |
現行の標準 | |
HTML5 <abbr> の定義 |
勧告 | |
HTML 4.01 Specification <abbr> の定義 |
勧告 |
ブラウザーの対応
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome 完全対応 2 | Edge 完全対応 あり | Firefox
完全対応
1
| IE 完全対応 7 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。