カテゴリー > HTML
タグ > abbr , acronym
abbrとacronymはどちらも、略語をマークアップする際に使用するのですが、W3Cの仕様書では、
- ABBR:
- Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).
- ACRONYM:
- Indicates an acronym (e.g., WAC, radar, etc.).
参照元:W3C Recommendation
(http://www.w3.org/TR/1999/REC-html401-19991224/struct/text.html#h-9.2.1)
となっています。
直訳すると
- ABBR
- 省略形を表す。(例:WWW,HTTP,URI,Massなど)
- ACRONYM
- 頭文字を表す。(例:WAC,raderなど)
つまり、acronymタグを使用する際は、どちらも省略形ですので、abbrでもいいわけですし、個人的には明確な使い分けを示唆しているようにも例を見る限り思えません。
それに、HTML5、XHTML2.0でもacronymタグは廃止の予定のようで、abbrで統一するべきだと思われます。
しかし、IE6ではabbrタグに対応しておらず、acronymタグにしか対応していないようです。
ですので、JavaScriptでIE6にはabbrタグをacronymの様に認識させるようにするしかない気がしますが、またそれは別のお話ということで、置いておきます。
具体的な使い方は、WWWのような省略された文字列をabbrタグで括り、
title属性で正式な読み方を記述するというのが一般的のようです。
DEMO
<abbr title="World Wide Web">WWW</abbr>
これをすることにより、ブラウザ上で、マウスカーソルをWWWに乗せると多くのブラウザでポップアップでtitle属性の中身が表示されるようです。
ただ、省略語がテキストではなく、画像の場合は、
DEMO
<abbr><img src="www.gif" alt="WWW" title="World Wide Web" /></abbr>
とした方がいいのかもしれません。
当ブログでは、abbr、acronymタグにマウスカーソルを乗せると、カーソルが?になるように、CSSで以下のように指定しています。
abbr,
acronym {
curosr:help;
}
以下は、実際にabbr、acronymタグを使用してみた例です。
今日はこの辺にしておきます。