Od div do section: praktyczne wskazówki dotyczące semantyki HTML

Semantyka w HTML: co to jest i dlaczego jest ważna?

Semantyka w HTML odnosi się do zastosowania HTML w sposób, który wyraźnie opisuje znaczenie zawartości strony internetowej. W praktyce oznacza to używanie odpowiednich tagów HTML, aby zakomunikować przeglądarkom i wyszukiwarkom, jaki jest cel i rodzaj każdego elementu na stronie. Przykładowo, zamiast używać uniwersalnego tagu <div> do wszystkich elementów, powinniśmy stosować bardziej opisowe tagi, takie jak <article> dla artykułów, <nav> dla nawigacji, czy <header> i <footer> dla górnej i dolnej części strony. W tym kontekście, jeśli chcesz dowiedzieć się więcej o podstawach języka HTML, zapoznaj się z naszym tekstem o podstawowych znacznikach HTML.

Dodatkowo warto podkreślić, że semantyka w HTML nie wpływa bezpośrednio na wygląd strony – to CSS odpowiada za stylizację. Semantyka zaś koncentruje się na znaczeniu i strukturze treści.

Poprawne stosowanie semantyki HTML ma kilka istotnych korzyści:

Dostępność: Ułatwia użytkownikom korzystającym z czytników ekranu i innych narzędzi wspomagających zrozumienie i nawigację po stronie.

SEO: Wyszukiwarki lepiej rozumieją zawartość strony, co może poprawić jej pozycjonowanie.

Utrzymanie i Rozwój: Czysty, semantyczny kod jest łatwiejszy do zrozumienia i utrzymania dla deweloperów.

Przegląd semantycznych tagów HTML

W tej części artykułu chcę przedstawić Ci różne tagi HTML, od tych najbardziej podstawowych aż po zaawansowane. Opowiem o ich zastosowaniach oraz o tym, jak wpływają one na strukturę i znaczenie treści strony internetowej. To zestawienie pomoże Ci lepiej dobierać odpowiednie tagi HTML, co z kolei przyczyni się do poprawy czytelności i struktury projektów, które tworzysz, a także pomoże w optymalizacji dla wyszukiwarek. Zwróć uwagę, że poniższe zestawienie obejmuje jedynie wybrane tagi HTML. Pełną listę oraz szczegółowe informacje znajdziesz w oficjalnej dokumentacji.

Semantyczne tagi HTML dla struktury

Zaczniemy od przyjrzenia się bliżej tagom, które odpowiadają za strukturalne aspekty witryny. Zobaczymy również, jak właściwe ich zastosowanie wpływa na efektywne organizowanie treści na stronie internetowej.

<header> – Nagłówek strony:
Tag <header> służy do definiowania górnej części strony, której zawartość jest często powtarzana na innych podstronach. Zawiera zazwyczaj logo, tytuł strony i główną nawigację.

<nav> – Nawigacja:
Tag <nav> jest przeznaczony do oznaczania głównych bloków nawigacyjnych, takich jak menu. Używanie tego tagu ułatwia robotom wyszukiwarek nawigację po strukturze strony.

<main> – Główna treść:
Tag <main> jest używany do oznaczania głównej, unikalnej treści strony. Jest ważny dla dostępności, ponieważ umożliwia czytnikom ekranu szybkie przejście do kluczowej zawartości strony. Powinien być używany tylko raz na stronie.

<section> – Sekcje tematyczne:
<section> to tag służący do grupowania powiązanych treści w logiczne sekcje. Każda sekcja powinna posiadać własny nagłówek, co pomaga w organizacji treści i jej zrozumieniu.

<article> – Samodzielne treści:
Tag <article> jest używany do oznaczania treści, które stanowią samodzielną całość, np. artykułów, postów blogowych lub komentarzy.

<aside> – Informacje dodatkowe:
<aside> jest używany do oznaczania treści, które są powiązane z główną treścią strony, ale nie są jej kluczową częścią. Ten tag jest często stosowany do oznaczania paneli bocznych (sidebar). Można tam umieścić dodatkowe informacje takie jak menu boczne, informacje kontaktowe, linki do innych artykułów.

