Jak semantycznie dzielić treść na stronie?

Semantyczne oddzielenie treści osiąga się poprzez użycie odpowiednich tagów HTML5.

Główne tagi semantyczne:

• <header>: Wprowadzenie lub grupa elementów nawigacyjnych lub wstępnych. Często zawiera tytuł strony, nawigację, logo.
• <nav>: Blok odnośników nawigacyjnych.
• <main>: Główna zawartość dokumentu. Powinna być unikalna na stronie (nie powielać się w stopce, nagłówku, pasku bocznym).
• <article>: Samodzielny, niezależny fragment treści (artykuł, wpis na blogu, komentarz).
• <section>: Oddzielna sekcja dokumentu (rozdział, akapit, blok treści na stronie głównej). Powinna mieć tytuł (<h1>-<h6>).
• <aside>: Część treści, pośrednio związana z główną zawartością (pasek boczny, wstawka z cytatem, reklama).
• <footer>: Stopka sekcji lub dokumentu. Zazwyczaj zawiera informacje o autorze, prawa autorskie, odnośniki do powiązanych dokumentów.
• <figure>: Samodzielna zawartość (obraz, diagram, tabela), którą można przenieść z głównego strumienia dokumentu bez utraty sensu. Często używana z <figcaption>.
• <figcaption>: Podpis do elementu <figure>.
• <mark>: Wyróżnia (znak) tekst, który ma szczególne znaczenie lub interes w kontekście otaczającego tekstu.
• <time>: Reprezentuje konkretny czas lub przedział czasowy.

Użycie semantycznych tagów poprawia dostępność, SEO i utrzymanie kodu. Wyszukiwarki i technologie wspomagające (czytniki ekranowe) lepiej rozumieją strukturę strony.