Semantyczny HTML

Semantyczny HTML

Kolejne skomplikowane słowo wdarło się do naszego świata i zakłóca developerski spokój. W tym artykule pomożemy Ci, zrozumieć czym jest semantyczny HTML oraz jakie korzyści płyną z jego wykorzystania.

Tajemnicze słowo Semantyka

Robiąc research na ten temat, można trafić na informacje, że semantyka jest to dział językoznawstwa, którego przedmiotem jest analiza znaczeń wyrazów.

Brzmi to niezbyt programistycznie, prawda?

Jednakże jesteśmy również w stanie odnieść to wyrażenie do HTML’a. Każdy znacznik, którego używamy w naszych aplikacjach, został zaprojektowany w taki sposób, aby nieść ze sobą jakieś konkretne znaczenie.

Upraszczając, można powiedzieć, że semantyka w kontekście HTML’a oznacza używanie znaczników zgodnie z ich przeznaczeniem, w celu przypisania znaczenia poszczególnym elementom strony.

Dlaczego warto zwracać na to uwagę?

Dbanie o semantykę niesie ze sobą szereg korzyści:

• Poprawa SEO Wyszukiwarki wykorzystują algorytmy oraz roboty indeksujące, aby określić miejsce naszej witryny w wynikach wyszukiwania. Im szybciej uda im się zaindeksować naszą stronę, określić jej strukturę i znaczenie, tym lepiej dla nas.

• Poprawa accessibility Nawet jeśli z punktu widzenia użytkownika elementy są identyczne to przeglądarki i czytniki ekranowe mogą interpretować je zupełnie inaczej. Niezgodne z przeznaczeniem użycie elementów często skutkuje brakiem możliwości interakcji użytkownika z aplikacją lub błędną interpretacją treści przez przeglądarkę.

• Zwiększenie czytelności oraz łatwości utrzymania kodu Dzięki znacznikom semantycznym osoba, która zajmuje się, rozwojem naszej aplikacji o wiele łatwiej zrozumie, do czego służą poszczególne jej elementy. Co więcej, przy wzroście liczby elementów, łatwiej będzie zapanować nad wszystkim.

Podstawowe znaczniki semantyczne

Warto jeszcze zaznaczyć, że w teorii każdy znacznik HTML jest na swój sposób semantyczny. Nawet taki zwykły div oznacza po prostu blokowy kontener. Problem pojawia się jednak gdy nadużywamy takiego ogólnego kontenera nawet w sytuacjach, gdy element ewidentnie jest czymś więcej niż tylko „opakowaniem” na treść.

Poniżej przedstawimy Ci kilka popularnych tagów HTML, z których warto skorzystać zamiast divów:

• Article - oznacza element zawierający jakiś post na forum, artykuł w czasopiśmie czy wpis na blogu
• Header - element nagłówkowy. Może zawierać elementy nagłówka, logo czy formularz do wyszukiwania treści
• Footer - stopka strony. Tutaj najczęściej można spotkać copyright, politykę prywatności, regulamin lub linki do powiązanych stron itp.
• Nav - wewnątrz tego elementu należy umieścić linki i odnośniki służące do nawigacji po naszej aplikacji
• Section - dość ogólny tag opisujący samodzielny i odrębny fragment strony
• Main - tag służący do zaznaczenia dominującej części dokumentu HTML
• Aside - najczęściej w ten sposób możemy oznaczyć jakieś paski boczne niepowiązane bezpośrednio z główną treścią dokumentu
• Figure - zwykle występuje w parze z tagiem figcaption. W ten sposób jesteśmy w stanie oznaczyć treść z jakimś podpisem, np. obrazek

Znaczników HTML jest oczywiście o wiele więcej, możesz je przejrzeć pod tym linkiem.

Praktyczny przykład

Spójrz na poniższy przykład struktury HTML:

<div>Welcome on our Page</div>
<div>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>
<div>
    <div>Simple article</div>
    <div>Independent section</div>
    <div>Some info</div>
</div>
<div>
    Some advertisements on sid
</div>
<div>Copyright</div>

Nawet jeśli odpowiednio ostylujemy elementy, z punktu widzenia przeglądarki trudno odróżnić, co jest czym. Jest to niewydajne rozwiązanie, nawet nie wspominając jeszcze o utrzymaniu tej struktury oraz jej czytelności dla programisty.

O wiele lepiej wykorzystać elementy HTML dokładnie opisujące własną zawartość:

<header>Welcome on our Page</header>
<nav>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</nav>
<main>
    <article>Simple article</article>
    <section>Independent section</section>
    <section>Some info</section>
</main>
<aside>
    Some advertisements on side
</aside>
<footer>Copyright</footer>

Spójrz, teraz wystarczy tylko rzucić okiem i już po chwili mniej więcej widać który element za co odpowiada.

Okiem przeglądarki

Przeglądarka w przeciwieństwie do nas nie ocenia struktury HTML gołym okiem. To jak ocenia accessibility naszej witryny, możemy sprawdzić za pomocą Accessibility Tree (Drzewa dostępności). Jest ono dostępne w Chrome dev toolsach tutaj:

Ta zakładka może Ci posłużyć jako pomoc podczas projektowania struktury witryny wspierającej czytniki ekranowe.

Podsumowanie

Mamy nadzieję, że tym krótkim wpisem przekonaliśmy Cię do spojrzenia na HTML nieco inaczej i wzięcia pod uwagę większej ilości znaczników.

Oczywiście we wszystkim należy zachować umiar i w naszych aplikacjach w dalszym ciągu warto sięgać po divy i spany natomiast od tej pory zdecydowanie bardziej świadomie.