Znacznik <main> w HTML to semantyczny element, który służy do oznaczania głównej, unikatowej treści danej strony internetowej. Jego prawidłowe użycie poprawia zarówno strukturę dokumentu, jak i dostępność dla użytkowników oraz wyszukiwarek internetowych.
Co to jest <main>?
- Definicja –
<main>reprezentuje główną sekcję zawartości dokumentu<body>, która jest bezpośrednio związana z głównym tematem strony lub jej zasadniczą funkcjonalnością; - Do
<main>zaleca się umieszczać zawartość unikatową dla danego dokumentu – czyli taką, której nie znajdziemy na innych podstronach tej samej witryny. Powtarzalne elementy jak nawigacja, stopka, logo czy formularz wyszukiwania nie powinny się w tym elemencie znajdować.
Kluczowe zasady użycia <main>
- Maksymalnie jeden
mainna dokument – W każdym dokumencie HTML może wystąpić tylko jeden element<main>; - Nie w sekcjach pomocniczych – Nie wolno umieszczać
<main>jako potomka elementów takich jak<header>,<footer>,<nav>,<aside>czy<article>; - Atrybuty globalne –
<main>obsługuje standardowe atrybuty globalne HTML, takie jakid,class,style.
Struktura a dostępność
Dodanie <main> do kodu strony znacznie ułatwia korzystanie z niej osobom korzystającym z technologii asystujących, np. czytników ekranu. Pozwala łatwo przeskoczyć do głównej treści, omijając menu i inne powtarzalne sekcje. To również podstawa lepszej semantyki HTML, co doceniają wyszukiwarki.
Przykłady zastosowań
Najprostszym i najczęściej spotykanym użyciem <main> jest objęcie tym tagiem głównej treści strony:
<body>
<header>
<h1>Moja strona</h1>
<nav>...</nav>
</header>
<main>
<h2>Witamy na głównej stronie!</h2>
<p>To jest zasadnicza treść tej podstrony.</p>
<article>
<h3>Najnowsze artykuły</h3>
<p>Opis artykułu.</p>
</article>
<section>
<h3>O nas</h3>
<p>Informacje o firmie.</p>
</section>
</main>
<footer>
<p>Prawa autorskie © 2025</p>
</footer>
</body>
Przykład – niepoprawne użycie:
<article>
<main> <!-- To jest błąd: nie można osadzać <main> w <article> -->
<h2>Artykuł</h2>
<p>Treść artykułu.</p>
</main>
</article>
W powyższym przykładzie <main> znajduje się wewnątrz <article>, co jest niezgodne ze specyfikacją.
Kiedy nie używać <main>
- W powtarzalnych sekcjach (paski boczne –
<aside>, nawigacja –<nav>, nagłówek –<header>, stopka –<footer>), - Na stronach, które nie posiadają wyraźnie wyróżnionej sekcji z główną treścią,
- Jako rodzica dla treści stanowiących jedynie dodatek lub pomocniczą informację wobec głównego tematu strony.
Typowe błędy
- Użycie wielu tagów
<main>w jednym dokumencie. - Umieszczanie
<main>wewnątrz sekcji pomocniczych lub artykułów. - Objęcie
<main>elementów stałych strony, jak menu, logo, stopka.
Podsumowanie korzyści
- Lepsza semantyka – Jasno określona główna treść strony;
- Poprawiona dostępność – Ułatwienia dla użytkowników korzystających z czytników ekranu;
- Wsparcie dla SEO – Silniejszy sygnał dla wyszukiwarek co jest kluczową treścią strony.
Stosowanie tagu <main> to jeden z najważniejszych fundamentów współczesnego, semantycznego HTML. Dzięki niemu strony są bardziej uporządkowane, przystępne i nowoczesne.
