<abbr>略語を表す

<abbr>タグは略語(abbreviation)、または頭字語(acronym)を表す要素です。

また<abbr>のtitle属性の値に略語・頭字語の正式名称を指定すると、abbr要素にマウスカーソルを乗せた際にツールチップとしてtitle属性の値が表示されます。 (title属性の値には省略される前の正式名称を記述しなければなりません)

abbr要素の部分はFirefox7、Opera11.5では点線の下線付き文字で表示されますが、Internet Explorer8、Google Chrome14、Safari5.1では通常の文字で表示されます。

なお略語・頭字語には必ずしもabbr要素を付ける必要はありません。 例えばあまり知られていないような略語などを使用する場合には、最初に出てくる略語に対してtitle属性を指定したabbr要素でマークアップするか、略語を最初に使うテキストに正式名称を含んでおくとユーザーに対して親切となるでしょう。

HTML5での変更点

HTML4.01以前は、略語に対してはabbr要素、頭字語に対してはacronym要素で示す事になっていました。 ですがHTML5ではacronym要素が廃止され、頭字語、略語のどちらの場合でもabbr要素を使用する事ができます。

またHTML5では略語と頭字語を別の要素として区分されていないので、特に気にする必要はありませんが、略語と頭字語の違いを知りたい場合はHTML4.01のABBR要素のページを参照下さい。

書式

  • <abbr 属性="値">~</abbr> ……… 略語や頭字語を表す

属性

title="" 省略の元となる正式名称を指定

使用した時の例

<p><abbr>CSS</abbr>がやっと理解できました</p>

<!-- title属性を指定した場合 -->
<p><abbr title="Cascading Style Sheets">CSS</abbr>がやっとわかってきました!</p>

ブラウザ上の表示例

CSSがやっと理解できました

CSSがやっとわかってきました!

※title属性を指定したabbr要素の上にカーソルを乗せると、正式名称が表示されます。

対応ブラウザなどのデータ

形式 <abbr>~</abbr> カテゴリ フローコンテンツ, フレージングコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~