acronymタグとabbrタグの違い

ホームページ作成

<abbr>と<acronym>は、どちらも略語の説明文を書きたい時に使うHTMLタグです。

時折SEO関連の話題に出てきたりします。

改めて違いを調べてみたので、覚書程度に書いてみます。

<acronym>は、頭文字をとった略語の時に使用します。

例)

SOHO (Small Office Home Office)

SEO (Search Engine Optimization)

<abbr>は、頭文字になっていない略語の時に使用します。

例)

HTML (Hypertext Markup Language)

blog (weblog)

W3Cに載っている例

ABBR:
Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).
ACRONYM:
Indicates an acronym (e.g., WAC, radar, etc.).

使い分けないといけない理由って…と思っていたら、どうやら<acronym>はXHTML2.0で廃止され、<abbr>に統一される予定みたいですね。

この略語タグを使うメリットを分かりやすく言うと、HTML (Hypertext Markup Language) と書くのはスマートではないので、カーソルを合わせた時に説明文として表示されるようにしよう、という事でしょうか。

■使い方

略語をabbrタグで囲み、titleタグ内に正式名称を入れます。

<abbr title="Hypertext Markup Language">HTML</abbr>
<acronym title="Search Engine Optimization">SEO</acronym>

■表示例

カーソルを合わせるとtitle部分に書いた正式名称が表示されます。

HTMLSEO

せっかく説明文を入れておいても、リンクも貼られていないテキストに、わざわざカーソルを合わせることはしないと思うので、

abbrabbrとacronymに、CSSで、カーソルを合わせると何かありそうに見える「下線」を入れる。

さらに「カーソルを?マーク」にする事で(cssで、cursor : help;)ヘルプとか説明文が出るんだろうな~と見当が付くようになりますね。

ホームページ作成


PAGE TOP