Kako semantički razdvojiti sadržaj na stranici?

Semantičko razdvajanje sadržaja postiže se korišćenjem odgovarajućih HTML5 oznaka.

Glavne semantičke oznake:

• <header>: Uvod ili grupa navigacionih ili uvodnih elemenata. Često sadrži naslov sajta, navigaciju, logo.
• <nav>: Blok navigacionih linkova.
• <main>: Glavni sadržaj dokumenta. Treba da bude jedinstven na stranici (ne duplirati u podnožju, zaglavlju, bočnoj traci).
• <article>: Samostalni, nezavisni fragment sadržaja (članak, blog post, komentar).
• <section>: Odvojeni odeljak dokumenta (poglavlje, paragraf, blok sadržaja na početnoj stranici). Treba da ima naslov (<h1>-<h6>).
• <aside>: Deo sadržaja koji je indirektno povezan sa glavnim sadržajem (bočna traka, citat, reklama).
• <footer>: Podnožje odeljka ili dokumenta. Obično sadrži informacije o autoru, autorska prava, linkove na povezane dokumente.
• <figure>: Samostalni sadržaj (slika, dijagram, tabela), koji se može premestiti iz glavnog toka dokumenta bez gubitka značenja. Često se koristi sa <figcaption>.
• <figcaption>: Potpis za <figure> element.
• <mark>: Ističe (označava) tekst koji ima posebno značenje ili interes u kontekstu okoline.
• <time>: Predstavlja konkretno vreme ili vremenski interval.

Korišćenje semantičkih oznaka poboljšava pristupačnost, SEO i održavanje koda. Pretraživači i pomoćne tehnologije (čitači ekrana) bolje razumeju strukturu stranice.