＜abbr要素＞ - 省略語、頭字語

公開日: 2017/02/09

abbr要素は、省略語や頭字語を表す要素です。abbr要素の中身に省略語や頭字語を指定して、title属性に正式名称を指定します。

概要

名前: abbr (Abbreviation)
カテゴリー: Flow content; Phrasing content; Palpable content
配置できる場所: Phrasing contentが期待される場所。
コンテンツモデル: Phrasing content。
タグの省略: 開始タグも終了タグも省略できません。
DOM Interface: HTMLElement
仕様書: https://html.spec.whatwg.org/multipage/semantics.html#the-abbr-element

属性

title

abbr要素が表す省略語や頭字語の正式名称。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

abbr要素は省略語をマークアップします。正式名称はtitle属性に指定します。下記は、スマホという省略語をマークアップした例です。title属性なので、デスクトップのブラウザならホバーした時にツールチップが表示されるでしょう。

HTML

<!-- 省略語: スマホ / 正式名称: スマートフォン -->
<p><abbr title="スマートフォン">スマホ</abbr>は便利だ。</p>

abbr要素は頭字語もマークアップできます。頭字語とは、頭文字を繋ぎ合わせた略称のことです。例えば、NATO(North Atlantic Treaty Organization)やNASA(National Aeronautics and Space Administration)が挙げられます。

HTML

<!-- 頭字語: NASA / 正式名称: National Aeronautics and Space Administration -->
<p>彼は、<abbr title="National Aeronautics and Space Administration">NASA</abbr>の出身だ。</p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜abbr要素＞ - 省略語、頭字語</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/abbr/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>abbr要素は、省略語、頭字語を表す要素です。title属性に正式名称を指定しましょう。</p>

<h2>省略語</h2>
<p><abbr title="Mr.Children">ミスチル</abbr>は日本の音楽バンドの1つである。</p>

<h2>頭字語</h2>
<p>彼は<abbr title="National Aeronautics and Space Administration">NASA</abbr>の出身だ。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/606/"> <meta charset="utf-8"> <title>【デモ】＜abbr要素＞ - 省略語、頭字語</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/abbr/"> </head> <body>

<p>abbr要素は、省略語、頭字語を表す要素です。title属性に正式名称を指定しましょう。</p> <h2>省略語</h2> <p><abbr title="Mr.Children">ミスチル</abbr>は日本の音楽バンドの1つである。</p> <h2>頭字語</h2> <p>彼は<abbr title="National Aeronautics and Space Administration">NASA</abbr>の出身だ。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>