Quand doit-on utiliser les balises <div> et <span> dans le balisage HTML?

Les balises div et span sont des conteneurs universels utilisés pour regrouper des éléments et appliquer des styles.

• div (division) : Élément de bloc. Crée une nouvelle ligne avant et après son contenu. Utilisé pour regrouper de grandes sections de contenu, telles que les en-têtes, le contenu principal, les pieds de page, les barres latérales. Employé pour créer la mise en page de la page avec CSS.

• span : Élément en ligne. Ne crée pas de nouvelle ligne. Utilisé pour regrouper de petites parties de contenu à l'intérieur d'une ligne, comme des mots ou des phrases individuelles. Utilisé pour appliquer un style à un fragment de texte sans affecter les éléments environnants.

Exemple d'utilisation de div :

<!-- Regroupement de la section d'en-tête du site -->
<div class="header">
  <h1>Logo</h1>
  <nav>
    <ul>
      <li>Lien 1</li>
      <li>Lien 2</li>
    </ul>
  </nav>
</div>

<!-- Regroupement du contenu principal -->
<div class="main-content">
  <article>
    <h2>Titre de l'article</h2>
    <p>Contenu de l'article...</p>
  </article>
</div>

Exemple d'utilisation de span :

<p>Ceci est un texte normal avec <span class="highlight">mot mis en évidence</span>.</p>

<style>
  .highlight {
    color: blue; /* Application du style uniquement au mot "mis en évidence" */
    font-weight: bold;
  }
</style>

Il faut utiliser ces balises avec des classes ou des identifiants sémantiquement appropriés pour une meilleure lisibilité et maintenance du code, ainsi que pour des fins de stylisation et de manipulation du DOM. Il est important d'éviter l'utilisation excessive de div et span là où des balises HTML5 plus sémantiques (comme header, footer, article, nav, section) sont plus appropriées.