SYNCER

SYNCER

<abbr要素> - 省略語、頭字語

公開日:

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>までを含めて下さい。

<body> <div id="___body">

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

<style>

</style>

<script>

</script>