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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
---
title: '<abbr>: Element Skrótu'
slug: Web/HTML/Element/abbr
tags:
- Akronim
- Definicje
- Element
- HTML
- HTML semantyka na poziomie tekstu
- Reference
- Web
- semantyka
- skrót
translation_of: Web/HTML/Element/abbr
---
<p>{{HTMLRef}}</p>
<p><span class="seoSummary"><strong>Element skrótu HTML </strong>(<strong><code><abbr></code></strong>) reprezentuje skrót lub akronim; opcjonalny atrybut {{htmlattrxref("title")}} może stanowić rozwinięcie lub opis skrótu.</span> Jeśli występuje, <code>title</code> musi zawierać pełny opis i nic więcej.</p>
<p>Artykuł <em><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Jak oznaczać skróty i uczynić je zrozumiałymi</a></em> jest przewodnikiem do nauki używania <code><abbr></code> i elementów pokrewnych.</p>
<table class="properties">
<tbody>
<tr>
<th><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th>
<td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Flow_content">Treść płynna</a>, <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Treść frazowania</a>, zawartość zdzieralna.</td>
</tr>
<tr>
<th>Dozwolona zawartość</th>
<td><a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Treść frazowania</a></td>
</tr>
<tr>
<th>Pominięcie znacznika</th>
<td>Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.</td>
</tr>
<tr>
<th>Dozwoleni rodzice</th>
<td>Każdy element, który akceptuje <a href="https://developer.mozilla.org/pl/docs/Web/Guide/HTML/Content_categories#Phrasing_content">zawartość frazowania</a></td>
</tr>
<tr>
<th>Dozwolone role ARIA</th>
<td>Każdy</td>
</tr>
<tr>
<th>Interfejs DOM</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atrybuty">Atrybuty</h2>
<p>Ten element obsługuje tylko <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Global_attributes">atrybuty globalne</a>. Atrybut {{htmlattrxref("title")}} ma specyficzne znaczenie semantyczne, gdy jest używany z elementem <code><abbr></code>; <em>musi</em> zawierać pełny opis czytelny dla człowieka lub rozwinięcie skrótu. Tekst ten jest często prezentowany przez przeglądarki jako etykieta pomocnicza, gdy kursor myszy jest zawieszony nad elementem.</p>
<p>Każdy element <code><abbr></code>, którego używasz jest niezależny od wszystkich innych; podanie <code>title</code> dla jednego elementu nie załącza automatycznie tego samego rozszerzenia tekstu do innych o tej samej treści.</p>
<h2 id="Uwagi_dotyczące_użycia">Uwagi dotyczące użycia</h2>
<h3 id="Typowe_zastosowania">Typowe zastosowania</h3>
<p>Z pewnością nie jest wymagane, aby wszystkie skróty były oznaczane przy użyciu <code><abbr></code>. Jest jednak kilka przypadków, w których jest to pomocne:</p>
<ul>
<li>Jeśli używany jest skrót i chcesz zapewnić rozszerzenie lub definicję poza obiegiem treści dokumentu, użyj <code><abbr></code> z odpowiednim atrybutem {{htmlattrxref("title")}}.</li>
<li>Aby zdefiniować skrót, który może być nieznany czytelnikowi, należy przedstawić termin używając <code><abbr></code> oraz atrybutu <code>title</code> lub tekstu liniowego podającego definicję.</li>
<li>W przypadku, gdy należy zwrócić uwagę semantycznie na obecność skrótu w tekście, przydatny jest element <code><abbr></code>. To z kolei może być użyte do celów stylizacyjnych lub skryptowych.</li>
<li>Możesz użyć <code><abbr></code> w porozumieniu z {{HTMLElement("dfn")}} aby ustalić definicje terminów, które są skrótami lub akronimami. Zobacz przykład {{anch("Definiowanie skrótu")}} poniżej.</li>
</ul>
<h3 id="Uwagi_gramatyczne">Uwagi gramatyczne</h3>
<p>W języka z {{interwiki("wikipedia", "grammatical number")}} (czyli w tych językach, w których liczba elementów wpływa na gramatykę zdania), użyj tej samej liczby gramatycznej w atrybucie <code>title</code>, co wewnątrz elementu <code><abbr></code>. Jest to szczególnie ważne w językach z więcej niż dwoma liczbami, takich jak Arabski, ale jest również istotne w języku angielskim.</p>
<h2 id="Domyślna_stylizacja">Domyślna stylizacja</h2>
<p>Celem tego znacznika jest jedynie wygoda dla autora i wszystkie przeglądarki domyślnie wyświetlają go w linii ({{cssxref('display')}}<code>: inline</code>), choć jego stylizacja różni się w zależności od przeglądarki:</p>
<ul>
<li>Niektóre przeglądarki, takie jak Internet Explorer, nie stylizują go inaczej niż elementu {{HTMLElement("span")}}.</li>
<li>Opera, Firefox i inne dodają kropkowane podkreślenie zawartości elementu.</li>
<li>Kilka przeglądarek nie tylko dodaje kropkowane podkreślenie, ale także dodaje do nich wariant "small-caps"; aby uniknąć tej stylizacji, dodanie czegoś w rodzaju {{cssxref('font-variant')}}<code>: none</code> w CSS załatwia tę sprawę.</li>
</ul>
<h2 id="Przykłady">Przykłady</h2>
<h3 id="Oznaczanie_skrótu_semantycznie">Oznaczanie skrótu semantycznie</h3>
<p>Aby oznaczyć skrót bez podania rozwinięcia lub opisu, po prostu użyj <code><abbr></code> bez żadnych atrybutów, jak widać w tym przykładzie.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>Używanie <abbr>HTML</abbr> jest fajne i proste!</p></pre>
<h4 id="Rezultat">Rezultat</h4>
<p>Używanie <abbr>HTML</abbr> jest fajne i proste!</p>
<h3 id="Stylistyka_skrótów">Stylistyka skrótów</h3>
<p>Możesz użyć CSS, aby ustawić własny styl skrótów, jak pokazano w tym prostym przykładzie.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><p>Używając <abbr>CSS</abbr>, możesz stylizować swoje skróty!</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">abbr {
font-variant: all-small-caps;
}</pre>
<h4 id="Rezultat_2">Rezultat</h4>
<p>Używając <abbr style="font-variant: all-small-caps;">CSS</abbr>, możesz stylizować swoje skróty!</p>
<h3 id="Dostarczanie_rozszerzenia">Dostarczanie rozszerzenia</h3>
<p>Dodanie atrybutu {{htmlattrxref("title")}} pozwala na rozwinięcie lub zdefiniowanie skrótu lub akronimu.</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><p>Funkcję rejestru nazw internetowych w domenie .pl pełni <abbr title="Naukowa i Akademicka Śieć Komputerowa">NASK</abbr>.</p></pre>
<h4 id="Rezultat_3">Rezultat</h4>
<p>Funkcję rejestru nazw internetowych w domenie .pl pełni <abbr title="Naukowa i Akademicka Śieć Komputerowa">NASK</abbr>.</p>
<h3 id="Definiowanie_skrótu">Definiowanie skrótu</h3>
<p>Możesz użyć <code><abbr></code> w połączeniu z {{HTMLElement("dfn")}}, aby bardziej formalnie zdefiniować skrót, jak pokazano tutaj.</p>
<h4 id="HTML_4">HTML</h4>
<pre class="brush: html"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> jest językiem znaczników używanym do tworzenia semantyki i struktury strony internetowej.</p>
<p><dfn id="spec">Specyfikacja</dfn>
(<abbr title="Specyfikacja">spec</abbr>) jest dokumentem, który przedstawia w szczegółach, jak technologia lub API ma funkcjonować i jak wygląda dostęp do nich.</p></pre>
<h4 id="Rezultat_4">Rezultat</h4>
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr> </dfn> jest językiem znaczników używanym do tworzenia semantyki i struktury strony internetowej.</p>
<p><dfn>Specyfikacja</dfn> (<abbr title="Specyfikacja">spec</abbr>) jest dokumentem, który przedstawia w szczegółach, jak technologia lub API ma funkcjonować i jak wygląda dostęp do nich.</p>
<p>Zobacz bardziej szczegółowe przykłady w artykule <em><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Jak oznaczyć skróty i uczynić je zrozumiałymi</a></em>.</p>
<h2 id="Kwiestie_dostępności">Kwiestie dostępności</h2>
<p>Wypisanie akronimu lub skrótu w całości za pierwszym razem, gdy jest on używany na stronie, jest korzystne, aby pomóc ludziom go zrozumieć, zwłaszcza jeśli treść jest żargonem technicznym lub branżowym.</p>
<h4 id="Przykład">Przykład</h4>
<pre class="brush: html"><p>JavaScript Object Notation (<abbr>JSON</abbr>) jest lekkim formatem wymiany danych.</p>
</pre>
<p>Jest to szczególnie pomocne dla osób, które nie znają terminologii lub pojęć omawianych w treści, dla osób, które są nowe w języku oraz dla osób z problemami poznawczymi.</p>
<h2 id="Specyfikacje">Specyfikacje</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specyfikacja</th>
<th scope="col">Status</th>
<th scope="col">Komentarz</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '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="Kompatybilność_z_przeglądarką">Kompatybilność z przeglądarką</h2>
<p>{{Compat("html.elements.abbr")}}</p>
<h2 id="Zobacz_także">Zobacz także</h2>
<ul>
<li><a href="https://developer.mozilla.org/pl/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Używanie elementu <code><abbr></code></a></li>
<li>Inne elementy zawierające <a href="https://developer.mozilla.org/pl/docs/Web/HTML/Text_level_semantics_conveying_elements">semantykę na poziomie tekstu</a>: {{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>
<li>Przestarzały element {{HTMLElement("acronym")}}, którego obowiązki zostały przeniesione na <code><abbr></code></li>
</ul>
|
