略語と正式名称の組み合わせをマークアップする

HTML（hyper text markup language）などの略語と正式名称のペアをマークアップする方法について解説します。

この記事のポイント

略語と正式名称の組み合わせを適切にマークアップできる
正式名称の分かりやすい表示方法が分かる

略語と正式名称をマークアップする

そのまま書くと長くなってしまう単語を省略した形で書くことは多いです。
WebにおいてもHTMLは「Hyper Text Markup Language」の略ですし、スタイルシートの正式名称「Cascading Style Sheet」はCSSと呼んだり、「JavaScript」をJSと呼ぶことが多いです。

これらはまだ易しいですが、業界用語で「UX」や「KPI」やら、その業界にいたら常識であっても、そうじゃない方にとっては「？」となる言葉が多くあります。
サイトのコンテンツについても同様で、平易な言葉を使っていても、中にはどうしても業界スタンダードな略語を使った方が説明しやすいケースは必ずあります。

そんな時に、略語と正式名称をセットでマークアップすることで、言葉の意味を知るヒントとなり、言葉を正しく理解してもらう手助けをすることができるようになります。

マークアップ例

略語と正式名称を表記するにはabbr要素を使います。
対象となる略語をこの要素で囲み、正式名称はtitle属性で指定してください。

マークアップ例

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>マークアップ例</title>
	<style>
	body {
		margin: 0;
		padding: 0;
		font-size: 100%;
		background: #f7f7f7;
	}
	
	h1 {
		margin: 20px 0 15px;
		font-size: 100%;
		color: #555;
	}
	
	abbr {
		cursor: help;
	}
	</style>
</head>
<body>
	<h1>abbr要素のマークアップ例</h1>
	<p><abbr title="Hyper Text Markup Language">HTML</abbr>はハイパーテキストを記述するための言語です。</p>
</body>
</html>

ブラウザで表示すると上図のようになります。

標準のスタイルではマウスカーソルが略語の上に乗ってもテキストカーソルで少し分かりづらいため、「cursor: help;」を指定しています。

もしマウスカーソルが乗った時のみだけでなく、常にテキストとして正式名称を表示したい場合はruby要素とrtc要素を使います。
詳しくは「テキストに読み方（ルビ）を表記する」をご覧ください。