<dfn> w HTML to semantyczny znacznik służący do oznaczania definicji terminu, który jest wyjaśniany w danym fragmencie treści. Dzięki niemu można jednoznacznie wskazać, który wyraz lub fraza to termin podlegający zdefiniowaniu — co poprawia semantykę dokumentu, a także ułatwia pracę narzędziom takim jak wyszukiwarki czy czytniki ekranu.
Podstawowe zastosowanie <dfn>
Znacznik <dfn> otacza termin, którego definicja pojawia się w bezpośrednim sąsiedztwie lub w tym samym zdaniu. Dzięki temu zarówno czytelnik, jak i maszyny (np. roboty wyszukiwarek) wiedzą, że chodzi o definicję pojęcia.
<p><dfn>HTML</dfn> to standardowy język znaczników do projektowania stron internetowych.</p>W powyższym przykładzie terminem definiowanym jest „HTML”.
Zasady używania <dfn>
- Definiowany termin –
<dfn>powinien obejmować pojedynczy termin lub krótką frazę wprowadzającą definicję; - Definicja w pobliżu – zgodnie z zaleceniami, definicja (wyjaśnienie terminu) powinna znajdować się w bezpośrednim sąsiedztwie znaku
<dfn>; - Semantyka – dzięki jednoznacznemu oznaczeniu terminu, zwiększamy dostępność i czytelność kodu dla narzędzi pomocniczych.
Zaawansowane możliwości i przykłady
Atrybut title jako pełna nazwa terminu
Dodając atrybut title, można przekazać pełną nazwę lub dodatkowe informacje o terminie:
<p><dfn title="HyperText Markup Language">HTML</dfn> to standardowy język znaczników do projektowania stron internetowych.</p>Część przeglądarek wyświetli tę informację jako podpowiedź po najechaniu kursorem.
Łączenie z <abbr>
Można również zagnieżdżać dfn i abbr (skrót), aby przekazać zarówno definicję, jak i pełną nazwę skrótu:
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> to standardowy język znaczników do projektowania stron internetowych.</p>Łączenie z identyfikatorami dla odwołań
Definiując termin z id, można później odwołać się do niego za pomocą linku, na przykład w przypisie lub słowniku pojęć:
<p><dfn id="html-def">HTML</dfn> to standardowy język znaczników do projektowania stron internetowych.</p>
<p>Dowiedz się więcej o <a href="#html-def">HTML</a>.</p>Stosowanie z listami definicji <dl>, <dt>, <dd>
Często <dfn> pojawia się wewnątrz semantycznych list definicji, gdzie <dt> to termin, a <dd> — jego opis, np.:
<dl>
<dt><dfn title="Cascading Style Sheets">CSS</dfn></dt>
<dd>Język arkuszy stylów do opisu prezentacji stron WWW.</dd>
</dl>Najważniejsze cechy <dfn>
- Semantyczny HTML – pomaga opisywać strukturę treści zgodnie z jej znaczeniem;
- Dostępność – ułatwia zrozumienie treści osobom korzystającym z czytników ekranu;
- Optymalizacja SEO – wspiera algorytmy wyszukiwarek w rozpoznawaniu definicji i terminów branżowych;
- Możliwość stylowania – domyślnie definicja często jest kursywą, ale można ją dowolnie stylować przez CSS.
Przykład praktyczny – słowniczek na stronie
<dl>
<dt><dfn id="api">API</dfn></dt>
<dd>Interfejs programistyczny aplikacji pozwalający na komunikację między programami.</dd>
<dt><dfn id="dom">DOM</dfn></dt>
<dd>Model obiektowy dokumentu reprezentujący strukturę strony WWW.</dd>
</dl>
<p>Więcej o <a href="#api">API</a> i <a href="#dom">DOM</a> znajdziesz w naszym słowniczku.</p>Podsumowanie
<dfn> to prosty, lecz niezwykle przydatny znacznik HTML, który porządkuje treść, jasno wskazuje, gdzie pojawiają się definicje nowych terminów, oraz poprawia zarówno dostępność, jak i SEO stron internetowych. Dzięki niemu treść staje się bardziej przejrzysta i jednoznaczna także dla maszyn oraz użytkowników korzystających z technologii wspierających. Warto go stosować wszędzie tam, gdzie w tekście pojawiają się ważne pojęcia wymagające wyjaśnienia.
