abbrタグ 略語を表す

<abbr>エービービーアールタグに囲まれた部分は略語であることを表します。主に段落(pタグ)やリスト(liタグ)の中で使用します。

<p>実は<abbr title="学生割引">学割</abbr>もあります。</p>

😺abbrは、abbreviation(省略や短縮という意味)の略です。

title属性を指定する

<p><abbr title="HyperText Markup Language">HTML</abbr>の教材はこちらです。</p>

👆タグ内のtitle属性に略語の完全形や説明を記入することで、アクセシビリティが高まります。特にユーザーが知らない可能性のある専門用語に使うと効果的です。

abbrタグにカーソルをあてるとtitle属性が表示される

abbrで囲まれたテキストの上にマウスポインターをのせるとtitle属性に指定されたテキストが表示されることがあります。[1]

title属性について

  • Google Chromeなどのブラウザでは、title属性をもつabbrタグには自動で下線が引かれます
  • title属性に「略語の完全形」や「用語の説明」以外のテキストを入れるのはやめましょう
  • title属性の記述は必須ではありません

CSSでabbrの装飾を変更する

以下、サンプルコードです。マウスポインターがabbrタグ上で静止したときに、クエスチョンマークが表示されるようにCSSで指定しています。

/* title属性を持つabbrタグに対して */
abbr[title] {
  cursor: help; /* カーソルをはてなに */
  text-decoration: underline dotted orange; /* 下線の種類と色 */
}

  1. ブラウザや端末によります。マウスポインターがないモバイル端末では、このような表示による効果は期待はできません。 ↩︎