Tag HTML <span>

Le tag <span>, bien que le tag <div>, est un conteneur vide universel, cependant, contrairement à un élément <div> de bloc, l'élément de ligne <span> spécifie des lignes, des caractères ou d'autres éléments de chaîne individuels pour leur apparition ultérieure à l'aide de styles CSS ou pour les manipuler à l'aide de scripts. Le tag <span> peut être utilisé s’il est nécessaire de:

  • sélectionner une partie des couleurs du texte, définir un arrière-plan ou une image d'arrière-plan
  • changer la police de quelques mots et phrases.
  • appliquer des scripts à des sections spécifiques du texte, par exemple, mettre en évidence la syntaxe du code, etc.

Pour éviter de définir le style à l'intérieur du tag à chaque fois, vous pouvez sélectionner le style dans le tableau de style externe et utiliser les attributs class ou id avec le nom du sélecteur pour identifier le tag.

Le tag <span> n’a aucun effet sur la conception visuelle des éléments et n’a aucune signification sémantique.

Syntaxe

Le tag <span> est apparié; son contenu est écrit entre le tag ouvrant (<span>) et le tag fermant (</span>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <p>Mon chat a les yeux <span style="color:#8ebf42;">verts</span>.</p>
  </body>
</html>

Dans cet exemple, nous définissons le style directement dans le tag.

Résultat

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>   
      .letter { 
      color: red; 
      font-size: 300%; /* Taille de la police en pourcentage */ 
      position: relative; /* Positionnement relatif */ 
      top: 7px; /* Déplacer d'en haut */ 
    </style>
  </head>
  <body>
    <p><span class="letter">О</span>Elle apporta des fleurs jaunes dérangeantes et inquiétantes dans ses mains. Et ces fleurs ressortaient sur son manteau noir.
</p>
    <p>Michael Bulgakov</p>
  </body>
</html>

Résultat

Dans cet exemple, nous avons ajouté un attribut class au tag et défini séparément les styles pour le contenu du tag.

Attributs

Le tag <span> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <span> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <span>:

Coloration du texte dans le tag HTML <span>:

Styles de mise en page du texte pour la tag HTML <span>:

Autres propriétés utiles pour le tag HTML <span>:


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées