【HTML】略語を表す時に使用！abbrタグの使い方のご紹介！サンプル付き！

会話や、WEBサイト上で、たまに使う機会がある「略語」。

例えば、「RT」と言われて何を連想しますか？一般的には、「リツイート」を意味しますが、人によっては、「リプレイタイム」等、誤った解釈をしてしまう方もいらっしゃるかもしれません。※まあ、話や文章の流れで略語の意味の想像はある程度推測はつきますが、そこは置いておきます。

HTMLでは、そんな略語を表す時の為に、abbrタグというものが用意されています。

初心者向けの参考書では、まず触れられる事がないタグですが、知っておいて損はないと思いますので、今回使い方をご紹介します。

abbrタグとは、囲まれたテキストが略語である事を意味するタグです。「アバー」と読みます。

<p>Twitterを使う上で<abbr title="正式名称が入ります">RT</abbr>は、知っておきたい機能です。</p>

こんな感じで、略語の部分をabbrタグで囲んで使いますが、注目したいのが、title属性の部分です。このtitle属性の部分に、正式名称を入れると、略語の文字の上にマウスカーソルがホバーした時に、正式名称が表示されるようになります。

<p>Twitterを使う上で<abbr title="リツイート">RT</abbr>は、知っておきたい機能です。</p>

Twitterを使う上でRTは、知っておきたい機能です。

上記のサンプルで、title属性に「リツイート」という文字を指定しました。灰色背景のサンプルの「RT」の部分にマウスカーソルを重ねて、数秒待ってみてください。「リツイート」という文字が表示されます。

abbrタグは、初期状態では下線も付かず、通常のテキストと全く変わらない見た目で表示される点にご注意ください。これでは、ホバーした時に正式名称が表示される事がユーザーに伝わりにくいですね。

そこで、対策として、abbrタグに対してCSSで装飾を加える事をオススメします。

CSSで装飾する事

・テキストに点線を付ける
・cursorプロパティで、マウスポインタの形状を変更する

abbr {
  border-bottom: 1px dotted;
  cursor: help;
}

上記の指定で、下線は「点線」に、カーソル形状は「？マーク」で表示されるようになり、周りと差別化を図る事ができます。※border-bottomプロパティ、cursorプロパティの値は、お好みで調整いただければと思います。

今回は、略語を表すタグである、abbrタグについてご紹介しました。

知る機会が少ないタグではあるかもしれませんが、知っておいて損はないテクニックだと思いますので、是非使っていただければ幸いです。