Gli elementi semantici di HTML5 forniscono un modo per definire chiaramente il tipo di contenuto che un certo blocco o porzione del tuo sito dovrebbe rappresentare. Questo non solo aiuta nella formattazione e nello stile, ma è fondamentale per l'accessibilità e il SEO (Search Engine Optimization).
Passo 1: Capire il Concetto di Semantica Gli elementi semantici sostituiscono l'uso eccessivo dei generici <div> e <span> dando un significato specifico al contenuto. Ad esempio, anziché usare un <div> per un'intestazione, si potrebbe usare <header>.
Passo 2: Conoscere gli Elementi Semantici Comuni
<header>: Rappresenta un gruppo di contenuti introduttivi o di navigazione. Può contenere alcuni elementi di intestazione, un logo o una sezione di navigazione.
<header>
<h1>Titolo del Sito</h1>
<nav>
<!-- Link di navigazione -->
</nav>
</header>
<nav>: Indica una sezione con link di navigazione.
<nav>
<a href="/">Home</a> |
<a href="/about">About</a> |
<a href="/contact">Contact</a>
</nav>
<article>: Rappresenta un contenuto indipendente che ha senso da solo, come un post di blog o una notizia.
<article>
<h2>Titolo dell'articolo</h2>
<p>Contenuto dell'articolo...</p>
</article>
<section>: Rappresenta una sezione autonoma di un documento, come un tab o una scheda.
<section>
<h2>Titolo della sezione</h2>
<p>Contenuto della sezione...</p>
</section>
<footer>: Rappresenta il piè di pagina di un documento o di una sezione.
<footer>
<p>Diritti d'autore © 2023</p>
</footer>
<aside>: Usato per contenuti tangenzialmente correlati al contenuto attorno al<aside>e può essere considerato separato da quel contenuto.
<aside>
<h3>Notizie correlate</h3>
<!-- Lista di notizie -->
</aside>
<figure>e<figcaption>: Usati per rappresentare contenuti come immagini, diagrammi, foto, codice, ecc. con una didascalia.
<figure>
<img src="image.jpg" alt="Descrizione dell'immagine">
<figcaption>Una breve didascalia dell'immagine.</figcaption>
</figure>
Passo 3: Integrare gli Elementi Semantici nel tuo Sito Quando costruisci o rifai il tuo sito web, considera dove questi elementi semantici avrebbero senso. Ad esempio, la tua barra di navigazione dovrebbe essere racchiusa in un elemento <nav>, mentre i post del blog dovrebbero essere racchiusi in elementi <article>.
Passo 4: Controlla la Semantica con Strumenti Online Esistono strumenti online, come il validatore HTML del W3C, che ti aiutano a verificare se stai usando correttamente gli elementi semantici.
Guarda una struttura semantica di base su W3Schools.
Implementando una semantica chiara e coerente, aiuterai i motori di ricerca a comprendere meglio il tuo sito e fornirai una migliore accessibilità a chi usa lettori di schermo o altri strumenti di assistenza.