<footer> – Stopka strony:
<footer> zawiera informacje końcowe strony, takie jak prawo autorskie, linki do polityki prywatności, czy dane kontaktowe. Jest to standardowe umiejscowienie tych informacji.

Semantyczne tagi HTML dla treści

Dotychczas skupiliśmy się na strukturalnych aspektach semantyki HTML. Teraz przejdźmy do kluczowych tagów semantycznych, które mają bezpośredni wpływ na treść i jej prezentację:

<h1> do <h6> – Hierarchia nagłówków:

<h1> : Tag H1 oznacza główny nagłówek na stronie. Zazwyczaj na jednej stronie jest tylko jeden nagłówek H1.
<h2> do <h6>: Nagłówki różnych poziomów ważności. Na jednej stronie może być wiele nagłówków tego samego poziomu.

Prawidłowa hierarchia nagłówków nie tylko ułatwia czytanie i zrozumienie treści przez użytkowników, ale także poprawia SEO, pomagając robotom wyszukiwarek zrozumieć strukturę i priorytetyzować treści.

<p> – Akapity:

Podstawowy blok tekstu, <p>, jest niezbędny do tworzenia czytelnych i dobrze zorganizowanych akapitów.

<a> – Hiperłącza:

Tag <a> to fundament nawigacji internetowej, umożliwiający tworzenie łączy między różnymi stronami lub sekcjami witryny.

<em>, <i> – Kursywa

W świecie semantycznego HTML-a, tagi <em> i <i> pełnią podobną funkcję wizualną (pochylają tekst), ale różnią się znaczeniem semantycznym.

<em> używamy dla podkreślenia znaczenia:

Użycie <em> sygnalizuje, że ten fragment tekstu ma większe znaczenie w ramach całej wypowiedzi. Na przykład, w zdaniu „Mam bardzo ważną wiadomość dla Ciebie”, użycie <em> na słowie „naprawdę” podkreśla wagę komunikatu. W kontekście czytników ekranu <em> może być interpretowane jako zmiana tonu głosu, zwiększającą nacisk na wyróżniony fragment.

<p>Mam <em>bardzo</em> ważną wiadomość dla Ciebie.</p>

<i> używamy dla wyróżnienia wizualnego:

W zadaniu “Moja ulubiona książka to Władca Pierścieni J.R.R. Tolkiena.” tag <i> jest używany do zastosowania kursywy, w tym przykładzie dla wyróżnienia tytułu książki.

<p>Moja ulubiona książka to 
<i>Władca Pierścieni</i> J.R.R. Tolkiena.</p>

„Władca Pierścieni” jest wyróżniony stylistycznie, ale bez dodatkowego nacisku semantycznego.

<strong>, <b> – Pogrubienie:
Zarówno <strong>, jak i <b> wizualnie pogrubiają tekst. Jednak tag <strong> nadaje mu dodatkowe znaczenie semantyczne, podkreślając jego ważność, natomiast <b> stosowany jest głównie dla efektów stylistycznych, bez zmiany semantycznej wagi tekstu.

<p>Ważne jest, aby zawsze pamiętać o
<strong>bezpieczeństwie</strong> podczas korzystania z Internetu.</p>

W tym przypadku słowo „bezpieczeństwo” zostanie wyróżnione, sugerując jego kluczową rolę w kontekście zdania.

Użycie <b> dla wyróżnienia wizualnego:

<p>Na dzisiejszym spotkaniu omówimy 
<b>plan marketingowy</b> na następny kwartał.</p>

Tutaj „plan marketingowy” jest wyróżniony wizualnie, ale nie niesie za sobą dodatkowego semantycznego znaczenia jak w przypadku użycia <strong>.

