Ako semanticky rozdeliť obsah na stránke?

Sémantické oddelenie obsahu sa dosahuje použitím príslušných značiek HTML5.

Hlavné sémantické značky:

• <header>: Úvod alebo skupina navigačných alebo úvodných prvkov. Často obsahuje názov stránky, navigáciu, logo.
• <nav>: Blok navigačných odkazov.
• <main>: Hlavný obsah dokumentu. Musí byť na stránke jedinečný (nesmie sa duplikovať v päte, hlavičke, bočnom paneli).
• <article>: Samostatný, nezávislý fragment obsahu (článok, blogový príspevok, komentár).
• <section>: Samostatná sekcia dokumentu (kapitola, odsek, obsahový blok na hlavnej stránke). Musí mať nadpis (<h1>-<h6>).
• <aside>: Časť obsahu, ktorá je nepriamo spojená s hlavným obsahom (bočný panel, citát, reklama).
• <footer>: Päta sekcie alebo dokumentu. Zvyčajne obsahuje informácie o autorovi, autorské práva, odkazy na súvisiace dokumenty.
• <figure>: Samostatný obsah (obrázok, diagram, tabuľka), ktorý môže byť presunutý z hlavného toku dokumentu bez straty významu. Často sa používa s <figcaption>.
• <figcaption>: Popis k prvku <figure>.
• <mark>: Zvýrazňuje (označuje) text, ktorý má špeciálny význam alebo záujem v kontexte okolitého textu.
• <time>: Reprezentuje konkrétny čas alebo časové obdobie.

Použitie sémantických značiek zlepšuje prístupnosť, SEO a údržbu kódu. Vyhľadávače a asistenčné technológie (čitače obrazovky) lepšie rozumejú štruktúre stránky.