L’expression « elle n’interrompt pas le flux du texte », utilisée pour la balise <span>, signifie que cette balise ne change pas la disposition naturelle ou la structure du texte autour d’elle. Contrairement à certaines balises dites « bloc » (<div>, <p>, <h1>, etc.), une balise <span> reste « invisible » en termes de mise en forme de base et ne force pas de rupture dans le flux du contenu.
Comprendre le « flux du texte »
Le flux du texte en HTML représente la manière dont le contenu est naturellement rendu par le navigateur, ligne après ligne, en fonction de l’ordre des éléments dans le code. Certains éléments influencent ce flux différemment :
Les éléments « bloc » (block-level) :
- Exemple :
<div>,<p>,<h1>,<section>. - Caractéristique : ces balises occupent tout l’espace horizontal disponible et provoquent un saut de ligne avant et après leur contenu.
- Exemple :
<p>Paragraphe 1.</p><p>Paragraphe 2.</p>
Les éléments « en ligne » (inline) :
- Exemple :
<span>,<strong>,<em>,<a>. - Caractéristique : ces balises ne provoquent pas de saut de ligne et restent à l’intérieur de la ligne en cours.
- Exemple :
<p>Ceci est <span style="color: red;">un mot en rouge</span> dans une phrase.</p><p>Hello <strong>je passe en gras</strong> et aussi<em> en italique</em></p>Pourquoi <span> n’interrompt pas le flux ?
- Fonctionnalité « inline » :
<span>ne force pas le navigateur à créer une nouvelle ligne. Elle s’intègre directement dans le texte existant, sans affecter la structure globale. - Utilisation typique :
<span>est souvent utilisé pour styliser ou manipuler une petite portion de texte sans perturber la mise en page naturelle.
Différence visuelle entre « bloc » et « en ligne »
Avec le SPAN
<p>Texte avant une balise <span style="color: red;">en ligne</span>. Texte après.</p>Avec <span> (en ligne) : le texte reste fluide et « en ligne ».
Après un <div> [sans CSS qui contredit] il y a un retour à la ligne.
<div>Texte avant une balise DIV </div> Texte après.Voici une écriture plus rigoureuse.
<p>Texte avant une balise</p>
<div style="color: red;">bloc</div>
<p>Texte après.</p>Quand utiliser <span> ?
Pour styliser une partie spécifique de texte sans modifier la mise en page générale.
Exemples concrets :
Ajouter de la couleur (dans cet exemple en ligne – pas d’appel de classe)
<span style="color: blue;">texte bleu</span>Ajouter de la couleur (dans cet exemple en ajoutant une classe : il faudra déclarer le style dans le CSS)
<span class="blue">texte bleu</span>Résumé
La balise <span> :
- S’intègre directement dans une ligne sans causer de saut de ligne.
- Ne modifie pas la structure du texte environnant.
- Permet de manipuler ou styliser une partie du texte, tout en conservant la fluidité naturelle du contenu.