Wprowadzenie do znaczników semantycznych HTML5

Lekcja 9.1: Wprowadzenie do znaczników semantycznych HTML5

Strona główna > Rozdział 9: Elementy semantyczne > Wprowadzenie do znaczników semantycznych

Co to jest semantyka w HTML?

Semantyka w kontekście HTML odnosi się do znaczenia poszczególnych elementów kodu, a nie tylko do ich wyglądu. Używanie znaczników semantycznych oznacza wybieranie elementów HTML, które dokładnie opisują rodzaj zawartości, jaką obejmują.

Przed HTML5, struktura strony była często budowana głównie za pomocą generycznych znaczników <div> z różnymi atrybutami id lub class (np. <div id="header">, <div class="sidebar">). Chociaż to działało, kod był mniej czytelny dla programistów i, co ważniejsze, dla maszyn (takich jak wyszukiwarki internetowe czy czytniki ekranu).

HTML5 wprowadził szereg nowych znaczników, które mają jasno określone znaczenie semantyczne, pozwalając lepiej opisać strukturę dokumentu.

Dlaczego warto używać znaczników semantycznych?

Lepsze SEO (Search Engine Optimization): Wyszukiwarki (np. Google) lepiej rozumieją strukturę i hierarchię treści na stronie, gdy używane są znaczniki semantyczne. Mogą łatwiej zidentyfikować nagłówek, nawigację, główną treść, artykuły itp., co może pozytywnie wpłynąć na pozycjonowanie strony.
Poprawa dostępności (Accessibility): Technologie wspomagające, takie jak czytniki ekranu używane przez osoby niewidome lub niedowidzące, wykorzystują znaczniki semantyczne do nawigacji po stronie i zrozumienia jej struktury. Użytkownik czytnika może np. łatwo przeskoczyć do głównej treści (<main>) lub nawigacji (<nav>).
Czytelniejszy i łatwiejszy w utrzymaniu kod: Kod używający znaczników semantycznych jest bardziej zrozumiały dla innych programistów (i dla Ciebie w przyszłości). Od razu widać, która część strony pełni jaką funkcję.
Spójność: Używanie standardowych znaczników do typowych części strony (nagłówek, stopka, nawigacja) promuje spójność w tworzeniu stron internetowych.

Główne znaczniki semantyczne HTML5

Oto najważniejsze nowe znaczniki strukturalne wprowadzone w HTML5:

<header>: Reprezentuje nagłówek strony lub sekcji. Zazwyczaj zawiera logo, tytuł strony, główną nawigację, pole wyszukiwania. Może występować wielokrotnie na stronie (np. nagłówek całej strony i nagłówek artykułu).
<nav>: Reprezentuje główny blok nawigacyjny strony (menu, linki do podstron). Nie należy go używać do każdej grupy linków (np. linków w stopce).
<main>: Reprezentuje główną, unikalną treść dokumentu. Powinien być tylko jeden element <main> na stronie i nie powinien on zawierać treści powtarzających się na wielu podstronach (jak nagłówek, stopka czy boczne paski).
<article>: Reprezentuje samodzielną, kompletną część treści, która mogłaby istnieć niezależnie od reszty strony (np. post na blogu, artykuł newsowy, komentarz użytkownika, widżet). Artykuły często mają własny nagłówek (<header>) i stopkę (<footer>).
<section>: Reprezentuje tematyczną grupę treści, zazwyczaj z nagłówkiem (<h1>-<h6>). Służy do podziału większej całości (np. strony głównej, artykułu) na logiczne sekcje (np. "Wprowadzenie", "Cechy produktu", "Kontakt").
<aside>: Reprezentuje treść poboczną, luźno związaną z główną treścią strony lub jej otoczeniem (np. panel boczny z linkami, reklamy, biografia autora w artykule).
<footer>: Reprezentuje stopkę strony lub sekcji. Zazwyczaj zawiera informacje o autorze, prawa autorskie, linki do polityki prywatności, mapę strony, dane kontaktowe. Podobnie jak <header>, może występować wielokrotnie.
<figure> i <figcaption>: Służą do grupowania treści ilustracyjnej (obrazek, diagram, fragment kodu) wraz z jej podpisem.
<time>: Służy do oznaczania daty i/lub czasu w sposób zrozumiały dla maszyn.

