Cos'è la semantica nel contesto dello sviluppo web…

La semantica nello sviluppo web consiste nell'uso dei tag HTML in conformità con il loro scopo semantico, e non solo per lo stile. Aiuta a descrivere la struttura e il significato del contenuto, rendendo la pagina web più comprensibile per browser, motori di ricerca, lettori di schermo e altri parser.

Vantaggi principali del markup semantico:

Accessibilità: Migliora l'interazione con il sito per le persone con disabilità che usano lettori di schermo.
SEO: Aiuta i motori di ricerca a comprendere meglio la struttura e il contenuto della pagina, influenzando positivamente il posizionamento.
Manutenibilità: Rende il codice più leggibile e comprensibile per altri sviluppatori.
Compatibilità: Garantisce la corretta visualizzazione del contenuto su diversi dispositivi e browser.

Esempi di tag semantici in HTML5:

<header>: Rappresenta l'introduzione o la navigazione per l'intero documento o una sezione specifica.
<nav>: Rappresenta un gruppo di link di navigazione.
<main>: Rappresenta il contenuto principale del documento.
<article>: Rappresenta un frammento di contenuto completo e autonomo, che può essere distribuito indipendentemente (ad esempio, un post del blog, una notizia).
<section>: Rappresenta una sezione autonoma del contenuto nel documento.
<aside>: Rappresenta contenuto che è indirettamente correlato al contenuto principale della pagina (ad esempio, una barra laterale).
<footer>: Rappresenta il piè di pagina per l'intero documento o una sezione specifica.
<figure> e <figcaption>: Rappresentano un elemento multimediale (immagine, diagramma, ecc.) e la sua descrizione.
<time>: Rappresenta data e ora.

Confronto tra approccio semantico e non:

Approccio non semantico	Approccio semantico
Uso di `<div>` e `<span>` per tutto	Uso di tag specifici (`<header>`, `<nav>`, `<article>`)
Descrizione della struttura tramite classi (`class="header"`)	Uso di tag che descrivono intrinsecamente la struttura
Dipendenza dal CSS per comprendere la struttura	La struttura è comprensibile dal codice HTML

Esempio di markup non semantico:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Title</h2>
    <p>Content...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Esempio di markup semantico:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Title</h2>
    <p>Content...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

La marcatura semantica non sostituisce il CSS per lo stile, ma rende il documento HTML più informativo e utile per diversi consumatori di contenuti.

Cos'è la semantica nel contesto dello sviluppo web?