この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:guest
更新日時:2026-06-11 07:29:05

タイトル: abbr要素
SEOタイトル: HTML <abbr> 要素の使い方｜略語のツールチップ・ARIA・SEO・dfn との違い

この記事の要点
  • は略語・頭字語 (abbreviation / acronym) を表すインライン要素
  • title 属性に正式名称を書くと、ホバー時にツールチップ表示
  • HTML4 の は HTML5 で廃止、すべて に統合
  • SEO に直接の順位効果は無いが、構造化された文書として検索エンジンが略語を解釈しやすい
  • スクリーンリーダーは title を読み上げる場合がある → 初回出現時のみ展開するのが UX 的に良い

とは

<abbr> (abbreviation) は、略語・頭字語を意味的にマークアップするための HTML5 インライン要素です。title 属性に展開後の正式名称を書きます。

<p>
  <abbr title="HyperText Markup Language">HTML</abbr> は、
  <abbr title="World Wide Web Consortium">W3C</abbr> と
  <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
  によって策定されている。
</p>

ブラウザでは略語の上にマウスを乗せると title の中身がツールチップで表示されます。デフォルト CSS では下線（点線）が引かれます。

主な属性

属性説明必須
title正式名称（フル展開）強く推奨
グローバル属性class / id / lang / dir など任意

title 無しの <abbr>HTML</abbr> も妥当ですが、アクセシビリティと検索エンジンの両面でtitle 付きを推奨します。

との違い (HTML4 → HTML5)

HTML4 では「単語的に発音する頭字語（NASA, NATO）」を <acronym>、それ以外を <abbr> と区別していました。HTML5 ではこの曖昧な区別を廃止し、すべて <abbr> に統一しました。

例HTML4HTML5
HTML / CSS (文字を読む)
NASA / NATO (単語として読む)
Dr. / Mr.

との違い

<dfn> は用語の「定義」を行う場所、<abbr> は略語そのものをマークアップします。初出で両方使う組み合わせがあります:

<p>
  <dfn><abbr title="Application Programming Interface">API</abbr></dfn> とは、
  ソフトウェア同士が情報をやり取りするための窓口である。
</p>
<p>
  以降の本文では単に <abbr title="Application Programming Interface">API</abbr>
  と表記する。
</p>

アクセシビリティ (ARIA / スクリーンリーダー)

スクリーンリーダーによる読み上げ動作は実装依存です。NVDA / VoiceOver の一部バージョンでは title を読み上げます。読み上げを保証したい場合は ARIA を併用します:

<!-- 推奨パターン: 初回出現時にフル展開を本文に書き、以降は省略形のみ -->
<p>
  Web 標準は <abbr title="World Wide Web Consortium">W3C</abbr>
  (World Wide Web Consortium) によって策定されている。
</p>
<p>本仕様は W3C による草案である。</p>

<!-- aria-label で明示的に読み上げを指定 -->
<p>
  <abbr title="JavaScript Object Notation" aria-label="ジェイソン">JSON</abbr>
  形式で返却される。
</p>

デフォルトスタイル と CSS カスタマイズ

/* 多くのブラウザのデフォルト */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* カスタマイズ例: 下線を消す */
abbr[title] {
  text-decoration: none;
  border-bottom: 1px dashed #999;
}

/* ツールチップを CSS で自作 (title をホバーで表示する代替) */
abbr[title] {
  position: relative;
}
abbr[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.85em;
}

SEO への影響

Google は順位決定要因として <abbr> を直接利用していないと公言しています。ただし以下の間接効果は期待できます:

  • 検索エンジンが略語と正式名称を同一視しやすくなり、関連クエリでの表示機会が増える
  • スニペット生成時に正式名称が補完される
  • 構造化文書として品質シグナルになる（誤判定はあるが多くの SEO 指南書が推奨）

多言語対応 (lang 属性)

<!-- 略語の言語が本文と異なる場合 -->
<p>
  日本のソフトウェア企業は
  <abbr title="Information Technology" lang="en">IT</abbr>
  と呼ばれる分野で発展している。
</p>

<!-- 中国語の略語 -->
<p>
  <abbr title="中华人民共和国" lang="zh">中国</abbr>
</p>

よくある使用例

分野例
技術用語HTML, CSS, API, REST, JSON, XML
組織W3C, IETF, ISO, ANSI
単位 / 時刻UTC, JST, Mbps, GB
敬称Mr., Dr., Prof.
医療DNA, MRI, CT

FAQ

Q: 同じ略語が文書に何度も出るとき、毎回 で囲むべき？
A: 仕様上は毎回でも妥当ですが、初出時のみ展開しその後は省略形のみで書くのが UX 的にスマートです。

Q: ツールチップがモバイルで表示されない
A: タッチデバイスはホバー概念がないため。重要な情報なら本文中に併記するか、aria-label / CSS ツールチップで対応してください。

Q: title 属性無しで を使う意味は？
A: 「これは略語である」というセマンティクスは伝わります。CSS で点線下線が付くため装飾用途として最低限の意味はあります。