Główna treść (<main>)

Lekcja 9.4: Główna treść (<main>)

Strona główna > Rozdział 9: Elementy semantyczne > Główna treść (<main>)

Identyfikacja kluczowej zawartości strony

Element <main> jest jednym z najważniejszych znaczników semantycznych wprowadzonych w HTML5. Jego zadaniem jest oznaczenie głównej, dominującej treści dokumentu HTML. Treść zawarta w <main> powinna być unikalna dla danej strony i nie powinna obejmować elementów powtarzających się na wielu podstronach, takich jak nagłówki, stopki, paski boczne czy główne menu nawigacyjne.

Kluczowe zasady użycia <main>

Tylko jeden na stronie: W danym dokumencie HTML powinien znajdować się co najwyżej jeden element <main>.
Bezpośrednio w <body>: Zazwyczaj <main> jest bezpośrednim dzieckiem elementu <body>.
Nie wewnątrz <article>, <aside>, <footer>, <header>, <nav>: Element <main> nie może być potomkiem tych znaczników semantycznych. To on zazwyczaj zawiera <article> lub <section> jako swoje dzieci.
Unikalna treść: Powinien obejmować treść bezpośrednio związaną z głównym tematem dokumentu lub centralną funkcjonalnością aplikacji.

Korzyści z używania <main>

Dostępność: Czytniki ekranu i inne technologie wspomagające mogą łatwo zidentyfikować główną treść strony, pozwalając użytkownikom szybko do niej przejść, pomijając powtarzalne elementy nawigacyjne czy nagłówki. Jest to tzw. "landmark role".
SEO: Wyszukiwarki mogą lepiej zrozumieć, która część strony zawiera kluczową treść, co może pomóc w indeksowaniu i ocenie strony.
Przejrzystość kodu: Jasno oddziela główną zawartość od elementów peryferyjnych (nagłówek, stopka, nawigacja, panele boczne).

Przykład struktury strony z <main>

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

    <header>
        <h1>Nagłówek Strony</h1>
        <nav>
            <!-- Główna nawigacja -->
        </nav>
    </header>

    <!-- Panel boczny (poza main) -->
    <aside class="sidebar-left">
        <h2>Menu boczne</h2>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </aside>

    <main> <!-- Początek głównej treści -->
        <h2>Główny Tytuł Treści</h2>
        
        <article>
            <h3>Tytuł Artykułu 1</h3>
            <p>Treść pierwszego artykułu...</p>
        </article>
        
        <article>
            <h3>Tytuł Artykułu 2</h3>
            <p>Treść drugiego artykułu...</p>
        </article>
        
        <section>
            <h3>Dodatkowa sekcja treści</h3>
            <p>Informacje w tej sekcji...</p>
        </section>
        
    </main> <!-- Koniec głównej treści -->

    <!-- Inny panel boczny (poza main) -->
    <aside class="sidebar-right">
        <h2>Reklamy</h2>
        <!-- ... -->
    </aside>

    <footer>
        <p>Stopka strony - prawa autorskie, linki itp.</p>
    </footer>

</body>
</html>

W tym przykładzie cała unikalna treść strony, w tym artykuły i sekcje, jest zawarta w elemencie <main>. Nagłówek, stopka i panele boczne (<aside>) znajdują się poza <main>, ponieważ są to elementy powtarzalne lub peryferyjne.

<main> a ukryta treść

Element <main> nie powinien być ukryty za pomocą atrybutu hidden. Główna treść strony powinna być zawsze dostępna.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Weź szkielet strony z poprzedniej lekcji (strona produktu) i upewnij się, że element <article> opisujący produkt znajduje się wewnątrz znacznika <main>. Sprawdź, czy główny <header> i główny <footer> znajdują się poza <main>.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Strona Produktu z <main></title>
    <style>
        body { font-family: sans-serif; }
        header, footer { background-color: #f0f0f0; padding: 10px; margin-bottom: 15px; }
        nav ul { list-style: none; padding: 0; }
        nav li { display: inline; margin-right: 10px; }
        main { border: 1px solid #ccc; padding: 15px; margin: 0 auto; max-width: 900px; /* Dla lepszej prezentacji */ }
        article header h2 { margin-top: 0; }
        article footer { margin-top: 15px; border-top: 1px dashed #ccc; padding-top: 10px; }
        .copyright { text-align: center; font-size: 0.9em; margin-top: 20px; }
    </style>
</head>
<body>

    <header> <!-- Główny nagłówek strony (POZA main) -->
        <img src="logo-sklepu.png" alt="Logo Sklepu" height="40">
        <nav aria-label="Główna nawigacja">
            <ul>
                <li><a href="/">Strona główna</a></li>
                <li><a href="/kategorie">Kategorie</a></li>
                <li><a href="/koszyk">Koszyk</a></li>
            </ul>
        </nav>
    </header>

    <main> <!-- Główna treść strony (TUTAJ jest article) -->
        <article> <!-- Opis produktu -->
            <header>
                <h2>Niesamowity Produkt XYZ</h2>
                <p>Numer katalogowy: XYZ-123</p>
            </header>
            
            <img src="produkt.jpg" alt="Zdjęcie produktu XYZ" width="300">
            <p>Szczegółowy opis produktu XYZ. Jest to najlepszy produkt na rynku...</p>
            <p>Cena: 99.99 PLN</p>
            
            <footer>
                <button type="button">Dodaj do koszyka</button>
                <a href="/produkty-podobne">Zobacz podobne produkty</a>
            </footer>
        </article>
        
        <!-- Ewentualnie inne sekcje związane z główną treścią, np. opinie -->
        <section>
            <h3>Opinie klientów</h3>
            <!-- ... -->
        </section>
        
    </main>

    <footer> <!-- Główna stopka strony (POZA main) -->
        <p class="copyright">© 2025 Mój Sklep Internetowy. Wszelkie prawa zastrzeżone.</p>
    </footer>

</body>
</html>

Jak widać, <header> i <footer> strony są poza <main>, a <article> z opisem produktu jest wewnątrz <main>, co jest poprawną strukturą semantyczną.

Dodatkowe zadania do samodzielnego wykonania:

Dodaj panel boczny (<aside>) do strony produktu (np. z listą kategorii) i umieść go poza elementem <main>.
Przeanalizuj kod źródłowy strony internetowej, którą często odwiedzasz, i spróbuj zidentyfikować element <main> (lub jego brak). Zastanów się, czy został użyty poprawnie.

Najczęściej zadawane pytania

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

Znacznik <main> służy do oznaczenia głównej, unikalnej treści dokumentu HTML, odróżniając ją od elementów powtarzalnych jak nagłówek, stopka czy nawigacja.

Ile elementów <main> może być na stronie?

Na stronie powinien znajdować się co najwyżej jeden element <main>. Nie może on być też zagnieżdżony wewnątrz <article>, <aside>, <footer>, <header> ani <nav>.

Jakie korzyści daje używanie <main>?

Poprawia dostępność, umożliwiając użytkownikom czytników ekranu szybkie przejście do kluczowej treści. Pomaga też wyszukiwarkom w identyfikacji głównej zawartości strony (SEO).

Co powinno znaleźć się wewnątrz <main>?

Treść bezpośrednio związana z głównym tematem strony lub centralną funkcjonalnością aplikacji, np. artykuły, opisy produktów, wyniki wyszukiwania, formularze stanowiące główny cel strony.

Czy <main> wpływa na wygląd strony?

Domyślnie <main> jest elementem blokowym, podobnie jak <div>. Jego wygląd i pozycjonowanie kontroluje się za pomocą CSS. Jego główna rola jest semantyczna.