abbrタグ -省略形（略語や頭字語）を示す｜HTML辞典
<abbr>タグとは？
<abbr> タグは、省略形（略語や頭字語）を示すためのタグですtitle 属性を設定すると、マウスオーバー時にフルスペルが表示され、SEO やアクセシビリティの向上に役立ちます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<abbr> は 開始タグ（<abbr>）と閉じタグ（</abbr>）の両方が必要 です。
基本的な記述方法
<p>このサイトは <abbr title="Search Engine Optimization">SEO</abbr> に対応しています。</p>
使用できる主な属性
<abbr> タグには、フルスペルを提供するための title 属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
title | 省略語のフルスペル | <abbr title="World Health Organization">WHO</abbr> |
CSSを使ったデザイン変更
<abbr> タグは通常のテキストと同じ扱いですが、スタイルを適用できます。
abbr {
border-bottom: 1px dotted black;
cursor: help;
}
適切な使用例
✅ SEO の略語を定義
<p><abbr title="Search Engine Optimization">SEO</abbr> は、検索エンジン最適化を意味します。</p>
✅ IT 用語の略語を定義
<p>データは <abbr title="Structured Query Language">SQL</abbr> を使って管理されます。</p>
✅ 医療用語の略語を定義
<p><abbr title="World Health Organization">WHO</abbr> は、国際的な公衆衛生を担当する機関です。</p>
適切でない使用例（誤った使い方）
❌ title 属性を指定しないと意味が分かりにくくなる
<!-- NG: title 属性なし -->
<p><abbr>HTML</abbr> はマークアップ言語の一種です。</p>
✅ 正しい書き方（title を指定）
<p><abbr title="HyperText Markup Language">HTML</abbr> はマークアップ言語の一種です。</p>
❌ <abbr> を不適切な用途で使用する
<!-- NG: 一般的な単語に <abbr> を適用 -->
<p>今日は <abbr title="Monday">月曜日</abbr> です。</p>
✅ 正しい書き方（省略語のみに使用）
<p>今日は月曜日です。</p>
<abbr>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<abbr> | 省略語を定義 | title 属性でフルスペルを提供 | SEO、IT、医療用語の略語 |
<acronym> | （非推奨）略語を定義 | HTML5 では非推奨 | 使用不可 |
<span> | インラインテキストの装飾 | 特定の意味は持たない | スタイリングのみ |
使用上の注意点
✅ title 属性を正しく設定する
- 省略語のフルスペルを正しく記述する。
✅ <abbr> は略語のみに使用する
- 一般的な単語には適用しない。
関連タグ
まとめ
<abbr> タグは、HTML文書内で 省略語（略語）を定義するためのタグ です。title 属性を適切に設定し、SEO やアクセシビリティ向上に活用できます。
