Wykorzystanie <main> w strukturze strony

Tag <main> został wprowadzony w HTML5 jako element semantyczny, który ma na celu wskazanie głównej treści strony. Jego celem jest wyodrębnienie sekcji strony, która zawiera unikalną, istotną treść, od reszty elementów takich jak nagłówki, stopki czy nawigacja. Jest to jeden z tagów, które poprawiają dostępność strony, ułatwiając jej zrozumienie przez wyszukiwarki oraz osoby korzystające z czytników ekranowych.

Element <main> powinien być używany tylko raz na stronie i zawierać najważniejsze treści, które stanowią jej główną wartość. Zwykle znajduje się pomiędzy tagami <header> (nagłówek) a <footer> (stopka). Warto zauważyć, że w <main> nie powinno się umieszczać elementów takich jak nawigacja, nagłówki strony czy stopka. Jest to miejsce, w którym umieszczana jest treść, którą chcemy wyróżnić jako główną.

1. Podstawowe użycie tagu <main>

Tag <main> jest prostym kontenerem, w którym umieszczamy główną treść strony. Może zawierać artykuły, sekcje, tabele, zdjęcia, wideo oraz inne istotne elementy, które stanowią zawartość strony. Jest to miejsce, które widzi użytkownik, gdy odwiedza daną stronę internetową.

Przykład użycia tagu <main>:

<header>
  <h1>Witamy na mojej stronie</h1>
  <nav>
    <ul>
      <li><a href="#o-nas">O nas</a></li>
      <li><a href="#kontakt">Kontakt</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Nasza misja</h2>
    <p>Nasza firma dąży do tworzenia wysokiej jakości produktów, które zmieniają życie naszych klientów na lepsze.</p>
  </section>

  <section>
    <h2>Produkty</h2>
    <p>Zobacz naszą ofertę, która obejmuje szeroką gamę produktów najwyższej jakości.</p>
  </section>
</main>

<footer>
  <p>Prawa autorskie © 2023. Wszystkie prawa zastrzeżone.</p>
</footer>

Efekt działania:

2. Jakie elementy mogą być umieszczane w <main>?

W tagu <main> powinna znajdować się głównie treść, która jest centralnym punktem strony. Możemy umieścić tam:

• Artykuły, wpisy blogowe, posty na stronie informacyjnej
• Sekcje opisujące usługi, produkty lub informacje o firmie
• Tabele, formularze kontaktowe, formularze zapisów na newslettery
• Galerie zdjęć, multimedia, wideo

Jednakże należy pamiętać, że nie należy umieszczać w tagu <main>:

• Nawigacji (<nav>)
• Informacji w stopce (<footer>)
• Reklam czy elementów, które nie stanowią kluczowej treści strony

3. Wykorzystanie <main> w praktyce

Główną zaletą użycia tagu <main> jest to, że pozwala on na wyraźne oddzielenie najważniejszej treści strony od reszty elementów, takich jak nagłówki, stopki i nawigacja. Ułatwia to zarówno użytkownikom, jak i wyszukiwarkom internetowym, zrozumienie struktury strony.

W praktyce oznacza to, że gdy odwiedzający stronę korzystają z narzędzi do nawigacji głosowej lub urządzeń wspomagających, takich jak czytniki ekranu, mogą łatwo przejść do głównej treści strony, omijając inne elementy takie jak nawigację czy stopki. Jest to szczególnie ważne w kontekście dostępności.

Podsumowanie

• Tag <main> oznacza główną treść strony, oddzielając ją od nagłówków, stopek i innych elementów strukturalnych.
• Tag <main> powinien być używany tylko raz na stronie i zawierać elementy takie jak artykuły, sekcje, tabele czy multimedia.
• Poprawne użycie <main> wpływa na SEO i dostępność strony, ułatwiając użytkownikom i wyszukiwarkom poruszanie się po niej.

Warto pamiętać, że <main> nie powinno zawierać elementów takich jak nawigacja, stopki czy reklamy, a jego celem jest wyłącznie wyświetlanie istotnej treści strony.