<abbr>
Skrót lub akronim, z opcjonalnym rozwinięciem w atrybucie title.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<p>
Strukturę strony opisujemy w <abbr title="HyperText Markup Language">HTML</abbr>,
a wygląd nadajemy jej w <abbr title="Cascading Style Sheets">CSS</abbr>.
</p>Definicja i zastosowanie
#Element <abbr> oznacza skrót lub akronim, taki jak HTML, API czy SEO. Pełne rozwinięcie możesz podać w globalnym atrybucie title: przeglądarka pokaże je w dymku po najechaniu myszką, a sam skrót podkreśli linią z kropek.
Dymek z title ma jednak wady. Nie zobaczysz go na telefonie ani podczas obsługi strony klawiaturą, a czytniki ekranu odczytują go niekonsekwentnie. Dlatego najlepiej rozwinąć skrót w tekście przy pierwszym użyciu, np. „interfejs programistyczny aplikacji (API)”, a title traktować jako dodatek.
Nie musisz oznaczać każdego skrótu. Powszechne skróty, takie jak „np.” czy „itd.”, nie potrzebują <abbr>. Element przydaje się przy skrótach, których czytelnik może nie znać.
Składnia
#<abbr title="pełne rozwinięcie">skrót</abbr>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<p>
Interfejs programistyczny aplikacji (<abbr>API</abbr>) to zestaw zasad,
według których programy wymieniają dane. Każde <abbr>API</abbr> ma własną dokumentację.
</p>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
abbr[title] {
text-decoration: underline dotted;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Rozwiń skrót w tekście przy pierwszym użyciu. Dymek z
titlezobaczą tylko użytkownicy myszki. - Element
<acronym>jest przestarzały. Do wszystkich skrótów i akronimów używaj<abbr>. - Kropkowane podkreślenie możesz zmienić w CSS, ale zostaw jakiś sygnał, że skrót ma rozwinięcie.
Powiązane hasła
#- <dfn>Termin definiowany w tym miejscu tekstu, czyli pierwsze, objaśniające użycie pojęcia.
- <span>Uniwersalny kontener liniowy bez znaczenia, do stylowania fragmentu tekstu.
- <cite>Tytuł dzieła: książki, artykułu, filmu, piosenki, gry albo programu.
- <code>Fragment kodu komputerowego: nazwa zmiennej, funkcji, znacznika albo pliku, a także krótki listing.
Widzisz błąd albo brakuje przykładu? Napisz do nas.