Elementi come <header></header>, <footer></footer>, <section><section></section></section>/, <nav></nav> e <article></article> ora funzionano di più come elementi <div></div> tradizionali con HTML5. Questi elementi principali agiscono come macrostruttura semantica dell'HTML per aiutare a mantenere i tag HTML più comuni nell'ordine e nella posizione corretta.
<article></article> e <section></section>
Entrambi questi elementi possono essere spesso utilizzati per gestire le stesse sezioni ed essere utilizzati in modo intercambiabile. Tuttavia, è importante tenere presente che il tag <article></article> è utile perché è riutilizzabile ed è anche considerato distribuibile in modo indipendente. Un tag <section></section>, invece, viene in genere utilizzato per raggruppare più di un elemento o sezione di contenuto.
La sezione dell'intestazione di un sito web si trova in genere nella parte superiore del sito. L'intestazione di un sito web spesso include informazioni sui meta tag, parole chiave e persino file CSS o fogli di stile importati. L'intestazione può anche fornire le basi necessarie per il layout o il design del tuo sito web.
Il tag <footer></footer> funziona in modo simile al tag <header></header>, tranne per il fatto che il piè di pagina si trova in genere nella parte inferiore di qualsiasi pagina web. Il piè di pagina di un sito web include tipicamente informazioni di contatto, una mappa del sito e link aggiuntivi, come quelli ai siti di social media, che aiutano a collegare il sito web e a incrementare la SEO.
<main></main>
Quando scegli di utilizzare il tag dell'elemento <main></main>, indichi il corpo principale del testo o del contenuto del layout di un sito web. Usa il tag <main></main> solo per ospitare i paragrafi interni, il testo scritto, le immagini e il contenuto interno del tuo sito web. Il tag <main></main> apparirà sempre dopo che il tag <header></header> è stato introdotto e prima del tag <footer></footer> di qualsiasi pagina.
<nav></nav>i
Lo sviluppo di un sito web di successo richiede una sezione di navigazione accessibile e aggiornata. Quando crei un sito web di qualsiasi tipo, devi aggiungere link di navigazione per aiutare gli utenti a navigare correttamente nel tuo sito. L'uso del tag <nav></nav> consente di organizzare la particolare sezione di un sito designata per i collegamenti di navigazione. I menu di navigazione, le tabelle e gli indici sono tutti possibili con il tag <nav></nav> semantico HTML5.
Se stai producendo contenuti e vuoi inserire immagini con testo, puoi utilizzare i tag <figure></figure> e <figcaption></figcaption>. Il tag <figure></figure> avvolge le immagini attorno al contenuto testuale senza alcuno sforzo aggiuntivo. Se vuoi aggiungere una didascalia all'immagine che stai implementando sulla tua pagina, puoi utilizzare il tag <figcaption></figcaption>. Di seguito è riportato un esempio di come utilizzare i tag <figure></figure> e <figcaption></figcaption>:
<figure><img src="http://www.yourimage.com"><figcaption>Questa è la didascalia della mia immagine!</figcaption></figure>
<aside></aside>
L'uso di un elemento <aside></aside> incorporerà un testo che non appartiene alle sezioni principali del tuo sito web ma dovrebbe comunque apparire in un'area o sezione prestabilita.
<time></time>
Il tag <time></time> è utile se desideri aggiungere una data automatica a una sezione o area del tuo sito web.
Un elenco completo di tutti i tag HTML è disponibile direttamente sul sito ufficiale di W3 Schools.
