Co to jest `abbr` w HTML?

<abbr> w HTML to element służący do oznaczania skrótów i akronimów w treści strony internetowej. Jest szczególnie przydatny, gdy chcesz przekazać użytkownikom lub czytnikom ekranu pełne znaczenie skrótu, czyniąc swoje treści bardziej czytelnymi i dostępnymi. Znaczenie skrótu możesz podać za pomocą atrybutu title.

Czym jest <abbr> i do czego służy?

• <abbr> (abbreviation) – oznacza skrót lub akronim, na przykład: „WWW”, „CSS”, „HTML”, „WHO”, „Dr.”, „itp.”;
• Dzięki atrybutowi title – możesz określić pełne rozwinięcie skrótu. Po najechaniu kursorem myszki na taki skrót, większość przeglądarek wyświetli rozwinięcie w formie podpowiedzi (tooltipa);
• Wspiera dostępność treści – czytniki ekranu mogą odczytać zarówno skrót, jak i jego opis.

Składnia i przykłady użycia

<abbr title="World Wide Web">WWW</abbr> 

Po najechaniu na „WWW” pojawi się podpowiedź: „World Wide Web”.

Przykłady praktyczne

• Oznaczanie organizacji:

 The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. 

• Terminy techniczne:

 Pracujemy z <abbr title="HyperText Markup Language">HTML</abbr> i <abbr title="Cascading Style Sheets">CSS</abbr>. 

• Skróty w języku polskim:

 Spotkanie odbędzie się o godz. <abbr title="około">ok.</abbr> 12:00. 

Dostępność i obsługa przez przeglądarki

• <abbr> – działa we wszystkich nowoczesnych przeglądarkach;
• Zazwyczaj skróty oznaczone <abbr> mają domyślnie przerywane podkreślenie lub są wyróżnione, choć stylowanie zależy od przeglądarki i można je zmienić przy pomocy CSS;
• Wspiera „globalne atrybuty” HTML – m.in. class, id, lang, style oraz atrybuty zdarzeniowe JavaScript.

Wskazówki dotyczące stosowania

• Zawsze uzupełniaj atrybut title tak, by zawierał jednoznacznie rozwinięcie skrótu – to kluczowe dla osób korzystających z czytników ekranu;
• Nie używaj <abbr> nadmiarowo – umieszcza się go tylko tam, gdzie skrót wymaga wyjaśnienia;
• Jeśli skrót pojawia się wielokrotnie, warto rozwinąć go tylko przy pierwszym wystąpieniu w danym dokumencie;
• Możesz łączyć <abbr> z innymi elementami, np. <dfn>, w celu zdefiniowania określenia.

Przykład z definicją

<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> to język opisu wyglądu dokumentów HTML. 

Podsumowanie najważniejszych cech <abbr>

• Definiuje skrót lub akronim – z możliwością rozwinęcia znaczenia;
• Atrybut title – przekazuje pełną nazwę lub opis skrótu;
• Wspiera dostępność i jest łatwy do stylizacji przez CSS;
• Stosowanie tego znacznika – poprawia jakość, czytelność i profesjonalizm treści publikowanych w internecie.

Stylizacja <abbr> w CSS

Możesz dostosować wygląd swoich skrótów, np.:

abbr { border-bottom: 1px dotted #333; cursor: help; text-decoration: none; } 

Najczęstsze zastosowania

• Skróty nazw organizacji i instytucji: <abbr title="Polska Agencja Prasowa">PAP</abbr>
• Terminy branżowe i techniczne: <abbr title="User Interface">UI</abbr>
• Skróty jednostek miary lub czasu: <abbr title="milisekundy">ms</abbr>, <abbr title="przed naszą erą">p.n.e.</abbr>

Stosując <abbr> w swoich projektach dbasz o przejrzystość treści, komfort użytkownika i spełniasz wymogi dostępności współczesnego internetu.