abbr要素 - 省略語、頭字語

2017/02/09

abbr要素は省略語や頭字語を表す要素です。要素の中身に省略語や頭字語を指定して、title属性で正式名称を指定します。人間だけでなく、ユーザーエージェントに対して省略語であることを示せます。

概要

名前

abbr (Abbreviation)

カテゴリ

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

Chrome / Firefox / Safari

abbr[title] {
    text-decoration: underline dotted;
}
:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

abbr[title] {
    text-decoration: dotted underline;
}

:focus {
	outline-color: -webkit-focus-ring-color;
	outline-style: auto;
	outline-width: 5px;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-abbr-element

属性

title属性

この属性はグローバル属性の1つですが、abbr要素では役割が変わります。abbr要素の中身のテキスト(省略語、頭字語)に対する正式名称を意味します。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

abbr要素は省略語をマークアップします。正式名称はtitle属性に指定します。下記は、スマホという省略語をマークアップした例です。title属性なので、デスクトップのブラウザならホバーした時にツールチップが表示されるでしょう。

<p><abbr title="スマートフォン">スマホ</abbr>は便利だ。</p>

abbr要素は頭字語もマークアップできます。頭字語とは、頭文字を繋ぎ合わせた略称のことです。例えば、NATO(North Atlantic Treaty Organization)やNASA(National Aeronautics and Space Administration)が挙げられます。

<p>彼は、<abbr title="National Aeronautics and Space Administration">NASA</abbr>の出身だ。</p>

デモ

abbr要素のデモです。マウスポインタの環境の方は、テキストにカーソルを合わせてみて下さい。

<!-- このコードは編集できます。 -->

<p>
	最近の<abbr title="スマートフォン">スマホ</abbr>は写真を撮るのにも便利だ。
</p>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
●	●	●	●	● 7+	●	●	●

概要

属性

title属性

グローバル属性

サンプルコード

デモ

サポート状況

関連記事