Przykład struktury strony z użyciem znaczników semantycznych:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Strona Semantyczna</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header> <!-- Nagłówek całej strony -->
        <h1>Moja Strona</h1>
        <nav> <!-- Główna nawigacja -->
            <ul>
                <li><a href="/">Start</a></li>
                <li><a href="/o-nas">O nas</a></li>
                <li><a href="/kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main> <!-- Główna treść strony -->
        <article> <!-- Samodzielny artykuł -->
            <header> <!-- Nagłówek artykułu -->
                <h2>Tytuł Artykułu</h2>
                <p>Opublikowano: <time datetime="2025-04-29">29 kwietnia 2025</time></p>
            </header>
            
            <p>Pierwszy akapit treści artykułu...</p>
            
            <section> <!-- Sekcja wewnątrz artykułu -->
                <h3>Podtytuł sekcji</h3>
                <p>Treść tej sekcji...</p>
                <figure>
                    <img src="obrazek.jpg" alt="Opis obrazka">
                    <figcaption>Podpis pod obrazkiem.</figcaption>
                </figure>
            </section>
            
            <footer> <!-- Stopka artykułu -->
                <p>Tagi: html, semantyka, webdev</p>
            </footer>
        </article>
        
        <aside> <!-- Panel boczny -->
            <h3>Powiązane linki</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </aside>
    </main>

    <footer> <!-- Stopka całej strony -->
        <p>© 2025 Moja Strona. Wszelkie prawa zastrzeżone.</p>
        <p><a href="/polityka-prywatnosci">Polityka prywatności</a></p>
    </footer>

</body>
</html>

Ten przykład pokazuje typowy układ strony z wykorzystaniem głównych znaczników semantycznych. Zwróć uwagę, jak <header> i <footer> są używane zarówno dla całej strony, jak i dla elementu <article>.

Kiedy używać <section>, a kiedy <article>?

Rozróżnienie między <section> a <article> bywa czasem trudne:

<article>: Używaj, gdy treść jest samodzielna i mogłaby być dystrybuowana niezależnie (np. post na blogu, który można udostępnić w czytniku RSS).
<section>: Używaj do grupowania powiązanych tematycznie treści w ramach większej całości. Sekcja zazwyczaj nie ma sensu w oderwaniu od kontekstu dokumentu lub artykułu, w którym się znajduje.

Często <article> zawiera w sobie elementy <section>.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Przeanalizuj strukturę typowej strony z wiadomościami (np. portal informacyjny). Zidentyfikuj, które części strony odpowiadałyby znacznikom: <header>, <nav>, <main>, <article> (dla pojedynczej wiadomości), <aside> (np. panel z najnowszymi wiadomościami lub reklamami), <footer>.

Rozwiązanie (przykładowa analiza):

<header> (główny): Górny pasek z logo portalu, głównym menu kategorii, polem wyszukiwania, przyciskiem logowania.
<nav>: Główne menu kategorii (często wewnątrz głównego <header>).
<main>: Cała środkowa część strony zawierająca listę wiadomości lub treść pojedynczej wiadomości.
<article>: Blok reprezentujący pojedynczą wiadomość (na liście lub na stronie szczegółów), zawierający tytuł, lead, treść, autora, datę.
<section>: Na stronie głównej mogą to być sekcje tematyczne (np. "Sport", "Polityka", "Technologie"). Wewnątrz artykułu mogą to być podrozdziały.
<aside>: Panel boczny z listą najpopularniejszych artykułów, prognozą pogody, reklamami, linkami do mediów społecznościowych.
<footer> (główny): Dolna część strony z informacjami o prawach autorskich, redakcji, linkami do regulaminu, mapy strony.

Dodatkowe zadania do samodzielnego wykonania:

Stwórz szkielet HTML prostej strony portfolio, używając znaczników semantycznych (header, nav, main, section dla projektów, footer).
Wewnątrz sekcji projektu użyj <figure> i <figcaption> do opisania zrzutu ekranu projektu.
Dodaj znacznik <time> z atrybutem datetime do oznaczenia daty publikacji projektu.

Najczęściej zadawane pytania

Co to są znaczniki semantyczne HTML?

Są to elementy HTML, które opisują znaczenie lub cel zawartej w nich treści, a nie tylko jej wygląd. Przykłady to <header>, <nav>, <article>, <footer>.

Dlaczego używanie semantyki w HTML jest ważne?

Poprawia SEO (wyszukiwarki lepiej rozumieją stronę), zwiększa dostępność (czytniki ekranu łatwiej nawigują), czyni kod bardziej czytelnym i łatwiejszym w utrzymaniu.

Do czego służy znacznik <main>?

Znacznik <main> powinien zawierać główną, unikalną treść danej strony. Na stronie powinien znajdować się tylko jeden element <main>.

Kiedy użyć <article>, a kiedy <section>?

Użyj <article> dla samodzielnej treści, która ma sens w oderwaniu od reszty (np. post na blogu). Użyj <section> do grupowania powiązanych tematycznie treści w ramach większej całości.

Czy znaczniki semantyczne wpływają na wygląd strony?

Domyślnie większość znaczników semantycznych (jak <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) zachowuje się jak zwykłe bloki <div>. Ich wygląd kontroluje się za pomocą CSS.