Come dividere semanticamente il contenuto di una pagina?

La separazione semantica del contenuto si ottiene utilizzando i tag HTML5 appropriati.

Principali tag semantici:

• <header>: Introduzione o gruppo di elementi di navigazione o introduzione. Spesso contiene il titolo del sito, navigazione, logo.
• <nav>: Blocco di link di navigazione.
• <main>: Contenuto principale del documento. Deve essere unico nella pagina (non duplicato nel piè di pagina, intestazione, barra laterale).
• <article>: Frammento di contenuto autosufficiente e indipendente (articolo, post sul blog, commento).
• <section>: Sezione separata del documento (capitolo, paragrafo, blocco di contenuto sulla pagina principale). Deve avere un'intestazione (<h1>-<h6>).
• <aside>: Parte del contenuto indirettamente collegata al contenuto principale (barra laterale, inserto con citazione, pubblicità).
• <footer>: Piè di pagina della sezione o del documento. Di solito contiene informazioni sull'autore, diritti d'autore, link a documenti correlati.
• <figure>: Contenuto autonomo (immagine, diagramma, tabella) che può essere spostato fuori dal flusso principale del documento senza perdere il suo significato. Spesso usato con <figcaption>.
• <figcaption>: Legenda per l'elemento <figure>.
• <mark>: Evidenzia (marca) il testo che ha un significato o interesse particolare nel contesto del testo circostante.
• <time>: Rappresenta un momento o un intervallo di tempo specifico.

L'uso di tag semantici migliora l'accessibilità, SEO e la manutenibilità del codice. I motori di ricerca e le tecnologie assistive (lettori di schermo) comprendono meglio la struttura della pagina.