<ol>, <ul>, <li> – Listy:
Zarówno uporządkowane (<ol>), jak i nieuporządkowane (<ul>) listy wraz z elementami listy (<li>) są nieocenione w prezentacji punktowanych informacji lub kroków.

<blockquote> – Cytaty:
Idealny do wyróżniania dłuższych cytatów, <blockquote> pomaga w strukturalnym i wizualnym oddzieleniu cytowanego tekstu od reszty treści.

<cite> – Podpisywanie cytatów i źródeł:
Tag <cite> to niezastąpiony element przy oznaczaniu źródeł cytowanych treści. Szczególnie użyteczny w połączeniu z <blockquote>, pomaga w klarownym przedstawieniu pochodzenia zacytowanych wypowiedzi, co jest ważne zarówno dla wiarygodności treści, jak i dla jej prawidłowego oznaczania.

<code> – Prezentacja kodu:
W artykułach technicznych czy blogach programistycznych tag <code> jest kluczowy do prezentacji fragmentów kodu. Nie tylko poprawia on czytelność kodu, ale również wskazuje, że dany fragment jest traktowany jako kod komputerowy, co może być pomocne zarówno dla czytelników, jak i robotów wyszukiwarek.

<time> – Oznaczanie czasu:

<article>
  <h2>Wydarzenie naukowe</h2>
  <p>Konferencja odbędzie się <time datetime="2023-09-30">
  30 września 2023 roku</time>.</p>
</article>

W tym przykładzie tag <time> użyty został do oznaczenia konkretnej daty wydarzenia. Atrybut datetime=”2023-09-30″ precyzuje datę w formacie, który jest łatwy do zrozumienia i przetworzenia przez maszyny, takie jak roboty wyszukiwarek, co pomaga w indeksowaniu i prezentowaniu daty w wynikach wyszukiwania.

<kbd> i <samp> – Instrukcje i wyniki:
Tagi <kbd> i <samp> są użyteczne w tutorialach i instrukcjach, gdzie <kbd> oznacza wprowadzane dane (np. klawisze klawiatury), a <samp> prezentuje oczekiwane wyniki. To doskonały sposób na wizualne oddzielenie akcji od reakcji systemu.

<article>
  <h3>Jak zrobić zrzut ekranu na komputerze?</h3>
  <p>Aby zrobić zrzut ekranu, naciśnij jednocześnie następujące klawisze:</p>
  <p><kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>4</kbd> (dla użytkowników Mac)</p>
  <p><kbd>Windows</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> (dla użytkowników Windows)</p>
  <p>Po naciśnięciu tej kombinacji, ekran stanie się 
  lekko przyciemniony, a kursor zmieni się w krzyż.
  Możesz teraz wybrać obszar ekranu, który chcesz uchwycić.</p>
</article

<dfn> – Definiowanie terminów:

Tag <dfn> jest używany do oznaczania terminu, który jest definiowany lub wyjaśniany po raz pierwszy w kontekście dokumentu. Jego głównym celem jest wyróżnienie słów lub fraz, których definicje są podane w tekście, co pomaga czytelnikom zrozumieć nowe lub specjalistyczne terminy.

<p>
  <dfn>HTML</dfn> (HyperText Markup Language) to standardowy
  język znaczników używany do tworzenia stron internetowych.
</p>

W powyższym przykładzie <dfn> jest użyty do wyróżnienia terminu „HTML”, a następnie podana jest jego pełna forma i krótki opis. Taki sposób prezentacji ułatwia zrozumienie tekstu, szczególnie w przypadku wprowadzania nowych pojęć.

Użycie <dfn> jest szczególnie przydatne w artykułach edukacyjnych, blogach naukowych czy dokumentacjach technicznych, gdzie często pojawiają się specjalistyczne terminy.

<hr> – Więcej niż Pozioma Linia

Tag <hr> jest często postrzegany jako prosty sposób na wstawienie poziomej linii rozdzielającej na stronie. Jednakże, w kontekście semantyki HTML, jego znaczenie wykracza poza aspekt wizualny.

Semantyczne Zastosowanie <hr>:

