Ponad 100 elementów HTML i możliwość tworzenia elementów niestandardowych dają nieograniczone możliwości oznaczania treści, ale niektóre sposoby – w szczególności pod względem semantycznym – są lepsze od innych.
Semantyk oznacza „odnoszący się do znaczenia”. Pisanie semantycznego kodu HTML oznacza wykorzystywanie elementów HTML do porządkowania treści w oparciu o ich znaczenie, a nie wygląd.
Nie omówiliśmy jeszcze wielu elementów HTML. Jednakże nawet jeśli nie znasz języka HTML, poniższe 2 fragmenty kodu pokazują, jak znaczniki semantyczne mogą nadać kontekst treści. W obu przypadkach zamiast ipsum lorem, aby zaoszczędzić trochę czasu, używana jest liczba słów. Możesz użyć wyobraźni, żeby przekształcić „30 słów” na 30 słów:
Pierwszy fragment kodu korzysta z <div> i <span> – 2 elementów bez wartości semantycznych.
<div>
<span>Three words</span>
<div>
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</div>
</div>
<div>
<div>
<div>five words</div>
</div>
<div>
<div>three words</div>
<div>forty-six words</div>
<div>forty-four words</div>
</div>
<div>
<div>seven words</h2>
<div>sixty-eight words</div>
<div>forty-four words</div>
</div>
</div>
<div>
<span>five words</span>
</div>
Czy orientujesz się, do czego służą te słowa? Raczej nie.
Zastąpmy ten kod elementami semantycznymi:
<header>
<h1>Three words</h1>
<nav>
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</nav>
</header>
<main>
<header>
<h1>five words</h1>
</header>
<section>
<h2>three words</h2>
<p>forty-six words</p>
<p>forty-four words</p>
</section>
<section>
<h2>seven words</h2>
<p>sixty-eight words</p>
<p>forty-four words</p>
</section>
</main>
<footer>
<p>five words</p>
</footer>
Który blok kodu odebrał znaczenie? Korzystając tylko z niesemantycznych elementów <div> i <span>, nie da się stwierdzić, co reprezentuje treść pierwszego bloku kodu. Drugi przykład kodu, który zawiera elementy semantyczne, zapewnia wystarczający kontekst, aby osoba niebędąca programistą mogła rozszyfrować przeznaczenie i znaczenie treści bez użycia tagu HTML. Zawiera on wystarczający kontekst, aby deweloper mógł zrozumieć zarys strony, nawet jeśli nie rozumie treści, np. treści w języku obcym.
W drugim bloku kodu możemy zrozumieć architekturę nawet bez zrozumienia treści, ponieważ elementy semantyczne zapewniają znaczenie i strukturę. Pierwszy nagłówek to baner witryny, a <h1> to prawdopodobnie nazwa witryny. Stopka to stopka witryny: 5 słów może zawierać oświadczenie o prawach autorskich lub adres firmy.
Znaczniki semantyczne nie ograniczają się tylko do ułatwienia deweloperom czytania znaczników, lecz przede wszystkim ułatwiają ich interpretowanie przez zautomatyzowane narzędzia. Narzędzia dla programistów pokazują, w jaki sposób elementy semantyczne zapewniają też strukturę zrozumiałą dla komputera.
Obiektowy model ułatwień dostępu (AOM)
W trakcie analizowania otrzymanej treści przeglądarka tworzy obiektowy model dokumentu (DOM) i obiektowy model CSS (CSSOM). Następnie tworzy też drzewo ułatwień dostępu. Urządzenia wspomagające, np. czytniki ekranu, używają AOM do analizowania i interpretowania treści. DOM to drzewo wszystkich węzłów w dokumencie. Jest jak semantyczna wersja modelu DOM.
Porównajmy te struktury dokumentów w panelu ułatwień dostępu w Firefoksie:
Na drugim zrzucie ekranu w drugim bloku kodu widać 4 charakterystyczne role. Wykorzystuje do nawigacji semantyczne punkty orientacyjne o nazwach <header>, <main>, <footer> i <nav>. Punkty orientacyjne zapewniają odpowiednią strukturę treści internetowych i umożliwiają użytkownikom czytników ekranu łatwe poruszanie się po ważnych sekcjach przy użyciu klawiatury.
Zwróć uwagę, że obiekty <header> i <footer> to punkty orientacyjne z przypisanymi rolami banner i contentinfo, gdy nie są zagnieżdżone w innych punktach orientacyjnych. AOM Chrome pokazuje to tak:
Patrząc na narzędzia deweloperskie w Chrome, można zauważyć znaczącą różnicę między modelem obiektów ułatwień dostępu w przypadku używania elementów semantycznych a gdy nie używasz tego modelu.
Wyraźnie widać, że użycie elementów semantycznych pomaga w ułatwieniach dostępu, a korzystanie z nich niesemantycznych ogranicza je. Domyślnie kod HTML jest dostępny. Jako deweloperzy musimy chronić domyślny charakter interfejsu HTML i zapewnić jak największą dostępność. Możesz sprawdzić AOM w narzędziach dla programistów.
Atrybut role
Atrybut role opisuje rolę elementu w kontekście dokumentu. Atrybut role jest atrybutem globalnym – co oznacza, że obowiązuje w odniesieniu do wszystkich elementów – jest definiowany przez specyfikację ARIA, a nie przez specyfikację HTML WhatWG, w której zdefiniowano prawie wszystkie pozostałe elementy w tej serii.
Elementy semantyczne pełnią funkcję pośrednią, niektóre zależnie od kontekstu. Jak widać na zrzucie ekranu z narzędziami dla programistów do ułatwień dostępu w Firefoksie, najważniejsze punkty to <header>, <main>, <footer> i <nav>, a element <header> zagnieżdżony w polu <main> to sekcja. Zrzut ekranu z Chrome pokazuje role ARIA tych elementów: <main> to main, <nav> to navigation, a <footer> (ponieważ była to stopka dokumentu) to contentinfo. Gdy nagłówek dokumentu to <header>, domyślna rola to banner, która definiuje sekcję jako globalny nagłówek witryny. Gdy właściwość <header> lub <footer> jest zagnieżdżona w elemencie sekcji, nie jest rolą punktu orientacyjnego. Pokazują to zrzuty ekranu obu narzędzi dla programistów.
Nazwy ról elementów są ważne przy tworzeniu AOM. Semantyka elementu, inaczej „role”, jest ważna dla technologii wspomagających, a w niektórych przypadkach dla wyszukiwarek. Semantyka polega na tym, że użytkownicy technologii wspomagających poruszanie się po treści i interpretowanie jej znaczenia korzystają z zawartości. Rola tego elementu umożliwia użytkownikowi szybki dostęp do poszukiwanej treści, a co ważniejsze – informuje użytkownika czytnika ekranu, jak wejść w interakcję z zaznaczonym elementem interaktywnym.
Elementy interaktywne, takie jak przyciski, linki, zakresy i pola wyboru, mają domyślne role, są automatycznie dodawane do sekwencji kart klawiatury i mają domyślną obsługę działań użytkownika. Rola niejawna lub jawna wartość role informuje użytkownika, że może spodziewać się domyślnych interakcji z użytkownikiem specyficznym dla danego elementu.
Za pomocą atrybutu role możesz przypisać każdemu elementowi rolę, w tym rolę inną niż sugeruje tag. Na przykład <button> ma pośrednią rolę button. Za pomocą funkcji role="button" możesz semantycznie przekształcać dowolny element w przycisk: <p role="button">Click Me</p>.
Dodanie atrybutu role="button" do elementu informuje czytniki ekranu, że jest to przycisk, ale nie zmienia jego wyglądu ani funkcjonalności. Element button udostępnia tyle funkcji, że nie musisz nic robić. Element button jest automatycznie dodawany do sekwencji porządkowania kart dokumentu, co oznacza, że domyślnie można go zaznaczyć za pomocą klawiatury. Klawisz Enter i spacja aktywują przycisk. Przyciski mają też wszystkie metody i właściwości udostępnione im przez interfejs HTMLButtonElement. Jeśli nie użyjesz przycisku semantycznego dla swojego przycisku, musisz ponownie zaprogramować wszystkie te funkcje. Teraz o wiele łatwiej korzystać z usługi <button>.
Wróć do zrzutu ekranu AOM dla niesemantycznego bloku kodu. Pamiętaj, że elementy niesemantyczne nie mają ról pośrednich. Niesemantyczną wersję możemy nadać semantycznym elementom, przypisując każdemu elementowi rolę:
<div role="banner">
<span role="heading" aria-level="1">Three words</span>
<div role="navigation">
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</div>
</div>
Chociaż atrybut role może służyć do dodawania semantyki do dowolnego elementu, używaj zamiast tego elementów z niezbędną rolą.
Elementy semantyczne
Aby wybrać element najlepiej pasujący do zadania, warto zadać sobie pytanie: „Który element najlepiej reprezentuje funkcję tej sekcji znaczników?”. Wybrany element, a tym samym używane tagi, powinny być odpowiednie do wyświetlanej treści, ponieważ tagi mają znaczenie semantyczne.
Kod HTML powinien służyć do określania struktury treści, a nie do definiowania jej wyglądu. Wygląd odpowiada obszarowi CSS. Chociaż niektóre elementy są zdefiniowane w określony sposób, nie używaj żadnego elementu na podstawie tego, jak domyślnie jest on wyświetlany w arkuszu stylów klienta użytkownika. Zamiast tego wybierz każdy element na podstawie jego semantycznego znaczenia i funkcji. Kodowanie HTML w logiczny, semantyczny i znaczący sposób pomaga zapewnić prawidłowe stosowanie CSS.
Dobór odpowiednich elementów podczas tworzenia kodu oznacza, że nie musisz refaktoryzować ani komentować kodu HTML. Gdy myślisz o zastosowaniu odpowiedniego elementu do swojego zadania, najczęściej wybierasz element, który najlepiej pasuje do danego zadania. Jeśli tego nie zrobisz, najprawdopodobniej już nie. Zrozumienie semantyki każdego elementu i zrozumienie, dlaczego wybór odpowiedniego elementu jest ważny, z reguły będziesz w stanie dokonać właściwego wyboru bez większego wysiłku.
W następnej sekcji użyjesz elementów semantycznych, by utworzyć strukturę dokumentu.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę z zakresu semantycznego kodu HTML.
Zawsze dodawaj role="button" do elementu <button>.
<button> ma już tę rolę.