abbr要素

Updated / Published

abbr要素（abbreviation）は長い単語や語句の略語（省略）を示すインライン要素です。略語とは、もとの語形の一部分を省略して簡略にした語、または HTML のように頭文字だけをとったものをいいます。

abbr要素は title属性と組み合わせて使います。title属性の値には、その略語が省略される前の言葉をフルスペルで記述します。たとえば、HTMLであれば、title属性はtitle="HyperText Markup Language"と記述します。

その略語が本文で最初に出てくるところで正式名称(省略していない状態の言葉)を示すために使い、同じ略語が何度も登場する場合は以降のものには指定する必要はないでしょう。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素分類
インライン要素
開始タグ
必須
終了タグ
必須
非推奨
-
内容モデル

abbr要素に指定できる属性

共通属性
イベント属性

abbr要素のサンプル

<p>Web標準化団体の<abbr title="World Wide Web Consoritum">W3C</abbr>...</p>
<p>検索エンジン対策の<abbr title="Search Engine Optimization">SEO</abbr>...</p>

abbr要素のスタイル

視覚的なモダンブラウザではabbr要素の内容には点線の下線が表示され、ポインティングデバイス（マウスやノートパソコン付属のトラックパッドなど）のカーソルをその部分にあわせることで title属性に指定した略語のもととなる単語や語句をツールチップで表示します。

ただし、Internet Explorerはバージョンを問はずデフォルトでは点線の下線を表示する設定にはなっていません。Internet Explorer 7からは、カーソルをあわせた時にtitle属性の値をツールチップで表示します。点線の下線についてはCSSのborderプロパティで非表示にしたり、実線にしたりなどの表示を調節できます。"abbr { border-bottom : 1px dotted ; }" のように記述することで主要ブラウザにおける表示を統一することができます。

なお、Internet Explorer 6はabbr要素をサポートしていないため、未知の要素として扱います。title属性の指定された値のツールチップも反映されません。Internet Explorer 6でabbr要素を認識させるには、次の設定が必要です。

abbr要素をIE6に認識させる

次のスクリプトを定義します。

<script type="text/javascript">
if(typeof document.documentElement.style.maxHeight == "undefined"){
document.createElement("abbr");
}
</script>

最初の条件文はIE7未満(IE6以下)であることを判定するためのものです。IE6以下ではmaxHeightプロパティが定義されていないため、undefinedとなります。そしてundefinedであればdocument.createElement("abbr")を実行せよというコードです。

document.createElement("abbr")によりabbr要素を作成しています。これにより、未知の要素であったabbr要素が認識できるようになり、CSSにおいてもスタイルの操作がおこなえるようになります。title属性の指定された値を表示するツールチップも有効になります。

acronyms(頭字語)もabbr要素に統一

似たような要素に略語の中でも一つの単語として発音される略語である頭字語を示す場合に用いる acronym要素があります。abbr要素と acronym要素の違いは、一応、音声環境での読み上げ（表現）時に異なる発音で読み上げることが期待されますが、実際にはユーザが利用している音声出力環境にその語が収録されているかのボキャブラリー（語彙）に依ります。仕様においても両要素の明確な使い分けがなされていません。

なお、HTML5では abbr要素がacronyms(頭字語)の役割も含み、acronym要素が廃止されたため、略語のマーク付けはabbr要素に統一されました。そのためHTML4.01, XHTML1.0, XHTML1.1においても abbr要素とacronym要素を特別使い分ける必要はなく、略語のマーク付けはabbr要素に統一しておくと良いでしょう。

abbr要素の実装状況

IE
7〜（ただし、下線の表示はなし）
Firefox
◯
Opera
◯
Safari
◯
Chrome
◯