Kaip semantiškai skirstyti turinį puslapyje?

Semaninis turinio atskyrimas pasiekiamas naudojant tinkamas HTML5 žymes.

Pagrindinės semantiniai žymės:

• <header>: Įvadas arba navigacijos ar įvado elementų grupė. Dažnai apima svetainės pavadinimą, navigaciją, logotipą.
• <nav>: Navigacijos nuorodų blokas.
• <main>: Dokumento pagrindinis turinys. Turi būti unikalus puslapyje (ne dubliuotis poraštėje, antraštėje, šoniniame skydelyje).
• <article>: Savarankiškas, nepriklausomas turinio fragmentas (straipsnis, tinklaraščio įrašas, komentaras).
• <section>: Atskiras dokumento skyrius (skyrius, pastraipa, turinio blokas pagrindiniame puslapyje). Turi turėti antraštę (<h1>-<h6>).
• <aside>: Turinio dalis, tiesiogiai nesusijusi su pagrindiniu turiniu (šoninis skydelis, citata, reklama).
• <footer>: Skyrių arba dokumento poraštė. Paprastai apima informaciją apie autorių, autorių teises, nuorodas į susijusius dokumentus.
• <figure>: Nepriklausomas turinys (vaizdas, diagrama, lentelė), kuris gali būti perkeliamas iš pagrindinio dokumento srauto be prarasto prasmės. Dažnai naudojamas su <figcaption>.
• <figcaption>: Pavadinimas <figure> elementui.
• <mark>: Pabrėžia (žymi) tekstą, kuris turi ypatingą reikšmę arba įdomumą kontekste aplink tekstą.
• <time>: Atstovauja konkretų laiką arba laiko intervalą.

Semaninių žymių naudojimas gerina prieinamumą, SEO ir kodo priežiūrą. Paieškos varikliai ir pagalbinės technologijos (ekrano skaitytuvai) geriau supranta puslapio struktūrą.