Podział strony na sekcje

Znaczenie semantycznych sekcji

Użycie semantycznych sekcji poprawia strukturę strony, ułatwia nawigację i poprawia SEO oraz dostępność.

Podstawowe znaczniki sekcji

• <header> – nagłówek strony lub sekcji, np. logo i menu.
• <nav> – nawigacja, linki do innych części strony.
• <main> – główna zawartość strony.
• <section> – tematyczne grupowanie treści (rozdziały, bloki).
• <article> – samodzielne elementy treści, np. wpisy blogowe.
• <aside> – treść poboczna, reklamy, linki powiązane.
• <footer> – stopka strony i sekcji, informacje kontaktowe.

Hierarchia nagłówków

Znaczniki <h1> do <h6> określają poziomy ważności tytułów i nagłówków, pomagając zorganizować treść w sekcjach.

Przykładowa struktura strony

<header>
  <h1>Moja strona</h1>
  <nav>Menu nawigacyjne</nav>
</header>

<main>
  <section>
    <article>
      <h2>Pierwszy artykuł</h2>
      <p>Treść artykułu.</p>
    </article>
  </section>

  <aside>
    <p>Treść poboczna</p>
  </aside>
</main>

<footer>Stopka i informacje kontaktowe</footer>

Ćwiczenia praktyczne

<header> – nagłówek strony
<nav> – menu nawigacyjne
<main> – główna treść
<section> – grupa tematyczna
<article> – samodzielny wpis
<aside> – treści poboczne
<footer> – stopka

Quiz

Podsumowanie

Stosowanie semantycznych sekcji i nagłówków sprawia, że strona jest czytelna, logiczna i lepiej interpretowana przez przeglądarki oraz wyszukiwarki.

Checklista