【HTML】abbrタグで略語の正式名称や説明を定義する方法

このページについて

このページではHTMLで使う事ができるabbrタグの使い方を解説しています。

abbrタグは略語または頭文字の説明を定義します。略語とはそれこそHTMLだったり、CSSだったりするものです。

<abbr title="Hyper Text Markup Language">HTML</abbr>

このように書きます。開始タグと終了タグで囲んだ文字に対して、title属性でその中身を定義します。マウスオーバーするとその説明が表示されるという仕組みになります。

HTMLやCSSで確認することができます。実際にはリンクや太字などの文字が変化するわけではないので、一見すると何も変わっていないように見えますがスタイルシートで変化を与えてあげる事でわかりやすくできます。

abbrタグでのみ使える属性はなく、グローバル属性とイベント属性をサポートしています。グローバル属性とイベント属性はサポートされていればどのタグでもつかう事ができる属性になります。

abbrタグと一緒にdfnタグを使う事で、用語をマークアップしてより分かりやすくできます。

 <dfn><abbr title="ハイパーテキストマークアップランゲージ">HTML</abbr></dfn>

dfnタグは「そのドキュメント中で使う用語を定義」という機能があり、ブラウザ上ではイタリック体で表示されます。dfnタグ単体では用語の説明までは定義できないため、abbrタグと一緒に使う事で補完する事が可能となっています。実際の見た目は以下のようになります。

HTML

スタイルシートによる装飾などはせずとも、このように若干分かりやすくなります。

abbrタグは特定の用語に対してその説明をしたりする事ができます。専門用語とかが多く出るような業界においてはこのようなタグを使ってあげると見ている人にとって分かりやすかったりするかな？と思ったりもしますが、マウスオーバーしていないと表示されないのが欠点です。

スマホで見ている方に対してもってことを考えると、その用語付近に別で説明スペースを設けるのが一番確実そうですね。