Oddzielenie Treści: Tag <hr> jest używany do semantycznego oddzielenia różnych sekcji treści na stronie. Na przykład, może on oddzielać dwa różne tematy w artykule lub dwa odmienne segmenty na blogu.
Zmiana Tematu: W kontekście dłuższego tekstu, <hr> może wskazywać na zmianę tematu lub przesunięcie narracji. Jest to sygnał dla czytelnika o nowym, odrębnym segmencie treści.
Wizualne Podkreślenie: Chociaż <hr> służy głównie do semantycznego oddzielenia, często jest wykorzystywany również jako element dekoracyjny, wizualnie oddzielając różne części strony.

Prawidłowe Użycie <hr>:

Należy używać <hr> w miejscach, gdzie logicznie pasuje semantyczne oddzielenie sekcji, a nie tylko dla celów wizualnych.
Powinno się unikać nadużywania <hr>, gdyż może to prowadzić do zamętu i rozdrobnienia treści.

<p>Tutaj kończy się wstęp artykułu.</p>
<hr>
<p>Zaczyna się kolejna sekcja z główną treścią.</p>

W tym przykładzie <hr> służy jako wyraźny separator między wstępem a główną częścią artykułu, pomagając użytkownikowi w orientacji na stronie.

Dlaczego warto ograniczyć użycie <div>?

Wyobraź sobie, że roboty wyszukiwarek to turyści próbujący zrozumieć miasto bez mapy. Gdy Twoja strona jest zbudowana głównie z <div>, dla nich jest to jak próba nawigacji po labiryncie bez oznakowań – trudno im zrozumieć strukturę i hierarchię treści. Każdy <div> jest jak kolejna, nierozróżnialna ulica.

Przykład problematycznego użycia <div>:

<div>
  <div>
    <img src="logo.png" alt="Logo">
  </div>
  <div>
    <div>
      <a href="#home">Strona główna</a>
      <a href="#about">O nas</a>
      <a href="#contact">Kontakt</a>
    </div>
    <div>Tytuł strony</div>
  </div>
  <div>Treść strony</div>
</div>

W tym przypadku roboty wyszukiwarek mają trudności z określeniem, które części są ważne, a które drugorzędne, co wpływa na SEO.

Przykład użycia semantycznych tagów:

<header>
  <img src="logo.png" alt="Logo firmy">
</header>
<nav>
  <a href="#home">Strona główna</a>
  <a href="#about">O nas</a>
  <a href="#contact">Kontakt</a>
</nav>
<main>
  <h1>Tytuł strony</h1>
  <p>Treść strony</p>
</main>
footer>
  <p>Informacje kontaktowe</p>
</footer>

Tutaj każdy tag ma jasno określone znaczenie. <header>, <nav>, <main> i <footer> działają jak dobrze oznakowane drogowskazy, ułatwiając robotom zrozumienie struktury strony, indeksację treści i potencjalnie lepsze pozycjonowanie w wynikach wyszukiwania.

Semantyka jako narzędzie sukcesu - podsumowanie

W obecnych czasach, kiedy cyfrowa technologia przenika każdy aspekt życia i każda strona internetowa rywalizuje o uwagę, efektywne wykorzystanie semantyki HTML może stać się kluczem do osiągnięcia sukcesu online. Opanowanie tej umiejętności nie tylko zwiększy widoczność Twojej witryny w sieci, ale również znacząco przyczyni się do budowania bardziej przystępnego i dostępnego internetu dla wszystkich.

Dziękuję za przeczytanie i pamiętaj: w świecie kodowania, nawet małe tagi mogą robić wielkie rzeczy!

Zastanawiasz się nad frontendem jako ścieżką kariery? Odkryj, jak wygląda praca frontend developera

Ewelina Mucha

Dzień zaczyna od kawy i linijki kodu, a gdy znika sprzed ekranu, z pewnością znajdziesz ją albo z patelnią w ręku w kuchni, albo z rakietką przy stole do ping-ponga.