HTML & CSS - abbr タグ

基本的な使い方

abbr タグは略語を表します。abbr タグの基本的な書き方は、以下のようになります。<abbr></abbr> の中には略語を記述し、title 属性には略語の完全形、または説明文を記述します。

<abbr title="HyperText Markup Language"> HTML </abbr>
abbr タグの基本的な書き方
HTML
ブラウザ表示

ブラウザによっては abbr で囲まれたテキストにマウスを乗せると、title 属性に指定したテキストが表示されます。また、Google Chrome などのブラウザでは title 属性を持つ abbrタグで囲まれたテキストには下線が引かれます。

使用上の注意

ドキュメントに登場する略語は、すべて abbr タグで記述する必要はありません。ただし、略語が読み手にとって馴染みのない単語である場合や、略語の意味について注釈、または説明が必要である場合には記述した方が良いでしょう。

abbr タグで title 属性の記述は必須ではありません。完全形や説明を加えずに略語を記述する場合は、以下のように abbr タグのみで記述します。以下のような意味論的な略語のマークアップの記述も許容されています。

<abbr> HTML </abbr>
完全形や説明を加えずに略語を記述する

CSS によるスタイルの変更

abbr タグに囲まれた下線の色を CSS で変更するには、以下のように記述します。

abbr {
    text-decoration: underline dotted blue;
}
CSS でスタイルを変更する
HTML
ブラウザ表示

title 属性を持つ abbr タグに対してのみ CSS を適用したい場合は、以下のように記述します。

abbr[title] {
    text-decoration: underline dotted blue;
}
CSS でスタイルを変更する
HTML
ブラウザ表示

外部リンク