Jak semanticky rozdělit obsah na stránce?

Sémantické oddělení obsahu je dosaženo použitím příslušných značek HTML5.

Hlavní sémantické značky:

• <header>: Úvod nebo skupina navigačních nebo úvodních prvků. Často obsahuje název webu, navigaci, logo.
• <nav>: Blok navigačních odkazů.
• <main>: Hlavní obsah dokumentu. Musí být na stránce jedinečný (nesmí se duplikovat v zápatí, hlavičce, postranním panelu).
• <article>: Samostatný, nezávislý fragment obsahu (článek, příspěvek na blogu, komentář).
• <section>: Samostatná sekce dokumentu (kapitola, odstavec, obsahový blok na hlavní stránce). Musí mít nadpis (<h1>-<h6>).
• <aside>: Část obsahu, která je nepřímo spojena s hlavním obsahem (postranní panel, citát, reklama).
• <footer>: Patička sekce nebo dokumentu. Obvykle obsahuje informace o autorovi, autorská práva, odkazy na související dokumenty.
• <figure>: Samostatný obsah (obrázek, diagram, tabulka), který může být přesunut z hlavního proudu dokumentu bez ztráty významu. Často se používá s <figcaption>.
• <figcaption>: Popisek k prvku <figure>.
• <mark>: Zvýrazňuje (značí) text, který má zvláštní význam nebo zájem v kontextu okolního textu.
• <time>: Reprezentuje konkrétní čas nebo časové období.

Použití sémantických značek zlepšuje přístupnost, SEO a udržovatelnost kódu. Vyhledávače a asistivní technologie (čtečky obrazovky) lépe chápou strukturu stránky.