HTML Semantico e Struttura della Pagina

Finora hai imparato a costruire elementi su una pagina web. Ora miglioriamo la struttura e la comprensione dei tuoi contenuti.

Che cos'è l'HTML semantico?

HTML semantico significa utilizzare elementi che descrivono chiaramente lo scopo dei tuoi contenuti. Invece di usare contenitori generici come <div>, si usano tag significativi come:

• <header>;
• <nav>;
• <section>;
• <article>;
• <footer>.

Perché è importante

• Aiuta browser e sviluppatori a comprendere la struttura della pagina;
• Migliora l'accessibilità (i lettori di schermo si basano su questo);
• Aiuta i motori di ricerca a interpretare meglio i tuoi contenuti.

Elementi semantici comuni

<header>

Rappresenta la parte superiore di una pagina o sezione (logo, titolo, navigazione).

<header>
  <h1>My Website</h1>
</header>

<nav>

Definisce i collegamenti di navigazione.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<section>

Raggruppa contenuti correlati.

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

<article>

Rappresenta un contenuto autonomo (ad esempio, un post di blog).

<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>

<footer>

Definisce la parte inferiore di una pagina.

<footer>
  <p>&copy; My Website</p>
</footer>

Come appare insieme