<abbr>: 略語要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<abbr>
は HTML の要素で、略語や頭字語を表します。
略語や頭字語を記載する場合、最初の使用時には、略語をマークアップするための <abbr>
とともに、その用語の完全な展開をプレーンテキストで提供してください。これにより、ユーザーにその略語や頭字語の意味を知らせることができます。
オプションの title
属性で、略語や頭字語の完全な展開形が存在しない場合に、その展開形を提供することができます。これは、ユーザーエージェントがコンテンツをどのように告知/表示するかのヒントを提供し、同時にすべてのユーザーにその略語が意味していることを知らせます。設定する場合、title
はこの完全な説明のみを含み、それ以外を含んではいけません。
試してみましょう
属性
使用上の注意
よくある使用例
必ずしもすべての略語を <abbr>
でマークアップする必要はありません。しかし、有用な場合がいくつかあります。
文法的な考慮事項
文法的に数を表現する言語(つまり、項目の数が文の文法に影響する言語)では、<abbr>
要素内の title
属性で同じ文法的な数値を使用してください。これは、アラビア語のように 2 よりも大きい数の文法を持つ言語で特に重要ですが、英語にも当てはまります。
既定のスタイル
この要素の目的は単に作者の利便性のためであり、すべてのブラウザーが既定でこの要素を行内 (display
: inline
) で表示します。ただし、既定のスタイルはブラウザーによりさまざまです。
一部のブラウザーでは、この要素の内容に点線の下線を引きます。他にも点線の下線を引くだけでなく、小さな大文字で表示するものもあります。それ以外のものは <span>
要素以上のスタイルを適用しません。このスタイルを制御するには text-decoration
および font-variant
を使用してください。
例
意味論的な略語のマークアップ
完全形や説明を提供せずに略語をマークアップするには、この例にあるように、単に属性なしで <abbr>
を使用してください。
HTML
<p><abbr>HTML</abbr> を使うのは楽しくて簡単です。</p>
結果
略語のスタイル付け
この単純な例に見られるように、 CSS を使用して略語のために専用のスタイルを設定することができます。
HTML
<p><abbr>CSS</abbr> を使うと、略語のスタイル付けができます。</p>
CSS
abbr {
font-variant: all-small-caps;
}
結果
完全形の提供
title
属性を追加することで、略語や頭字語の完全形や定義を提供することができます。
HTML
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
結果
略語の定義
こちらに示すように、<abbr>
と <dfn>
を組み合わせることで、より正式に略語を定義することができます。
HTML
<p>
<dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr></dfn>
は、ウェブページの意味と構造を構築するために使用するマークアップ言語です。
</p>
<p>
仕様 (<dfn id="spec">Specification</dfn>, <abbr>spec</abbr>) は、ある技術や
API
がどのように機能することを意図し、どのようにアクセスするのかを詳細に説明した文書です。
</p>
結果
アクセシビリティの考慮
頭字語や略語を、ページ内で最初に使われたときに完全な形で綴ることは、特に中身が技術用語や業界用語であった場合に、人々が理解するのに役立ちます。
本文中で略語や頭字語を展開することが使用不可能な場合のみ、title
を記載してください。特に読み手にとって慣れない専門用語の場合、発表された単語やフレーズと画面に表示される内容に差異があると、耳障りになることがあります。
例
<p>
JavaScript Object Notation (<abbr>JSON</abbr>) は軽量のデータ交換形式です。
</p>
結果
これは特に、コンテンツで説明している用語や概念になじみがない人、その言語の初心者、認知症の人などに有益です。
技術的概要
コンテンツカテゴリ- | フローコンテンツ、 記述コンテンツ、知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール | すべて |
DOM インターフェイス | HTMLElement |
仕様書
Specification |
---|
HTML Standard # the-abbr-element |
ブラウザーの互換性
BCD tables only load in the browser