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
|
---
title: <abbr>
slug: Web/HTML/Element/abbr
tags:
- Element
- HTML
- HTML tekst-niveau semantiek
- Referentie
- Web
- abbr
translation_of: Web/HTML/Element/abbr
---
<h2 id="Samenvatting">Samenvatting</h2>
<p>Het <em>HTML Abbreviation element</em> (<strong><abbr></strong>) geeft de mogelijkheid om een afkorting aan te geven en geeft optioneel de mogelijkheid voor het geven van een volledige omschrijving. Indien het <code>title</code> attribuut wordt opgegeven in het element, hoort deze de volledige omschrijving te bevatten en niets anders.</p>
<pre class="brush: html"><p>Ik kan <abbr title="Hypertext Markup Language">HTML</abbr></p></pre>
<p style="margin-top: -1.5em;"><small>Bekijk meer verdiepende voorbeelden in het artikel <em><a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Hoe markeer je afkortingen om ze te verduidelijken.</a></em></small></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">DOM Interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhoud categorieën</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content</td>
</tr>
<tr>
<th scope="row">Toegestaande inhoud</th>
<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a></td>
</tr>
<tr>
<th scope="row">Toegstaande parent elementen</th>
<td>Elk element dat <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> toestaat.</td>
</tr>
</tbody>
</table>
<h2 id="Attributen">Attributen</h2>
<p><span style="line-height: 21px;">Dit element bevat alleen de mogelijkheid voor gebruik van de </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale attributen</a><span style="line-height: 21px;">.</span></p>
<p>Gebruik het {{htmlattrxref("title")}} attribuut om de volledige omschrijving van de afkorting op te geven. Veel user agents geven de inhoud van dit attribuut namelijk weer als een tooltip.</p>
<div class="note">
<p><strong>Note: </strong>In talen met grammaticale nummers (vooral talen met meer dan twee nummers, zoals Arabisch) gebruik je hetzelfde in het <code>title </code>attribuut als in het <code><abbr></code> element.</p>
</div>
<h2 id="Specifications" name="Specifications">Specificaties</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specificaties</th>
<th scope="col">Status</th>
<th scope="col">Commentaar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.0</td>
<td>{{CompatGeckoDesktop(1.0)}} [1]</td>
<td>7.0</td>
<td>1.3</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Up to Gecko 1.9.2 (Firefox 3.6), Firefox implemented the {{domxref("HTMLSpanElement")}} interface for this element instead of the {{domxref("HTMLElement")}} interface.</p>
<h2 id="Standaard_opmaak">Standaard opmaak</h2>
<p>Het doel van dit element is puur voor het gemak van de auteur en alle browsers geven het standaard inline weer ({{cssxref('display')}}<code>: inline</code>) , toch verschilt de opmaak per browser:</p>
<ul>
<li>Sommige browsers, zoals Internet Explorer, geven dit element geen andere stijl dan het {{HTMLElement("span")}} element.</li>
<li>Opera, Firefox, en sommige andere browsers geven een stippellijn weer bij de inhoud van het <code><abbr></code> element.</li>
<li>Een aantal andere browsers voegen niet alleen een stippellijn toe, maar veranderen het font ook in kleine blokletters. Om dit te voorkomen kun je aan het CSS {{cssxref('font-variant')}}<code>: none</code> toevoegen.</li>
</ul>
<h2 id="Zie_ook">Zie ook</h2>
<ul>
<li><a href="/en-US/Learn/HTML/Element/abbr">Gebruik het <abbr> element</a></li>
<li>Andere elementen die op <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">tekst-niveau semantiek</a> toepassen: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
</ul>
<div>{{HTMLRef}}</div>
|
