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

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

この記事のポイント

略称と正式名称の組み合わせをマークアップする
略称の上にマウスカーソルが乗ると正式名称が表示される
ruby要素とrtc要素を使って正式名称と略称をマークアップする方法もある

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

文章の中でそのまま書くと長くなってしまう名称を略称の形で書くことは多くあります。
例えばHTMLは「Hyper Text Markup Language」の略になりますし、スタイルシートの正式名称「Cascading Style Sheet」はCSSとすることが一般的だったり、「JavaScript」をJSと書くことも多いです。

その他に業界用語としてよく使われるUXやDX、KPIなど、慣れていない方にとってはすぐに意味が分かりづらい略称は多くあります。
しかし正式名称を書くと長くなりすぎて回りくどくなってしまうこともあり、ほとんどのケースでは略称を使う方が説明しやすく適切です。

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

マークアップ例

続いて、具体的なマークアップの例を解説します。

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

HTML マークアップ例

<!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要素を使います。
詳しくは「テキストに読み方（ルビ）を表記する」をご覧ください。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。