<abbr>: 省略語要素

ジャンプ先:
  1. 属性
  2. 使用上のメモ
  3. 既定のスタイル
  4. 例
  5. アクセシビリティの考慮事項
  6. 仕様書
  7. ブラウザーの対応
  8. 関連情報

HTML の省略語要素 (<abbr>) は省略語や頭字語を表します。任意で title 属性で、省略語の完全形又は説明を提供することができます。 title 属性はこの完全な説明のみを含み、それ以外を含んではいけません。

省略語をマークして理解しやすくするは、 <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 APIis intended to fun ction 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> の定義		 勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 2Edge 完全対応 ありFirefox 完全対応 1
補足
完全対応 1
補足
補足 Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
IE 完全対応 7Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, yyss, fscholz, ethertank, Marsf, Yuuki Takahashi
最終更新者: mfuji09,