HTML要素 ・ 見出し・文章
<abbr>
略語
HTML や CSS のような略語を示します。title 属性に正式名称を書くと、マウスを乗せたときに表示されます。
01
サンプルコード
HTML
1<p><abbr title="HyperText Markup Language">HTML</abbr>で構造をつくり、<abbr title="Cascading Style Sheets">CSS</abbr>で見た目を整えます。</p>
2<p>締め切りは<abbr title="as soon as possible">ASAP</abbr>でお願いします。</p>
CSS
1abbr[title] {
2 text-decoration: underline dotted;
3 cursor: help;
4}
02
実行結果
ブラウザでの表示点線の付いた略語にマウスを乗せると、正式名称が表示されます
03
解説
abbr は "abbreviation"（略語）の略で、文章中の略語を示す要素です。
title 属性に正式名称を書くと、多くのブラウザではマウスを乗せたときに表示されます。多くのブラウザは、title 付きの abbr に点線の下線を表示します。
ただし title はタッチ操作の端末では表示されません。初めて出てくる略語は、本文の中で正式名称も書いておくと親切です。
04
応用例・注意点
主な属性・CSS
| 名前 | 説明 |
|---|---|
title 属性 | 正式名称や説明 |
text-decoration: underline dotted | 点線の下線で略語であることを示す |
cursor: help | マウスを乗せたときにヘルプのカーソルにする |
初出で正式名称を書く
本文で正式名称を書き、以降は略語だけにする書き方です。
HTML
1<p><abbr>SEO</abbr>（Search Engine Optimization：検索エンジン最適化）の基本を紹介します。</p>
注意点
- 01title の内容は読み上げソフトで読まれない場合があります。重要な説明は本文に書きます。
- 02すべての略語に abbr を付ける必要はありません。読者が知らなそうなものに使います。