---
title: '<abbr>: 略語要素'
slug: Web/HTML/Element/abbr
tags:
  - Acronym
  - Definitions
  - Element
  - HTML
  - HTML text-level semantics
  - 'HTML:Flow content'
  - 'HTML:Palpable Content'
  - 'HTML:Phrasing content'
  - Reference
  - Web
  - abbr
  - abbreviation
  - semantics
translation_of: Web/HTML/Element/abbr
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML の略語要素 </strong>(<strong><code>&lt;abbr&gt;</code></strong>) は略語や頭字語を表します。任意で {{htmlattrxref("title")}} 属性で、略語の完全形または説明を提供することができます。</span> <code>title</code> 属性はこの完全な説明のみを含み、それ以外を含んではいけません。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/HTML/Web/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>すべて</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみに対応しています。 {{htmlattrxref("title")}} 属性は <code>&lt;abbr&gt;</code> 要素と共に使用すると、特定の意味論的な意味を持ちます。これは完全な人間が読める形の説明または略語の完全形を含む<em>必要があります</em>。この文字列は、マウスポインターが要素の上で静止したとき、ブラウザーがツールチップとして表示することが良くあります。</p>

<p>それぞれの <code>&lt;abbr&gt;</code>要素は他の独立しています。同じ文書内で他の省略形ではない表現の文字列に自動的に結びつかない場合は、 <code>title</code> を使用してください。</p>

<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>

<h3 id="Typical_use_cases" name="Typical_use_cases">よくある使用例</h3>

<p>必ずしもすべての略語を <code>&lt;abbr&gt;</code> でマークアップする必要はありません。しかし、有用な場合がいくつかあります。</p>

<ul>
 <li>略語が使用され、文書コンテンツの流れの外で完全形や定義を提供したい場合は、 <code>&lt;abbr&gt;</code> を適切な {{htmlattrxref("title")}} と共に使用してください。</li>
 <li>読み手にとってなじみのない略語を定義する場合、用語を <code>&lt;abbr&gt;</code> を使用して表現し、 <code>title</code> 属性や行内文字列で定義を提供してください。</li>
 <li>テキスト内に略語が存在し、意味の注釈が必要な場合、 <code>&lt;abbr&gt;</code> 要素は有用です。一方、これは整形やスクリプトの目的で使用することができます。</li>
 <li><code>&lt;abbr&gt;</code> は {{HTMLElement("dfn")}} との組み合わせで、略語や頭字語の用語の定義を行なうことができます。以下の{{anch("Defining an abbreviation", "略語の定義")}}の例をご覧ください。</li>
</ul>

<h3 id="Grammar_considerations" name="Grammar_considerations">文法的な考慮事項</h3>

<p>{{interwiki("wikipedia", "数 (文法)", "文法的に数を表現する")}}言語（つまり、項目の数が文の文法に影響する言語）では、 <code>&lt;abbr&gt;</code> 要素内の <code>title</code> 属性で同じ文法的な数値を使用してください。これは、アラビア語のように2よりも大きい数の文法を持つ言語で特に重要ですが、英語にも当てはまります。</p>

<h2 id="Default_styling" name="Default_styling">既定のスタイル</h2>

<p>この要素の目的は単に作者の利便性のためであり、すべてのブラウザーが既定でこの要素を行内 ({{cssxref('display')}}<code>: inline</code>) で表示します。ただし、既定のスタイルはブラウザーによりさまざまです。</p>

<ul>
 <li>Internet Explorer など一部のブラウザーは、この要素を {{HTMLElement("span")}} 要素と同じスタイルを適用します。</li>
 <li>Opera、Firefox などのブラウザーは、この要素の内容に点線の下線を引きます。</li>
 <li>ごく一部のブラウザーは、ドットの下線を引くだけでなく、小さな大文字で表示するものがあります。本件を扱う CSS に {{cssxref('font-variant')}}<code>: none</code> のようなスタイルを追加することで、このようなスタイルを避けることができます。</li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Marking_up_an_abbreviation_semantically" name="Marking_up_an_abbreviation_semantically">意味論的な略語のマークアップ</h3>

<p>完全形や説明を提供せずに略語をマークアップするには、この例にあるように、単に属性なしで <code>&lt;abbr&gt;</code> を使用してください。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;&lt;abbr&gt;HTML&lt;/abbr&gt; を使うのは楽しくて簡単です！&lt;/p&gt;</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}</p>

<h3 id="Styling_abbreviations" name="Styling_abbreviations">略語の整形</h3>

<p>この単純な例に見られるように、 CSS を使用して略語のために専用のスタイルを設定することができます。</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;&lt;abbr&gt;CSS&lt;/abbr&gt; を使うと、略語の整形ができます！&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">abbr {
  font-variant: all-small-caps;
}</pre>

<h4 id="Result_2" name="Result_2">結果</h4>

<p>{{EmbedLiveSample("Styling_abbreviations")}}</p>

<h3 id="Providing_an_expansion" name="Providing_an_expansion">完全形の提供</h3>

<p>{{htmlattrxref("title")}} 属性を追加することで、略語や頭字語の完全形や定義を提供することができます。</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;Ashok's joke made me &lt;abbr title="Laugh Out Loud"&gt;LOL&lt;/abbr&gt; big
time.&lt;/p&gt;</pre>

<h4 id="Result_3" name="Result_3">結果</h4>

<p>{{EmbedLiveSample("Providing_an_expansion")}}</p>

<h3 id="Defining_an_abbreviation" name="Defining_an_abbreviation">略語の定義</h3>

<p>こちらに示すように、 <code>&lt;abbr&gt;</code> と {{HTMLElement("dfn")}} を組み合わせることで、より正式に略語を定義することができます。</p>

<h4 id="HTML_4">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
&lt;/dfn&gt; is a markup language used to create the semantics and structure
of a web page.&lt;/p&gt;

&lt;p&gt;A &lt;dfn id="spec"&gt;Specification&lt;/dfn&gt;
(&lt;abbr title="Specification"&gt;spec&lt;/abbr&gt;) is a document that outlines
in detail how a technology or API is intended to function and how it is
accessed.&lt;/p&gt;</pre>

<h4 id="Result_4" name="Result_4">結果</h4>

<p>{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}</p>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<p>頭字語や略語を、ページ内で最初に使われたときに完全な形で綴ることは、特に中身が技術用語や産業用語であった場合に、人々が理解するのに有益です。</p>

<h4 id="Example" name="Example">例</h4>

<pre class="brush: html notranslate">&lt;p&gt;JavaScript Object Notation (&lt;abbr&gt;JSON&lt;/abbr&gt;) は軽量のデータ交換形式です。&lt;/p&gt;
</pre>

<p>これは特に、コンテンツで説明している用語や概念になじみがない人、その言語の初心者、認知症の人などに有益です。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.abbr")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/Learn/HTML/Element/abbr"><code>&lt;abbr&gt;</code> 要素の使用方法</a></li>
</ul>