Semantyczne HTML znane również jako semantyczne znaczniki to pojęcie odnoszące się do wykorzystania tagów HTML niosących ze sobą znaczenie lub semantykę treści, które są w nich zawarte. Dodając semantyczne tagi HTML do stron, dostarczane są dodatkowe informacje pozwalające określić rolę oraz ważność różnych części danej strony. Stanowi to przeciwieństwo dla niesemantycznego HTML, które wykorzystuje tagi, które nie niosą ze sobą znaczenia.
HTML to język wykorzystywany do tworzenia struktury strony internetowej. Osoby początkujące powinny w pierwszej kolejności poznać podstawy HTML.
Czym są semantyczne tagi HTML?
Semantyczne tagi HTML to tagi określające znaczenie treści, która jest w nich zawarta.
Przykładowo tagi, takie jak <header> (nagłówek), <article> (artykuł) oraz <footer> (stopka) są semantycznymi tagami HTML. Wyraźnie określają bowiem rolę zawartej w nich treści. Z drugiej strony, tagi, takie jak <div> oraz <span> są typowymi elementami niesemantycznego HTML. Służą one tylko do zachowania treści, ale nie zapewniają wskazań co do rodzaju zawartej treści oraz jej roli odgrywanej na stronie.
Dlaczego należy korzystać z semantycznych tagów HTML?
Poza oczywistym powodem mówiącym o tym, że semantyczne tagi HTML są łatwe do odczytania i zrozumienia na przykład przez deweloperów sieciowych przeglądających kod, istnieją dwa dodatkowe konkretne powody, dla których powinno się zawsze korzystać z semantycznych tagów.
Dostępność
Dla dobrze widzących użytkowników identyfikacja różnych części strony staje się łatwa. Nagłówki, stopki oraz główna treść są natychmiastowo, wyraźnie widoczne.
Nie jest to jednak takie łatwe dla użytkowników, którzy są niewidomi lub mają słaby wzrok i polegają na działaniu czytników ekranów.
Prawidłowe wykorzystanie semantycznych tagów HTML pozwala takim czytelnikom na lepsze zrozumienie treści, ponieważ ich czytniki ekranów będą ją komunikować w sposób bardziej dokładny.
SEO
Semantyczne tagi HTML są ważne pod względem SEO (optymalizacja pod kątem wyszukiwarek), ponieważ wskazują rolę treści znajdującej się w tagach. Takie informacje zapewniają robotom wyszukiwarek, takim jak Googlebot i Bingbot lepsze zrozumienie treści.
To z kolei zwiększa szansę na wybranie danej treści jako kandydata do umieszczenia na stronie z rezultatami wyszukiwania (SERP) dla odpowiednich słów kluczowych.
Mówiąc prościej, strony z prawidłowo wdrożonym semantycznym HTML mają przewagę w zakresie SEO nad stronami, które tego nie posiadają.
Rodzaje semantycznych tagów HTML
Semantyczne tagi mogą definiować różne części strony internetowej.
Warto przyjrzeć się najpopularniejszym semantycznym elementom HTML podzielonym na dwie kategorie pod względem ich wykorzystania:
- Semantyczne tagi HTML struktury
- Semantyczne tagi HTML tekstu
Semantyczne tagi HTML struktury
Wiele semantycznych tagów HTML informuje o układzie strony.
Takie „strukturalne” tagi zostały wprowadzone, gdy HTML4 ulepszono do HTML5. To dlatego są one również powszechnie znane jako semantyczne tagi HTML5 lub semantyczne elementy HTML5.
Poniżej znajduje się ich pełna lista:
- <header> – tag header (nagłówek) definiuje treść, która powinna być uznana za wstępną informację danej strony lub sekcji,
- <nav> – tag nawigacji jest wykorzystywany w linkach nawigacyjnych. Może on zostać osadzony w tagu <header>, ale poboczne tagi nawigacyjne <nav> są również powszechnie wykorzystywane w innych miejscach na stronie,
- <main> – ten tag zawiera główną treść strony. Na jednej podstronie powinien znajdować się tylko jeden taki tag,
- <article> – tag artykułu określa treść, która może być niezależna od strony, na której się znajduje. Niekoniecznie musi on oznaczać „wpis na blogu”. Należy postrzegać to jako samowystarczalny element, który może być wykorzystywany w różnych kontekstach,
- <section> – wykorzystanie tagu <section> jest sposobem grupowania treści zbliżonych pod względem tematycznym. Tag sekcji różni się od tagu artykułu. Niekoniecznie jest on samowystarczalny, ale stanowi część czegoś innego,
- <aside> – Element poboczny określa treść, która jest mniej ważna. Jest on często wykorzystywany w przypadku obszarów pasków bocznych, które dostarczają dodatkowe, ale niezbyt istotne informacje,
- <footer> – Tagu <footer> (stopka) używa się w dolnej części strony. Zwykle zawiera on dane kontaktowe, informacje na temat praw autorskich oraz pewne elementy nawigacyjne strony.
Semantyczne tagi HTML tekstu
Semantyczne tagi HTML tekstu są tagami HTML, które poza formatowaniem, posiadają funkcję semantyczną związaną z tekstem, który jest w nich zawarty.
Poniżej znajduje się kilka najpopularniejszych przykładów:
- <h1> (nagłówek) – tag H1 oznacza nagłówek najwyższego poziomu. Zwykle na jednej stronie znajduje się jeden nagłówek H1,
- <h2> do <h6> (nagłówki poboczne) – są to poboczne nagłówki o różnych poziomach ważności. Na jednej stronie może znajdować się wiele nagłówków tego samego poziomu ważności,
- <p> (paragraf) – pojedynczy paragraf tekstu,
- <a> (anchor) – wykorzystywany do oznaczania hiperłącza pomiędzy jedną a drugą stroną linkowania,
- <ol> (uporządkowana lista) – ista elementów wyświetlanych w określonej kolejności zaczynających się od kropek. Jeden tag <li> (element listy) zawiera pojedynczy element znajdujący się na liście,
- <ul> (nieuporządkowana lista) – Lista elementów, które nie muszą być wyświetlane w określonej kolejności zaczynających się od zwykłych cyfr. Jeden tag <li> (element listy) zawiera pojedynczy element znajdujący się na liście,
- <q> / <blockquote> – cytat znajdujący się w tekście. Wykorzystanie <blockquote> (bloku cytatu) dotyczy długich, wieloliniowych cytatów, natomiast <q> obejmuje krótsze cytaty znajdujące się w danej linii,
- <em> (podkreślenie) – wykorzystuje się dla tekstu, który powinien zostać podkreślony,
- <strong> (pogrubienie) – wykorzystuje się do tekstu, który powinien zostać pogrubiony,
- <code> – blok kodu komputerowego.
Powyżej przedstawione zostały tylko najpopularniejsze przykłady semantycznych tagów HTML. Można używać również wielu innych, takich jak na przykład <summary>, <time>, <address>, <video>, itp. Pozwala to na łatwiejsze zrozumienie treści znajdującej się na stronie internetowej.
Porady i najlepsze praktyki związane z semantycznym HTML
Na koniec warto zwrócić uwagę na porady dotyczące wdrażania HTML oparte o powszechne błędy popełniane przez ludzi wykorzystujących semantyczne tagi HTML.
Nie należy korzystać z semantycznych tagów HTML w celach stylizacyjnych
Pomimo, że przeglądarki internetowe stosują stylizowanie w przypadku wielu tagach semantycznych (np. treść w tagu <a> jest zwykle niebieska i podkreślona), nie oznacza to, że tagi HTML mają być wykorzystywane do stylizacji tekstu.
Innymi słowy, tak jak nie wykorzystuje się tagu <a> dla tekstu niebędącego linkiem tylko po to, aby był on niebieski i podkreślony, nie powinno się używać innych tagów semantycznych wyłącznie do celów stylizacyjnych.
Poniżej znajdują się niektóre typowe przykłady nieprawidłowego wykorzystania semantycznych tagów:
- wykorzystywanie tagów od <h1> do <h6> dla tekstu, który nie jest nagłówkiem po to, aby zmienić rozmiar jego czcionki/fontu,
- wykorzystanie <blockquote> tylko po to, aby stworzyć akapit z tekstu, który nie jest cytatem,
- wykorzystanie <strong> lub <em> po to aby pogrubić lub napisać kursywą tekst, który nie wymaga takiego wyróznienia.
Do celów stylizacyjnych zawsze należy korzystać z CSS.
