トップページ  > HTML Living Standard  > <abbr>

★HTML Living Standard リファレンス

<abbr> …… 略語や頭字語を表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<abbr>タグは、略語や頭字語を表す際に使用します。

略語や頭字語の正式名称を示す場合には、title属性の値として指定できます。 abbr要素のtitle属性の値には、略語や頭字語の正式名称のみを指定します。 それ以外の情報は、何も含めてはいけません。

文書のなかで同じ略語が何度か登場する場合、 abbr要素のtitle属性で正式名称を1回指定しても、 同じ文書内に登場する同じ略語に対して正式名称が指定できたわけではありません。 abbr要素は、それぞれが独立しています。

■属性

title属性
abbr要素のtitle属性には、他の要素のtitle属性にはない特別な意味があります。 abbr要素のtitle属性の値は、「略語や頭字語の正式名称」を表します。

■使用例

以下のサンプルは、典型的なabbr要素の使用例です。

HTMLソース

<p>
 <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>は、
 HTMLなどの仕様を策定するために様々な立場の人々が集まったコミュニティです。
</p>
↓↓↓

ブラウザ上の表示

WHATWGは、 HTMLなどの仕様を策定するために様々な立場の人々が集まったコミュニティです。

dfn要素とabbr要素の併用

dfn要素とabbr要素を併用すると、 定義された用語が略語であることを示すことができます。

dfn要素の子要素がtitle属性を持つabbr要素の場合、 abbr要素のtitle属性に指定された値は、定義された用語の正式名称を表します。

■使用例

以下のサンプルは、abbr要素で略語としてマークアップして、さらにdfn要素で定義用語としてマークアップしています。

HTMLソース

<p>
 <dfn id=whatwg>
  <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
 </dfn>は、
 新しい技術を開発したいブラウザメーカーと、
 ウェブ関係者による緩やかなコラボレーションです。
</p>
↓↓↓

ブラウザ上の表示

WHATWG は、 新しい技術を開発したいブラウザメーカーと、 ウェブ関係者による緩やかなコラボレーションです。

■使用例

上記のサンプルは、以下のように書くこともできます。

HTMLソース

<p>
 <dfn id=whatwg>Web Hypertext Application Technology Working Group</dfn>
 (<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)は、
 新しい技術を開発したいブラウザメーカーと、
 ウェブ関係者による緩やかなコラボレーションです。
</p>
↓↓↓

ブラウザ上の表示

Web Hypertext Application Technology Working GroupWHATWG)は、 新しい技術を開発したいブラウザメーカーと、 ウェブ関係者による緩やかなコラボレーションです。

abbr要素が役立つ場面

略語や頭字語が出てきたら、必ずabbr要素でマークアップしなければならないというわけではありません。 abbr要素は、以下の場合などに役立つことが期待されています。

■使用例

以下のサンプルには、「WHATWG」と「HTML5」という2つの略語が含まれています。 「HTML5」にはabbr要素を使用しておらず、正式名称(HyperText Markup Language)と関連付けられていません。

HTMLソース

<p>
 <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>は、
 2004年に
 HTML5
 の策定を開始しました。
</p>
↓↓↓

ブラウザ上の表示

WHATWGは、 2004年に HTML5 の策定を開始しました。

■使用例

以下のサンプルは、a要素で略語から定義に向けてリンクしています。

HTMLソース

<p>
 <a href="#whatwg">
 <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
 </a>コミュニティには、
 アジアからの代表者はあまりいません。
</p>
↓↓↓

ブラウザ上の表示

WHATWG コミュニティには、 アジアからの代表者はあまりいません。

■使用例

以下のサンプルでは、略語にスタイルを適用するためにabbr要素としてマークアップしています。 そのため、title属性による正式名称の指定は省略されています。

HTMLソース

<p>
 関係者は、<abbr>WHATWG</abbr>の過去の改訂を振り返ることを否定しました。
</p>
↓↓↓

ブラウザ上の表示

関係者は、WHATWGの過去の改訂を振り返ることを否定しました。

単数/複数を揃える

略語の単数/複数と、正式名称の単数/複数は揃える必要があります。 略語が複数の場合、 abbr要素内容に複数形のsを含めないなら、正式名称も単数形にします。 abbr要素内容に複数形のsを含めるなら、正式名称にも複数形のsを付けます。

■使用例

以下のサンプルでは、abbr要素内容「WG」に複数形のsを含めていないので、 正式名称の「Working Group」も単数形となっています。

HTMLソース

<p>
 <abbr>WHATWG</abbr> と
 <abbr>HTMLWG</abbr> という
 2つの<abbr title="Working Group">WG</abbr>s が、
 仕様策定に取り組みました。
</p>
↓↓↓

ブラウザ上の表示

WHATWGHTMLWG という 2つのWGs が、 仕様策定に取り組みました。

■使用例

以下のサンプルでは、abbr要素内容「WGs」に複数形のsを含めているので、 正式名称の「Working Groups」も複数形となっています。

HTMLソース

<p>
 <abbr>WHATWG</abbr> と
 <abbr>HTMLWG</abbr> という
 2つの<abbr title="Working Groups">WGs</abbr> が、
 仕様策定に取り組みました。
</p>
↓↓↓

ブラウザ上の表示

WHATWGHTMLWG という 2つのWGs が、 仕様策定に取り組みました。

abbreviationとacronymの違い

過去のHTMLの仕様には、abbr要素の他にacronym要素が存在していましたが、 すでにacronym要素は廃止されており、代わりにabbr要素を使うことが推奨されています。

abbreviationは略語、acronymは頭字語です。 例えば「ケンタッキーフライドチキン」を「ケンタ」と略せばabbreviation(略語)ですし、 「Kentucky Fried Chicken」の頭文字「KFC」をとればacronym(頭字語)です。

現在のHTML標準では、abbr要素は略語や頭字語を表します。 略語と頭字語は、どちらもabbr要素でマークアップすることになっています。

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