<abbr>: 省略語要素

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

省略語をマークして理解しやすくするは、 <abbr> 及び関連要素を使用する学習のガイドです。

属性

この要素にはグローバル属性のみに対応しています。 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>

これは特に、コンテンツで説明している用語や概念になじみがない人、その言語の初心者、認知症の人などに有益です。

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• <abbr> 要素の使用方法
• その他の文字レベルの意味付けを行う要素: <a>, <em>, <strong>, <small>, <cite>, <q>, <dfn>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <b>, <i>, <mark>, <ruby>, <rp>, <rt>, <bdo>, <span>, <br>, <wbr>
• 廃止された <acronym> 要素、役割は <abbr> へ移管