この記事の要点

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

とは

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

  HTML は、
  W3C と
  WHATWG
  によって策定されている。

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

主な属性

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

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

との違い (HTML4 → HTML5)

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

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

との違い

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

  API とは、
  ソフトウェア同士が情報をやり取りするための窓口である。


  以降の本文では単に API
  と表記する。

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

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

  Web 標準は W3C
  (World Wide Web Consortium) によって策定されている。

本仕様は W3C による草案である。



  JSON
  形式で返却される。

デフォルトスタイル と 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 は順位決定要因として を直接利用していないと公言しています。ただし以下の間接効果は期待できます:

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

多言語対応 (lang 属性)

  日本のソフトウェア企業は
  IT
  と呼ばれる分野で発展している。




  中国

よくある使用例

分野	例
技術用語	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 で点線下線が付くため装飾用途として最低限の意味はあります。