【abbrタグとは】HTMLで略語を書くときはコレで囲おう

僕のブログでは、長い単語は省略したいな。

けど、略語がわからない人もいると思うし…。

何か便利な方法はないかな？

こんなお悩みがあれば、<abbr>を使って長い単語は省略しつつ、マウスオンで正式名称が捕捉される仕組みを作っておきましょう。

本記事で<abbr>の使い方を解説します。

スポンサードサーチ

本記事のもくじ

【abbrタグとは】使い方の基本を解説

<abbr>は、それで囲んだ部分が略語であることを示すためのHTMLタグです。

アルファベットのままに「エー・ビー・ビー・アール」と読みまして、“abbreviation（アブリビエーション／意味：省略・略語）”の略です。

ウェブサイト内で略語を使用し、コンテンツの流れの外で説明を加えたいときに使われるタグになります。

補足：acronymタグ

HTML4までは、<acronym>というタグで略語をマークアップしていました。

HTML5では廃止されており、使えないので注意しましょう。

<abbr>の書き方は簡単です。

abbrタグの書き方

<p>僕が住む<abbr title="ロサンゼルス">ロス</abbr>では、ラーメンが人気です。</p>

このように、“ロス”という略語があった場合には、<abbr>で囲み、title属性に正式名称“ロサンゼルス”を記載するだけです。

専門的な記事やブログを書いていると、普通の人は知らない略語を使う機会も多いので、なるべく<abbr>で情報を補完しておきましょう。これによりサイトのアクセシビリティを高めることが可能です。

<abbr>で囲んだ略語は、ブラウザ上で次のように表示されます。

僕が住むロスでは、ラーメンが人気です。

このように、略語の部分にマウスを当てると、title属性に書かれた情報が表示されます。

なお、<abbr>で囲んだ単語には、ほとんどのブラウザで自動的に下線が引かれます。

<abbr>のタグ内に書くtitle属性について、使い方をまとめます。

title属性は必ず書かなければいけないという決まりはありません。

とはいえ、略語を読んだだけでは意味を理解できない人に向けて書くものなので、読者のためを思うなら記述しておいたほうがいいかなと思います。

また、title属性に略語に関する情報以外を書くのはやめましょう。

title属性の例

<!---良い例--->
<abbr title="アメリカ第2の都市。正式名称はロサンゼルス。">ロス</abbr>
<abbr title="ロサンゼルス">ロス</abbr>

<!---悪い例--->
<abbr title="ラーメンが人気の街">ロス</abbr>

ロサンゼルスでラーメンが人気なのは事実ですが、それ自体は“ロス”という略語の説明にはならないので、このような使い方はNGです。

Mana SBクリエイティブ 2019年03月18日頃

スポンサードサーチ

本記事は以上です。

<abbr>を使って、略語には正式名称も記載しておきましょう。

とはいえ、<abbr>を使いすぎると、逆に読みにくい記事なってしまうので、説明が長くなりすぎるようだったら、本文で説明するようにしておくと良いと思います。

おわり。