Hogyan osztjuk szempontból tartalmat egy oldalon?

A tartalom szemantikus szétválasztása a megfelelő HTML5-címkék használatával érhető el.

Fő szemantikus címkék:

• <header>: Bevezetés vagy navigációs vagy bevezető elemek csoportja. Gyakran tartalmazza a webhely címét, navigációt, logót.
• <nav>: Navigációs hivatkozások blokkja.
• <main>: A dokumentum fő tartalma. Egyedinek kell lennie az oldalon (nem szabad megismételni a láblécben, fejlécben, oldalsávban).
• <article>: Önálló, független tartalmi rész (cikk, blogbejegyzés, megjegyzés).
• <section>: Elkülönített szakasz a dokumentumban (fejezet, bekezdés, tartalom blokk a főoldalon). Címet kell viselnie (<h1>-<h6>).
• <aside>: A fő tartalomhoz közvetetten kapcsolódó tartalom része (oldalsáv, idézet, reklám).
• <footer>: A szakasz vagy dokumentum lábléce. Általában információkat tartalmaz a szerzőről, szerzői jogokról, kapcsolódó dokumentumokra mutató hivatkozásokat.
• <figure>: Önálló tartalom (kép, diagram, táblázat), amely átmozgatható a dokumentum fő folyamától anélkül, hogy elveszítené jelentését. Gyakran <figcaption>-nal együtt használják.
• <figcaption>: Felirat a <figure> elemhez.
• <mark>: Kiemeli (megjelöli) a szöveget, amely különleges jelentőséggel vagy érdeklődéssel bír a környező szövegkörnyezetben.
• <time>: Egy adott időpontot vagy időintervallumot jelöl.

A szemantikus címkék használata javítja az akadálymentességet, a SEO-t és a kód karbantarthatóságát. A keresőmotorok és a segítő technológiák (képernyőolvasók) jobban értik a oldal szerkezetét.