acronymタグとabbrタグの違い

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

たまにSEO関連の話題の時に出てくるので、改めて違いを調べてみました。

▼もくじ

タグは略語の“略し方”で使い分ける

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

例）
WWW　(World Wide Web)
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で廃止されるようです。

<acronym>要素は HTML5 で削除され、<abbr>に統一されました。

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

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

パソコンから閲覧している場合、マウスカーソルを合わせるとtitle部分に書いた正式名称が表示されます。

例） HTML / SEO

下線を引いたり、CSSでカーソルの形を変えておくと、説明が表示されるという事が分かりやすいかもしれません。

ただし、スマートフォンのブラウザでは説明が表示されませんので、スマートフォンからのアクセスが多いサイトでは

HTML(<abbr>Hypertext Markup Language</abbr>)

と、説明もあらかじめ見える形にした方が良いかもしれません。