Cum se împartă semnatic conținutul pe o pagină?

Separarea semantică a conținutului se realizează prin utilizarea etichetelor HTML5 corespunzătoare.

Etichetele semantice principale:

• <header>: Introducere sau grup de elemente de navigare sau introducere. Conține adesea titlul site-ului, navigație, logo.
• <nav>: Bloc de linkuri de navigare.
• <main>: Conținutul principal al documentului. Trebuie să fie unic pe pagină (să nu fie duplicat în footer, header, sidebar).
• <article>: Fragment de conținut autosuficient și independent (articol, postare pe blog, comentariu).
• <section>: Secțiune separată a documentului (capitol, paragraf, bloc de conținut pe pagina principală). Trebuie să aibă un titlu (<h1>-<h6>).
• <aside>: Parte a conținutului, indirect legată de conținutul principal (bara laterală, inserție cu citat, publicitate).
• <footer>: Subsolul secțiunii sau documentului. De obicei conține informații despre autor, drepturi de autor, linkuri către documente conexe.
• <figure>: Conținut independent (imagine, diagramă, tabel), care poate fi mutat din fluxul principal al documentului fără a pierde sensul. Adesea folosit cu <figcaption>.
• <figcaption>: Legenda pentru elementul <figure>.
• <mark>: Evidențiază (marchează) textul care are o semnificație sau interes deosebit în contextul textului înconjurător.
• <time>: Reprezintă un moment sau interval de timp specific.

Utilizarea etichetelor semantice îmbunătățește accesibilitatea, SEO și întreținerea codului. Motoarele de căutare și tehnologiile asistive (cititoare de ecran) înțeleg mai bine structura paginii.