acronymタグとabbrタグの違い

HTML・CSS

<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>)

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

速度&安定性が人気のレンタルサーバー
国内最速!『ConoHa WING』
ConoHa WING

初期費用無料最低利用期間無し(日割りOK)、独自SSL無料。

高速・高機能・高安定性はもちろん、分かりやすい管理画面なので初心者でも使いやすい。

「WordPressかんたん移行」機能で他サーバーからの引越しも楽々!特にwordpressの表示が重くて困っている方にオススメのレンタルサーバーです。

高速&初心者でも安心『エックスサーバー』

初心者でも安心の電話サポート付きの高速サーバー。独自SSLも無料。

安定性とセキュリティ対応の早さは特筆!国内高速バックボーンと、独自の高速化機能でwordpressもサクサク動きます。

WordPress簡単インストールや、他サーバーから簡単に引越せる「WordPress簡単移行」、自動バックアップなど全部揃っています。

カゴヤのレンタルサーバー

堅実・安心、サポート力で人気があるサーバーです。高速環境のほか、自社所有のデータセンターで管理・運営されているほか、wordpress専用サーバーなどニーズに併せたプランが豊富なところも魅力。

HTML・CSS
yui

趣味が高じてフリーランスWEBデザイナーになり早10年。2児の母
ホームページ作りの楽しさと、作ったHPから申込・問合せがどんどん入ってくる楽しさを共感できる人を増やしたくてコツなどを発信しています。

フォローする
ホームページの作り方