HTML Living Standard/abbr

ABBR要素

<abbr>要素は、省略語や略語を表すために使用されます。この要素は、ユーザーが略語の完全な意味を理解できるように、補足情報を提供する場合に役立ちます。

定義

<abbr>は「abbreviation（略語）」の略です。
略語に関する情報を伝えるために使用され、視覚的または機械的な支援を提供します。

使用方法

基本例

<p>ウェブページの基本構成を学ぶ際には<abbr title="HyperText Markup Language">HTML</abbr>が重要です。</p>

この例では、<abbr>要素を使用して「HTML」という略語に「HyperText Markup Language」という完全な意味を付加しています。

長い略語

略語が非常に長い場合でも、title属性を使って完全な意味を提供できます。

<p>このプロジェクトは<abbr title="International Organization for Standardization">ISO</abbr>に準拠しています。</p>

アクセシビリティを考慮した例

スクリーンリーダーがtitle属性を読み上げることを考慮し、略語の説明を明確に記述します。

<p>最新の<abbr title="Cascading Style Sheets">CSS</abbr>仕様に従ってデザインを構築します。</p>

属性

<abbr>要素には以下の属性を使用できます。

title: 略語の完全な意味を指定します（推奨）。
グローバル属性: idやclassなど、スタイリングやスクリプト用に使用可能です。

<abbr title="Application Programming Interface" class="highlighted-abbr">API</abbr>

アクセシビリティ

スクリーンリーダーやブラウザは、<abbr>要素を適切に解釈し、ユーザーに追加情報を提供できます。
常にtitle属性を設定して、略語の意味を明確に示してください。
略語が文脈で分かりにくい場合は、文章内で補足情報を提供することが望ましいです。

注意事項

<abbr>要素を使う際には、title属性に正確な情報を記述してください。
多くの略語が出現する場合、冗長にならないように配慮しましょう。
すべてのブラウザが略語の完全な意味を表示するわけではないため、適切な説明を文中に含めることも検討してください。

使用例

技術文書での例

<p>このプラットフォームは<abbr title="Representational State Transfer">REST</abbr> APIを利用しています。</p>

辞書風の記述

<dl>
  <dt><abbr title="World Wide Web">WWW</abbr></dt>
  <dd>インターネット上のハイパーテキストシステム。</dd>
  
  <dt><abbr title="HyperText Markup Language">HTML</abbr></dt>
  <dd>ウェブページを構築するための標準的なマークアップ言語。</dd>
</dl>

スタイリング例

略語を視覚的に区別するためにCSSを利用します。

abbr {
  text-decoration: dotted underline;
  cursor: help;
}

このスタイルでは、<abbr>要素が点線で下線を引かれ、ユーザーがマウスオーバーするとカーソルが変化します。

利用シーン

技術文書やFAQ
省略語や専門用語が頻出する学術論文
ユーザーガイドやチュートリアル