Element skrótu HTML (<abbr>) reprezentuje skrót lub akronim; opcjonalny atrybut title może stanowić rozwinięcie lub opis skrótu. Jeśli występuje, title musi zawierać pełny opis i nic więcej.

Artykuł Jak oznaczać skróty i uczynić je zrozumiałymi jest przewodnikiem do nauki używania <abbr> i elementów pokrewnych.

Kategorie treści Treść płynnaTreść frazowania, zawartość zdzieralna.
Dozwolona zawartość Treść frazowania
Pominięcie znacznika Brak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.
Dozwoleni rodzice Każdy element, który akceptuje zawartość frazowania
Dozwolone role ARIA Żadne
Interfejs DOM HTMLElement

Atrybuty

Ten element obsługuje tylko atrybuty globalne. Atrybut title ma specyficzne znaczenie semantyczne, gdy jest używany z elementem <abbr>musi 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.

Każdy element <abbr>, którego używasz jest niezależny od wszystkich innych; podanie title dla jednego elementu nie załącza automatycznie tego samego rozszerzenia tekstu do innych o tej samej treści.

Uwagi dotyczące użycia

Typowe zastosowania

Z pewnością nie jest wymagane, aby wszystkie skróty były oznaczane przy użyciu <abbr>. Jest jednak kilka przypadków, w których jest to pomocne:

  • Jeśli używany jest skrót i chcesz zapewnić rozszerzenie lub definicję poza obiegiem treści dokumentu, użyj <abbr> z odpowiednim atrybutem title.
  • Aby zdefiniować skrót, który może być nieznany czytelnikowi, należy przedstawić termin używając <abbr> oraz atrybutu title lub tekstu liniowego podającego definicję.
  • W przypadku, gdy należy zwrócić uwagę semantycznie na obecność skrótu w tekście, przydatny jest element <abbr>. To z kolei może być użyte do celów stylizacyjnych lub skryptowych.
  • Możesz użyć <abbr> w porozumieniu z <dfn> aby ustalić definicje terminów, które są skrótami lub akronimami. Zobacz przykład Definiowanie skrótu poniżej.

Uwagi gramatyczne

W języka z 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 title, co wewnątrz elementu <abbr>. 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.

Domyślna stylizacja

Celem tego znacznika jest jedynie wygoda dla autora i wszystkie przeglądarki domyślnie wyświetlają go w linii (display: inline), choć jego stylizacja różni się w zależności od przeglądarki:

  • Niektóre przeglądarki, takie jak Internet Explorer, nie stylizują go inaczej niż elementu <span>.
  • Opera, Firefox i inne dodają kropkowane podkreślenie zawartości elementu.
  • 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 font-variant: none w CSS załatwia tę sprawę.

Przykłady

Oznaczanie skrótu semantycznie

Aby oznaczyć skrót bez podania rozwinięcia lub opisu, po prostu użyj <abbr> bez żadnych atrybutów, jak widać w tym przykładzie.

HTML

<p>Używanie <abbr>HTML</abbr> jest fajne i proste!</p>

Rezultat

Używanie HTML jest fajne i proste!

Stylistyka skrótów

Możesz użyć CSS, aby ustawić własny styl skrótów, jak pokazano w tym prostym przykładzie.

HTML

<p>Używając <abbr>CSS</abbr>, możesz stylizować swoje skróty!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Rezultat

Używając CSS, możesz stylizować swoje skróty!

Dostarczanie rozszerzenia

Dodanie atrybutu title pozwala na rozwinięcie lub zdefiniowanie skrótu lub akronimu.

HTML

<p>Funkcję rejestru nazw internetowych w domenie .pl pełni <abbr title="Naukowa i Akademicka Śieć Komputerowa">NASK</abbr>.</p>

Rezultat

Funkcję rejestru nazw internetowych w domenie .pl pełni NASK.

Definiowanie skrótu

Możesz użyć <abbr> w połączeniu z <dfn>, aby bardziej formalnie zdefiniować skrót, jak pokazano tutaj.

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>

Rezultat

HTML jest językiem znaczników używanym do tworzenia semantyki i struktury strony internetowej.

Specyfikacja (spec) jest dokumentem, który przedstawia w szczegółach, jak technologia lub API ma funkcjonować i jak wygląda dostęp do nich.

Zobacz bardziej szczegółowe przykłady w artykule Jak oznaczyć skróty i uczynić je zrozumiałymi.

Kwiestie dostępności

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.

Przykład

<p>JavaScript Object Notation (<abbr>JSON</abbr>) jest lekkim formatem wymiany danych.</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.

Specyfikacje

Specyfikacja Status Komentarz
HTML Living Standard
The definition of '<abbr>' in that specification.
Living Standard  
HTML5
The definition of '<abbr>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<abbr>' in that specification.
Recommendation  

Kompatybilność z przeglądarką

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 2Edge Full support YesFirefox Full support 1
Notes
Full support 1
Notes
Notes Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
IE Full support 7Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Zobacz także

Autorzy i etykiety dokumentu

Autorzy tej strony: DoctorLarva, teoli, Ptak82, Witia, PablO
Ostatnia aktualizacja: DoctorLarva,