<abbr></abbr>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ

abbr要素は、略語や頭字語を表します。


<abbr>略語や頭字語を表します</abbr>
属性 値
グローバル属性（この要素上では、title属性が特別な意味を持ちます）
title="" 正式名称 テキスト 任意のテキスト

title属性について

abbr要素にtitle属性を指定すると、略される前の正式名称を示すことができます。この場合、title属性の値には正式名称以外の内容を記述してはなりません。

  • PC向けのブラウザでは、title属性が指定された要素にマウスカーソルを合わせると、title属性の値がツールチップで表示されます。
<abbr title="HyperText Markup Language">HTML</abbr>

title属性を指定せずに、次のように記述することもできます。この場合、その略語の正式名称は不明ということになります（別のabbr要素で示されていたとしても）。

<abbr>HTML</abbr>
  • 各abbr要素は独立しているものとみなされます。（厳密に言うと）文書内で同一の略語があったとしても、それらは必ずしも同じ正式名称を持っているとは限りません。

必要に応じて使用する

略語だからといって、必ずabbr要素が必要というわけではありません。

例えば、同じ略語が複数出てくる場合は、最初の略語にのみ正式名称を示しておけばいいでしょう。また、多くの人が知っているであろう略語の場合にも、無理にabbr要素を使う必要はないものと思われます。

逆に、あまり知られていない略語の場合には、この要素で正式名称を示しておくと親切かと思います。

頭字語について

略語のうち、頭文字をつなげて1つの単語として発音するものを頭字語と言います。例えば、次の略語が頭字語になります。

NATO
North Atlantic Treaty Organization
ナトーと読むことができます。
UNESCO
United Nations Educational, Scientific and Cultural Organization
ユネスコと読むことができます。

要素のデフォルトスタイル

ブラウザによっては、title属性が指定されている場合に限り、この要素内のテキストに点線の下線が表示されます。

HTML
旧HTMLからの変更点
  • HTML5：要素の定義が微妙に変わりました。（略語 → 略語や頭字語）

使用例


<p><abbr>HTML</abbr>を勉強中です。</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr>を勉強中です。</p>
表示例

HTMLを勉強中です。

CSSを勉強中です。

下線のスタイルを設定した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

/* PC向けの設定 */
abbr[title] {
text-decoration: underline #ff0000 dotted;
}

@media screen and (max-width: 767px) {

/* スマートフォンなどでは下線を非表示（ツールチップが表示されないため） */
abbr[title] {
text-decoration: none;
}

}

</style>

</head>
<body>

<p><abbr>HTML</abbr>を勉強中です。</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr>を勉強中です。</p>

</body>
</html>
表示例

HTMLを勉強中です。

CSSを勉強中です。