3.1 Tag <main>
HTML5 ha introdotto tanti nuovi elementi semantici che aiutano gli sviluppatori a creare pagine web più strutturate e comprensibili. Tra questi, i tag <main> e <aside> occupano un posto speciale, usati rispettivamente per creare contenitori per il contenuto principale e aggiuntivo.
Il tag <main> indica il contenuto principale del documento. Viene usato per posizionare il contenuto unico e chiave per la pagina. Il contenuto all'interno del tag <main> deve essere unico per ogni pagina e non contenere elementi che si ripetono su tutte le pagine, come loghi, barre laterali, link di navigazione o footer.
Sintassi:
<main>
<!-- Contenuto principale della pagina -->
</main>
Esempio di utilizzo:
<body>
<header>
<h1>Intestazione del sito</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Chi siamo</a></li>
<li><a href="#contact">Contatti</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Titolo dell'articolo</h2>
<p>Questo è il contenuto principale dell'articolo.</p>
</article>
</main>
<footer>
<p>© 2024 Sito Esempio</p>
</footer>
</body>
Caratteristiche principali:
- Contenuto: il tag
<main>deve contenere il contenuto principale della pagina, unico per quella pagina - Posizionamento: dovrà esserci solo un tag
<main>nella pagina - Accessibilità: il tag
<main>migliora l'accessibilità della pagina, aiutando le tecnologie assistive (come i lettori di schermo) a trovare più rapidamente il contenuto principale
Applicazioni:
- Contenuto principale della pagina
- Contenuto unico, relativo alla pagina attuale
Vantaggi:
- Markup semantico: aiuta i motori di ricerca e le tecnologie assistive a capire cosa è il contenuto principale della pagina
- Miglioramento della struttura della pagina: separa chiaramente il contenuto principale da altre parti della pagina, come intestazioni, barre laterali e footer
Caratteristiche:
- Deve contenere contenuti unici per la pagina
- Non deve includere elementi che si ripetono su altre pagine (ad esempio, barre di navigazione, barre laterali, footer)
3.2 Tag <aside>
Il tag <aside> viene usato per indicare contenuti aggiuntivi che sono correlati al contenuto principale, ma non fanno parte del flusso principale del documento. Viene di solito utilizzato per barre laterali che contengono pubblicità, link ad articoli correlati, biografie degli autori e altri elementi di supporto.
Sintassi:
<aside>
<!-- Contenuto supplementare -->
</aside>
Esempio di utilizzo:
<main>
<article>
<h2>Titolo dell'articolo</h2>
<p>Questo è il contenuto principale dell'articolo.</p>
</article>
<aside>
<h3>Articoli Correlati</h3>
<ul>
<li><a href="#related1">Articolo correlato 1</a></li>
<li><a href="#related2">Articolo correlato 2</a></li>
</ul>
<h3>Chi è l'autore</h3>
<p>Breve biografia dell'autore.</p>
</aside>
</main>
Caratteristiche principali:
- Contenuto: il tag
<aside>contiene informazioni aggiuntive correlate al contenuto principale, che non sono parte del flusso principale del documento. - Posizionamento: può essere posizionato dentro o fuori il tag
<main>, a seconda del contesto. - Applicazioni: usato per barre laterali, blocchi pubblicitari, link ad articoli correlati e altre informazioni di supporto.
Applicazioni:
- Barre laterali con informazioni aggiuntive
- Blocchi pubblicitari
- Link a risorse correlate
- Materiali aggiuntivi relativi al contenuto principale
Vantaggi:
- Markup semantico: aiuta i motori di ricerca e le tecnologie assistive a capire che si tratta di contenuti di supporto rispetto al contenuto principale
- Miglioramento della struttura della pagina: separa chiaramente il contenuto aggiuntivo dal contenuto principale, rendendo la pagina più organizzata e facile da percepire
Caratteristiche:
- Contiene contenuti che sono correlati al principale, ma non ne fanno parte
- Può essere usato per barre laterali, blocchi pubblicitari, abbonamenti e altri materiali aggiuntivi
GO TO FULL VERSION