HTML

The HTML <acronym> element was used to mark up acronyms, but it is obsolete in HTML. Use <abbr> instead, typically with a title attribute that provides the expanded form.

acronym要素

acronym は、かつて「頭字語（略語の一種）」を示すために使われていた要素です。ですが、HTML5では廃止（obsolete）されており、現代のHTMLでは基本的に使いません。

今は <abbr> を使うのが基本です。「略語（abbreviation）」を示す要素で、acronym が担っていた用途もまとめてカバーします。

このページでできるようになること

まずは直感：<acronym> って何？

昔の「頭字語（例：NASA）」のマーク
<acronym> は、昔のHTMLで「頭文字で作った略語」を示すためのタグでした。
でも今は“使うな”の側にいる
HTML5では廃止扱いです。現在のブラウザで表示が壊れることは少ないですが、「正しいHTML」としては推奨されません。
今の正解は <abbr>
略語は <abbr> を使い、必要なら title で正式名称を補います。

直感の覚え方：acronym は“昔の道具”。今は abbr を使う、でOKです。

正確な定義（仕様に沿った説明）

何のために存在するか

歴史的には、「これは頭字語だ」とマークアップするために存在しました。ところが、acronym と abbr を厳密に区別して扱う価値が小さく、互換性の負担もあるため、現代のHTMLでは abbr に一本化されました。

使える場所（文脈/入れ子のルール）

acronym は、表示上はインライン要素のように扱われ、文章の中で使われていました。ただし現在は廃止要素なので、新規に書く場所はありません（新規コードでは使わない、が結論です）。

できること/できないこと（制約）

できること（過去の用途）：略語に“正式名称”を紐づける
実務では title 属性を付けて、ホバー時に説明（ツールチップ）を出す使い方が多かったです。
できないこと（今の現実）：仕様として推奨されない
acronym はHTMLの仕様上「obsolete」扱いです。バリデーションで警告になりやすく、学習や試験でも「使わない要素」として整理されます。
注意：title 依存の説明はUX的に弱い
title はマウスホバー前提になりがちで、スマホやキーボード操作、読み上げでは期待通りに伝わらないことがあります。

補足：廃止要素でもブラウザが“とりあえず表示”するケースは多いです。ただし「動く」=「正しい」ではありません。保守・試験・品質の観点では置き換え対象です。

基本の書き方（最短の型）

重要：この章は「acronym の書き方」ではなく、現代の正解（abbr）の最短形を示します。実務でも試験でも、ここが大事です。

最小サンプル（コピペ用）

略語が初出のときに、正式名称を title で補う基本形です。

HTML

<p>
    <abbr title="Cascading Style Sheets">CSS</abbr> は、見た目（デザイン）を指定するための仕組みです。
</p>

コピペで動く最小デモ（このページ内で表示）

表示デモ（ホバーだけに頼らない“読み方”も意識）

例： CSS と HTML はセットで出てきやすい略語です。

HTML

<p>
    例：
    <abbr title="Cascading Style Sheets">CSS</abbr>
    と
    <abbr title="HyperText Markup Language">HTML</abbr>
    はセットで出てきやすい略語です。
</p>

スマホではツールチップが出ないことがあります。本文側でも最初の一回は「CSS（Cascading Style Sheets）」のように併記すると、読者に優しいです。

主要な属性・よく使う値

title
正式名称・展開形（expanded form）を入れることが多い属性です。ただし、title は環境によって伝わり方が不安定なので、重要なら本文でも補います。
グローバル属性（例：class / id）
スタイル調整や、JSで対象を特定するために使います。略語の意味付けそのものは abbr で行います。
（参考）acronym に特別な属性はない
acronym は、専用の属性を持つ要素ではありません。昔も今も、やることは「囲む」だけです。

コンテンツモデル／入れ子のルール（初心者が事故りやすい所）

ここも「言い切り」で整理します。実務では acronym ではなく abbr で判断してください。

abbr を置いていい場所
  • 文章の中（段落・見出し・リストなど）に置いてよい
  • インライン要素として扱う（通常は改行を作らない）
abbr の中に入れていいもの
  • 基本はテキスト（略語そのもの）
  • 必要なら、見た目用に最小限のインライン要素（例：<span>）
やらない（事故りやすい）例
  • 長文全体を abbr で囲む（略語の範囲が分からなくなる）
  • title に長すぎる説明を書く（ツールチップ依存になり、読まれにくい）
  • title のみで正式名称を伝えたつもりになる（スマホ/読み上げで落ちる）

よくある勘違い・混同ポイント

acronym は「まだ使っていい」と思ってしまう
表示はされても、仕様上は廃止要素です。新規コードでは abbr を使います。
abbr は「頭字語に使ってはいけない」と思ってしまう
そんなことはありません。abbr は略語全般に使えるので、頭字語も含めてOKです。
title を付ければアクセシブルだと思ってしまう
title の扱いは環境差があり、必ず伝わるとは限りません。重要な略語は本文でも展開形を示すのが安全です。

実務でよくある使用例（制作会社の現場を想定）

実務で略語が出る場面は多いです。ポイントは「読み手が迷わない」ことです。

仕様書・要件の略語（例：UI / UX / KPI）
初出で正式名称を添える（本文で併記 or abbr + title）。社内用語ほど“外部の人”には伝わりません。
技術用語の略語（例：HTML / CSS / API）
技術記事では略語が頻出します。読み手のレベルが分からない場合は、最初の1回だけ展開形を添えるだけでも理解が安定します。
画面UIのラベル（例：FAQ / PDF）
ボタンや見出しに略語を使うと短くできますが、意味が伝わらないとUXが落ちます。必要なら補足テキストも検討します。

