Quando si devono usare i tag <div> e <span> nel…

I tag div e span sono contenitori universali usati per raggruppare elementi e applicare stili.

div (divisione): Elemento di blocco. Crea una nuova riga prima e dopo il suo contenuto. Viene usato per raggruppare grandi sezioni di contenuto, come intestazioni, contenuto principale, piè di pagina, barre laterali. Si utilizza per creare il layout della pagina con CSS.
span: Elemento inline. Non crea una nuova riga. Viene usato per raggruppare piccole parti di contenuto all’interno di una riga, come parole o frasi singole. Si utilizza per applicare uno stile a un frammento di testo senza influenzare gli elementi circostanti.

Esempio di utilizzo di div:

<!-- Raggruppamento della sezione intestazione del sito -->
<div class="header">
  <h1>Logo</h1>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
    </ul>
  </nav>
</div>

<!-- Raggruppamento del contenuto principale -->
<div class="main-content">
  <article>
    <h2>Titolo dell’articolo</h2>
    <p>Contenuto dell’articolo...</p>
  </article>
</div>

Esempio di utilizzo di span:

<p>Questo è un testo normale con <span class="highlight">parola evidenziata</span>.</p>

<style>
  .highlight {
    color: blue; /* Applicazione dello stile solo alla parola "evidenziata" */
    font-weight: bold;
  }
</style>

Questi tag devono essere usati con classi o identificatori semanticamente appropriati per migliorare la leggibilità e la manutenzione del codice, nonché per scopi di stilizzazione e manipolazione del DOM. È importante evitare l’uso eccessivo di div e span dove sono più appropriate tag HTML5 più semantici (come header, footer, article, nav, section).

Quando si devono usare i tag <div> e <span> nel markup HTML?