Expliquant les éléments HTML5 `` vs ``.

<div> est un élément au niveau du bloc<p> <code><div> est un élément de niveau bloc par défaut, ce qui signifie qu'il occupera une seule ligne, qu'il y ait du contenu ou non. Si vous définissez la largeur, la hauteur, les marges intérieures et extérieures et d'autres styles pour cela, il prendra effet normalement.<p> Scénarios d'utilisation courants: </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175226098477717.jpeg" class="lazy" alt="Expliquant les éléments HTML5 `<Erticar>` vs `<ection>`."> «VS»<section> «Éléments.» /><ul> <li> En tant que conteneur pour la mise en page</li> <li> Enveloppez un ensemble d'éléments connexes pour faciliter le contrôle unifié des styles ou des comportements</li> <li> Conception réactive avec grille CSS ou Flexbox</li> </ul> <p> Par exemple, vous écrivez un morceau de code comme celui-ci:</p><pre class='brush:php;toolbar:false;'> &lt;div class = &quot;box&quot;&gt; Ceci est un div &lt;/div&gt; &lt;p&gt; Ceci est un paragraphe de texte &lt;/p&gt;</pre><p> Cette <code>div commencera par une nouvelle ligne et remplira la largeur qu'il peut occuper.

«VS»

«Éléments.» />

---

<span> est un élément en ligne

<span> , au contraire, c'est un élément en ligne. Il n'enveloppera pas la ligne, ni n'occupera automatiquement une ligne entière, sa taille dépend entièrement du contenu lui-même.

Scénarios d'utilisation courants:

• Ajoutez des styles à une partie du texte, comme mettant en évidence un mot
• Faire fonctionner dynamiquement un certain texte, comme changer la couleur ou le contenu avec JavaScript
• Ajouter des styles ou des attributs supplémentaires sans interrompre le flux de texte

Par exemple:

 <p> Il s&#39;agit d&#39;une phrase normale, mais le mot <em> <span style = "Color: Red"> est rouge </span> </em>. </p>

Ici, nous utilisons <span> pour modifier la couleur d'un seul mot dans la phrase sans affecter la structure de l'ensemble du paragraphe.

---

Comment choisir:

ou <span> ?

Autrement dit, cela dépend de la question de savoir si le contenu que vous souhaitez emballer doit être "bloqué individuellement":

• S'il est lié à la mise en page et nécessite un espace indépendant, utilisez
• Si ce n'est qu'une petite partie du texte, utilisez <span>

D'autres points doivent être notés:

• <div> ne peut pas être placé dans la balise <code><p></p> (la spécification HTML ne le permet pas)
• <span> ne convient pas à la disposition structurelle, sinon il peut perturber le flux de texte
• Aujourd'hui, avec des balises plus sémantiques, essayez de donner la priorité à l'utilisation de balises plus significatives (telles que <section></section> , <article></article> , <header></header> , etc.) au lieu d'appliquer aveuglément
  ou <span>

  ---

  Fondamentalement, c'est tout. Bien que les deux balises soient très basiques, l'utilisation du mauvais endroit peut affecter la disposition, l'accessibilité et même le référencement. Ce n'est qu'en comprenant leurs différences comportementales que nous pouvons écrire une structure HTML plus claire et plus raisonnable.