実務メモ：既存サイトに acronym が残っているのは珍しくありません。置き換えの第一候補は abbr です。

実務で起きがちな事故と回避策

事故：ツールチップ（title）だけに頼ってしまう
原因：マウスホバー前提で設計してしまう。
対策：初出は本文で「略語（正式名称）」と併記し、abbr は補助として使う。
事故：略語の展開形がブレる（表記ゆれ）
原因：人によって正式名称の書き方が違う。
対策：サイトや案件で用語集（表記ルール）を持つ。少なくともページ内では統一する。
事故：略語の対象範囲が曖昧
原因：abbr を長い文字列にかけてしまう。
対策：略語そのもの（短い部分）だけを囲む。
事故：バリデーションで警告（acronym の使用）
原因：古いテンプレやコピペの残骸。
対策：acronym を見つけたら abbr に置き換え、必要なら title の内容も見直す。

検証の観点：HTMLバリデーション（概念として）で obsolete 要素の警告が出ないか確認します。スマホ表示・キーボード操作でも略語の意味が失われないかをチェックすると、現場品質が上がります。

アクセシビリティ／UX観点での注意（必要な範囲で）

略語の「最初の一回」は本文でも補う
title に頼ると、タッチ端末や読み上げで落ちる可能性があります。初出だけ「CSS（Cascading Style Sheets）」のように書くのが、最も確実です。
読み上げでは“略語”がそのまま読まれることがある
環境によっては “CSS” を「シーエスエス」と読む場合もあれば、文字ごとに読まれる場合もあります。読ませ方を完全に制御するより、意味が伝わる情報設計に寄せます。
UIラベルに略語を使うときは補足も検討
ボタンやナビで略語だけにすると、ユーザーが迷います。必要なら見出しや説明文で補い、操作の理解を助けます。

関連要素・関連属性との組み合わせ・相互作用

acronym → abbr（置き換え）
基本は <acronym>NASA</acronym> を <abbr>NASA</abbr> に置き換えます。必要なら title を追加します。
abbr × title
展開形（正式名称）を短く補う用途。ですが、重要な情報は本文側でも補うのが安全です。
abbr × dfn
用語定義をしたいときは <dfn> と相性が良いです。例：最初の登場で dfn にして、その中に abbr を入れる、など。
abbr × CSS
略語に点線下線などを付けて「補足がある」ことを見た目で伝えることがあります。過剰装飾は読みにくくなるので最小限にします。

試験（HTML5プロ Level 1）で得点できる整理

用語ミニ辞典（短く）

acronym
頭字語を示すために使われた旧要素。HTML5では廃止（obsolete）。
abbr
略語を示す要素。頭字語も含めて扱える。必要なら title で展開形を補う。
obsolete（廃止要素）
仕様上「使うべきではない」とされる要素。互換性のために表示はされても、バリデーションで警告対象になりやすい。
title 属性
補足説明を付けられる属性。ツールチップとして出ることがあるが、環境差がある。

ひっかけポイント（短く）

「問われ方」っぽいミニ確認（解説付き）

Q1. 頭字語（例：NASA）をマークアップしたい。acronym を使う？
A. 使いません。HTML5では acronym は廃止です。abbr を使います。
Q2. abbr は頭字語に使ってよい？
A. よいです。abbr は略語全般を表す要素なので、頭字語も含めてOKです。
Q3. abbr に付けると役立つことが多い属性は？
A. title です。展開形（正式名称）を補えます。ただし本文での補足も検討します。
Q4. title に正式名称を書けば、誰にでも必ず伝わる？
A. 伝わらない場合があります。スマホや読み上げなど環境差があるため、重要なら本文にも書きます。

よくある質問（FAQ）

acronym は使ってはいけないのですか？
新規のHTMLでは使わないのが基本です。既存コードに残っている場合は、abbr へ置き換えるのが一般的です。
acronym が残っているページを見つけました。表示は問題ないので放置でOK？
短期的に動くことは多いですが、HTMLバリデーションで警告になりやすく、学習・品質・保守の観点で置き換えが無難です。置き換え後は目視と簡単なテスト（表示・読み上げ・スマホ）で確認します。
abbr の title には何を書けばいいですか？
略語の正式名称（展開形）を短く書くのが一般的です。説明文が長いなら、本文側に書いて title は補助に留めます。
略語は全部 abbr で囲むべきですか？
必須ではありません。大事なのは「読者が迷わない」ことです。初出だけ補う、用語集のようなページだけ abbr を使う、など運用ルールを決めると安定します。
SEOに効きますか？
略語のマークアップはSEOテクニックではありません。まずは人間に分かりやすい説明（初出での併記）を優先し、その上でHTMLを整えるのが安全です。

よくあるエラー早見表

HTMLバリデーションで acronym が警告になる
原因：acronym はHTML5で廃止要素。対処：abbr に置き換える（必要なら title を付ける）。
title に頼ったが、スマホで意味が伝わらない
原因：ホバー前提の情報設計。対処：本文で「略語（正式名称）」を併記し、title は補助にする。
略語の範囲がずれて読みにくい
原因：長文を abbr で囲む。対処：略語の文字列（短い部分）だけを囲む。

まとめ：迷ったときの判断軸

最後に、迷ったときに戻ってくるチェックリストです。