【HTML Living Standard】abbr要素の使い方

abbr要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月24日

基本的な使い方

abbrオブジェクトは、文書内で使用される略語や頭字語を表すオブジェクトです。この要素は、短縮された語句が本来何を意味するのかを明確に定義するために用いられます。

特に、title属性と組み合わせて使用することが強く推奨されています。title属性には、その略語の完全な表現や説明を記述します。これにより、ウェブブラウザ上でユーザーが略語にカーソルを合わせると、ツールチップとして完全な表現が表示されるようになります。

この機能は、ユーザーエクスペリエンスの向上に貢献するだけでなく、アクセシビリティの面でも非常に重要です。例えば、スクリーンリーダーを利用しているユーザーは、略語の意味を正確に理解できるようになります。また、検索エンジンなどのクローラも、abbr要素によって提供される情報を利用し、コンテンツの文脈や意味をより深く理解することができます。結果として、ウェブページのセマンティクス（意味構造）が向上し、より多くのユーザーにとって理解しやすく、情報にアクセスしやすいウェブコンテンツを提供することにつながります。HTML Living Standardでは、文書の正確性とアクセシビリティを高めるための重要な要素として位置づけられています。CSSを用いて表示スタイルを自由にカスタマイズすることも可能です。

公式リファレンス: <abbr>: The Abbreviation element

構文(syntax)


1<abbr title="World Wide Web">WWW</abbr>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTML abbr要素で略語リストを作成する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>略語 (abbr) 要素のサンプル</title>
7</head>
8<body>
9    <h1>主要なウェブ技術の略語リスト</h1>
10
11    <p>
12        以下のリストは、ウェブ開発でよく使われる略語とその正式名称を示しています。
13        各略語にマウスカーソルを合わせると、正式名称がツールチップで表示されます。
14    </p>
15
16    <!-- 定義リスト (dl) を使用して、略語と正式名称のペアをリスト化 -->
17    <dl>
18        <dt>
19            <!-- abbr要素で略語をマークアップし、title属性で正式名称を提供 -->
20            <abbr title="HyperText Markup Language">HTML</abbr>
21        </dt>
22        <dd>ウェブページの構造を定義するためのマークアップ言語です。</dd>
23
24        <dt>
25            <abbr title="Cascading Style Sheets">CSS</abbr>
26        </dt>
27        <dd>ウェブページの見た目（スタイル）を定義するためのスタイルシート言語です。</dd>
28
29        <dt>
30            <abbr title="JavaScript">JS</abbr>
31        </dt>
32        <dd>ウェブページにインタラクティブな機能を追加するためのプログラミング言語です。</dd>
33
34        <dt>
35            <abbr title="World Wide Web Consortium">W3C</abbr>
36        </dt>
37        <dd>ウェブ技術の標準化を推進する国際的な非営利団体です。</dd>
38    </dl>
39</body>
40</html>

HTMLのabbr要素は、ウェブページ上で「略語」であることを示すために使われます。これにより、ユーザーや検索エンジンに対して、その文字列が特定の言葉の短縮形であることを明確に伝えられます。

この要素の最も重要な機能は、title属性と組み合わせて使用することです。title属性には、その略語の正式名称を記述します。多くのウェブブラウザでは、ユーザーがabbr要素でマークアップされた略語にマウスカーソルを合わせると、title属性に指定された正式名称がツールチップとして表示されます。これは、略語の意味がすぐに分かるようにすることで、ウェブサイトの利便性を高める役割を果たします。

サンプルコードでは、「HTML」という略語に対して<abbr title="HyperText Markup Language">HTML</abbr>のように使用されており、ブラウザで「HTML」にカーソルを合わせると「HyperText Markup Language」と表示されます。同様に、「CSS」や「JS」などもこの方法で正式名称が提供されています。

abbr要素自体に、プログラミング言語のような「引数」や「戻り値」はありません。この要素は、ウェブページのコンテンツに「略語である」という意味を与えることで、アクセシビリティの向上や検索エンジンの理解を助けるためのものです。これにより、より分かりやすく、高品質なウェブコンテンツを作成できます。

abbr要素は、略語であることを明確に示し、その正式名称を伝えるために使用します。最も重要な点は、title属性で略語の正式名称を必ず記述することです。これにより、ユーザーが要素にマウスカーソルを合わせた際にツールチップとして正式名称が表示され、コンテンツの理解を助けます。また、視覚的な情報だけでなく、音声読み上げソフトなどの支援技術にも正しい情報を提供し、ウェブページのアクセシビリティを高める役割があります。title属性を省略すると、単なるテキストと区別できず、セマンティックな意味合いが失われてしまうため注意が必要です。見た目だけでなく、情報の意味を正しく伝える「セマンティックなHTML」を意識して利用しましょう。

HTML abbrタグで略語を定義する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Abbreviation Tag Example</title>
7</head>
8<body>
9    <h1>略語 (abbr) タグの使用例</h1>
10
11    <p>
12        <abbr title="HyperText Markup Language">HTML</abbr> は、ウェブページの構造を定義するための標準マークアップ言語です。
13        これはウェブ開発の基本的な構成要素であり、
14        <abbr title="Cascading Style Sheets">CSS</abbr> や JavaScript と組み合わせて使用されます。
15    </p>
16
17    <p>
18        <abbr title="World Wide Web Consortium">W3C</abbr> は、ウェブ技術の標準化を推進する主要な国際団体です。
19    </p>
20
21    <!--
22        abbrタグは、略語（abbreviation）や頭字語（acronym）であることを示します。
23        title属性に略語の完全な形を記述することで、
24        マウスオーバー時などにユーザーが完全な形を確認でき、コンテンツの理解を助けます。
25    -->
26</body>
27</html>

HTMLのabbrタグは、テキストが略語や頭字語であることを示すための要素です。このタグの主な目的は、ウェブコンテンツに意味付け（セマンティクス）を与えることです。これにより、ブラウザに表示されるだけでなく、検索エンジンやスクリーンリーダーなどの補助技術に対しても、そのテキストが略語であることを正確に伝えます。

サンプルコードでは、<abbr title="HyperText Markup Language">HTML</abbr>のように使用されています。ここで重要なのはtitle属性です。この属性には、略語の完全な形を記述します。ユーザーが略語（例えば「HTML」）にマウスカーソルを合わせると、title属性に指定された「HyperText Markup Language」という完全な説明がツールチップとして表示されます。

この機能は、略語を知らないユーザーの理解を助け、ウェブページのアクセシビリティとユーザビリティを向上させます。abbrタグ自体には引数や戻り値はなく、指定されたテキストが略語であることをマークアップするためのシンプルな要素として機能します。

abbrタグは、略語や頭字語であることを意味的に示すHTML要素です。このタグを使う上で最も重要な点はtitle属性の活用です。title属性には必ず略語の完全な形を記述してください。これにより、マウスカーソルを略語に合わせた際に正式名称が表示され、ユーザーの理解を助け、コンテンツのアクセシビリティが向上します。title属性を省略すると、タグの意味付けは行われますが、ユーザーが略語の詳細を確認する手段が失われるため、その利点が大きく損なわれます。また、title属性には略語の正式名称以外の情報を含めないよう注意が必要です。視覚的なスタイル（例：点線の下線）はブラウザのデフォルトやCSSによって表現されるものであり、abbrタグ自体が直接スタイルを適用するわけではありません。