1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
<header><h1><abbr>: The Abbreviation element</h1></header><div class="section-content">
<p>The <code><abbr></code> <a href="../index">HTML</a> element represents an abbreviation or acronym.</p> <p>When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <code><abbr></code> to mark up the abbreviation. This informs the user what the abbreviation or acronym means.</p> <p>The optional <a href="../global_attributes#title"><code>title</code></a> attribute can provide an expansion for the abbreviation or acronym when a full expansion is not present. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. If present, <code>title</code> must contain this full description and nothing else.</p>
</div>
<h2 id="try_it">Try it</h2>
<div class="section-content"><iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/abbr.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element only supports the <a href="../global_attributes">global attributes</a>. The <a href="../global_attributes#title"><code>title</code></a> attribute has a specific semantic meaning when used with the <code><abbr></code> element; it <em>must</em> contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.</p> <p>Each <code><abbr></code> element you use is independent of all others; providing a <code>title</code> for one does not automatically attach the same expansion text to others with the same content text.</p>
</div>
<h2 id="usage_notes">Usage notes</h2>
<h3 id="typical_use_cases">Typical use cases</h3>
<div class="section-content">
<p>It's certainly not required that all abbreviations be marked up using <code><abbr></code>. There are, though, a few cases where it's helpful to do so:</p> <ul> <li>When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use <code><abbr></code> with an appropriate <a href="../global_attributes#title"><code>title</code></a>.</li> <li>To define an abbreviation which may be unfamiliar to the reader, present the term using <code><abbr></code> and inline text providing the definition. Include a <code>title</code> attribute only when the inline expansion or definition is not available.</li> <li>When an abbreviation's presence in the text needs to be semantically noted, the <code><abbr></code> element is useful. This can be used, in turn, for styling or scripting purposes.</li> <li>You can use <code><abbr></code> in concert with <a href="dfn"><code><dfn></code></a> to establish definitions for terms which are abbreviations or acronyms. See the example <a href="#defining_an_abbreviation">Defining an abbreviation</a> below.</li> </ul>
</div>
<h3 id="grammar_considerations">Grammar considerations</h3>
<div class="section-content"><p>In languages with <a href="https://en.wikipedia.org/wiki/Grammatical_number" target="_blank">grammatical number</a> (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your <code>title</code> attribute as inside your <code><abbr></code> element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English.</p></div>
<h2 id="default_styling">Default styling</h2>
<div class="section-content">
<p>The purpose of this element is purely for the convenience of the author and all browsers display it inline (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a><code>: inline</code>) by default, though its default styling varies from one browser to another:</p> <p>Some browsers add a dotted underline to the content of the element. Others add a dotted underline while converting the contents to small caps. Others may not style it differently than a <a href="span"><code><span></code></a> element. To control this styling, use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant"><code>font-variant</code></a>.</p>
</div>
<h2 id="examples">Examples</h2>
<h3 id="marking_up_an_abbreviation_semantically">Marking up an abbreviation semantically</h3>
<div class="section-content">
<p>To mark up an abbreviation without providing an expansion or description, use <code><abbr></code> without any attributes, as seen in this example.</p> <h4 id="html">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="BuRjbvvFo9xCc1rYmeTHk8owTBH+XTb20JibP3th01U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> is fun and easy!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect1">
<iframe class="sample-code-frame" title="Marking up an abbreviation semantically sample" id="frame_marking_up_an_abbreviation_semantically" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=marking_up_an_abbreviation_semantically" loading="lazy"></iframe>
</div>
</div>
<h3 id="styling_abbreviations">Styling abbreviations</h3>
<div class="section-content">
<p>You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.</p> <h4 id="html_2">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="fOL8fradlYXqM3/G0fmRsKhB98FehxQRao36MN2nuF0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>, you can style your abbreviations!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="css">CSS</h4> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="+OjG0mJBckdkkJYLL4gazovCHMkytzzVCr9aZk7YLyc=" data-language="css"><span class="token selector">abbr</span> <span class="token punctuation">{</span>
<span class="token property">font-variant</span><span class="token punctuation">:</span> all-small-caps<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect2">
<iframe class="sample-code-frame" title="Styling abbreviations sample" id="frame_styling_abbreviations" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=styling_abbreviations" loading="lazy"></iframe>
</div>
</div>
<h3 id="providing_an_expansion">Providing an expansion</h3>
<div class="section-content">
<p>Adding a <a href="../global_attributes#title"><code>title</code></a> attribute lets you provide an expansion or definition for the abbreviation or acronym.</p> <h4 id="html_3">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="YCByAVLqtCO50Ol1lLCo9PG3Jg5KVWP2bLsd1G7f7b0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Ashok's joke made me <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Laugh Out Loud<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>LOL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> big time.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_3">Result</h4>
<div class="code-example" id="sect3">
<iframe class="sample-code-frame" title="Providing an expansion sample" id="frame_providing_an_expansion" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=providing_an_expansion" loading="lazy"></iframe>
</div>
</div>
<h3 id="defining_an_abbreviation">Defining an abbreviation</h3>
<div class="section-content">
<p>You can use <code><abbr></code> in tandem with <a href="dfn"><code><dfn></code></a> to more formally define an abbreviation, as shown here.</p> <h4 id="html_4">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="whhZ8zMjla7A/XZ3kYMZDhYTy87eZ2lcNAJHMYelWiQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HyperText Markup Language<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span> is a
markup language used to create the semantics and structure of a web page.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
A <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spec<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Specification<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span> (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>spec<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>) is a document that
outlines in detail how a technology or API is intended to function and how it
is accessed.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_4">Result</h4>
<div class="code-example" id="sect4">
<iframe class="sample-code-frame" title="Defining an abbreviation sample" id="frame_defining_an_abbreviation" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=defining_an_abbreviation" loading="lazy"></iframe>
</div>
</div>
<h3 id="accessibility_concerns">Accessibility concerns</h3>
<div class="section-content">
<p>Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.</p> <p>Only include a <code>title</code> if expanding the abbreviation or acronym in the text is not possible. Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring.</p> <h4 id="html_5">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="OrwO8NkLLWVv8DcE3Y2at7troO6W6bp8nGEeb0hhG28=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
JavaScript Object Notation (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>JSON<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>) is a lightweight
data-interchange format.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_5">Result</h4>
<div class="code-example" id="sect5">
<iframe class="sample-code-frame" title="Accessibility concerns sample" id="frame_accessibility_concerns" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=accessibility_concerns" loading="lazy"></iframe>
</div> <p>This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.</p>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content </td> </tr> <tr> <th scope="row">Permitted content</th> <td><a href="../content_categories#phrasing_content">Phrasing content</a></td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM Interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-abbr-element">HTML Standard <br><small># the-abbr-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody><tr>
<th><code>abbr</code></th>
<td class="bc-supports-yes">2</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes"><details><summary>1</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td>
<td class="bc-supports-yes">7</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr></tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations">Using the <code><abbr></code> element</a></li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr</a>
</p>
</div>
|
