フロントエンド

abbrとacronymについて

2009.05.15

カテゴリー >

タグ > ,

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タグを使用してみた例です。

  • WWW
  • LAN
  • WHO
  • HTML

今日はこの辺にしておきます。

トラックバック> http://www.oro.co.jp/mt/mt-tb.cgi/265

コメントを投稿

コメント投稿フォーム

ページ先頭へ戻る

  • デザイン
  • Flash
  • システム
  • フロントエンド
Web Creator Tips