W dzisiejszym web developmencie, gdzie semantyka ma kluczowe znaczenie, element <main> wyrósł na podstawowy składnik poprawnego dokumentu HTML. Reprezentuje on główną treść strony — unikalną, najważniejszą część ściśle związaną z tematem dokumentu, zwykle korespondującą z tytułem w <h1>.
W przeciwieństwie do <body>, które obejmuje całą widoczną zawartość (nagłówek, nawigację, stopkę i treść), <main> skupia się wyłącznie na rdzennej zawartości, po którą użytkownik faktycznie odwiedza stronę. Powinien występować tylko raz i obejmować to, co jest esencją danego widoku.
Dlaczego <main> jest tak ważny? Przede wszystkim zwiększa dostępność — czytniki ekranu rozpoznają go jako punkt startowy głównej treści, co ułatwia nawigację. Wspiera również SEO, bo wyszukiwarki lepiej rozumieją strukturę strony, a semantyczny kod usprawnia pracę z CSS i JavaScriptem. Wyraźnie wydzielony obszar głównej treści poprawia doświadczenie użytkownika i ułatwia utrzymanie projektu.
Różnice między <main> a innymi elementami strukturalnymi
Aby w pełni zrozumieć rolę <main>, porównajmy go z innymi landmarkami HTML5:
| Element | Opis | Kiedy używać? | Przykładowa rola ARIA |
|---|---|---|---|
<main> |
główna, unikalna treść strony (tylko jeden na stronę) | artykuł, lista produktów, formularz główny | main |
<header> |
nagłówek strony lub sekcji (logo, menu, tytuł) | górna część layoutu | banner |
<nav> |
blok nawigacyjny (menu, linki) | linki do innych sekcji lub stron | navigation |
<aside> |
treść poboczna (sidebar, reklamy, ciekawostki) | elementy niezwiązane bezpośrednio z główną treścią | complementary lub note |
<footer> |
stopka (kontakty, prawa autorskie) | dolna część layoutu | contentinfo |
<section> |
grupa tematyczna treści (rozdział) | podział głównej treści na sekcje | brak domyślnej |
<article> |
samodzielna jednostka (post blogowy) | zawartość, która może istnieć niezależnie | article |
Ważne ograniczenia <main>:
- tylko jeden na stronę i nie powinien być ukryty (np. przez
display: none), - nie może być potomkiem elementów:
<article>,<aside>,<footer>,<header>,<nav>, - nie oznaczaj nim powtarzalnych części strony: menu, wyszukiwarki, logotypu, bannerów czy stopki.
Te reguły gwarantują, że <main> zawsze wskazuje na jedyną, kluczową treść.
Podstawowy przykład użycia <main>
Poniżej znajdziesz prostą, kompletną strukturę strony z <main> umieszczonym bezpośrednio w <body>:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykładowa strona z main</title>
</head>
<body>
<header>
<h1>Witaj na moim blogu programistycznym</h1>
<nav>
<ul>
<li><a href="#home">Strona główna</a></li>
<li><a href="#posts">Wpisy</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Główny artykuł: Semantyka w HTML</h2>
<p>Tutaj znajdziesz unikalną treść, po którą przyszedłeś. <strong>To jest główna część strony!</strong></p>
<section>
<h3>Podsekcja 1</h3>
<p>Szczegóły tematu...</p>
</section>
<img src="glowny-obraz.jpg" alt="Ilustracja do głównego artykułu">
</article>
</main>
<aside>
<h3>Reklamy i linki poboczne</h3>
<p>Treść niepowiązana z main...</p>
</aside>
<footer>
<p>© 2026 Blog Programistyczny</p>
</footer>
</body>
</html>
W tym przykładzie <main> otacza artykuł — to główna wartość strony. Pozostałe sekcje (nagłówek, nawigacja, sidebar, stopka) pełnią funkcje wspomagające.
Zaawansowane przykłady z CSS i JavaScript
Responsywny layout z CSS Grid i <main>
Użyj <main> w połączeniu z CSS Grid, aby nadać stronie elastyczny, przejrzysty układ:
body {
margin: 0;
font-family: Arial, sans-serif;
display: grid;
grid-template-areas:
"header header"
"nav main"
"aside main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
header {
grid-area: header;
background: #333;
color: white;
padding: 1em;
}
nav {
grid-area: nav;
background: #eee;
padding: 1em;
}
main {
grid-area: main;
padding: 2em;
background: #f9f9f9;
}
aside {
grid-area: aside;
background: #ddd;
padding: 1em;
}
footer {
grid-area: footer;
background: #333;
color: white;
text-align: center;
padding: 1em;
}
/* Responsywność */
@media (max-width: 768px) {
body {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
Efekt? <main> adaptuje się do ekranu, pozostając centralnym elementem układu.
Interaktywność z JavaScript
JavaScript może dynamicznie ładować treść do <main> — przydatne m.in. w SPA (aplikacjach jednostronicowych):
// Funkcja ładująca treść do main
function loadContent(section) {
const main = document.querySelector('main');
main.innerHTML = `
<article>
<h2>${section.title}</h2>
<p>${section.content}</p>
</article>
`;
}
// Przykładowe dane
const sections = {
blog: { title: 'Najnowszy wpis blogowy', content: 'Semantyka HTML zmienia grę...' },
products: { title: 'Nasze produkty', content: 'Lista unikalnych ofert...' }
};
// Obsługa kliknięć w nav
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const href = link.getAttribute('href').substring(1); // usuń #
loadContent(sections[href]);
});
});
To podejście zachowuje semantykę — nawet po dynamicznej zmianie zawartości <main> pozostaje punktem orientacyjnym dla technologii asystujących.
Korzyści dla SEO, dostępności i utrzymania
Najważniejsze atuty stosowania <main> to:
- SEO – wyszukiwarki lepiej rozumieją strukturę strony i priorytetyzują treść w
<main>; - dostępność – landmark
mainułatwia nawigację skrótami w czytnikach ekranu i szybkie przejście do meritum; - utrzymanie i czytelność kodu – prostsza architektura DOM, łatwiejsze style i skrypty, mniej zagnieżdżeń;
- najczęstsze błędy – wielokrotne
<main>, umieszczanie go w<header>lub oznaczanie nim menu i elementów powtarzalnych.
Praktyczne wskazówki
Stosuj poniższe zalecenia, aby utrzymać semantykę i dostępność na wysokim poziomie:
- umieszczaj
<main>jako bezpośredniego potomka<body>, - testuj z narzędziami: WAVE, Lighthouse oraz NVDA (czytnik ekranu),
- integruj z frameworkami — React i Vue wspierają landmarki i dobre praktyki semantyczne.