Accueil    HTML    Balise SPAN
 



balise span  Balise SPAN

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <span> est une balise structurante au même titre que la balise <div>. Elle affiche son contenu sans appliquer de modification (affichage "inline") contrairement à la balise <div> qui occupe toute la largeur disponible et effectue un retour à la ligne avant et après son contenu (affichage "block").

Généralement la balise <div> est utilisée pour contenir et imbriquer d'autres éléments html alors que la balise <span> s'emploie fréquemment au sein de phrases pour encadrer et mettre en valeurs des lettres, mots ou groupes de mots. Ceci s'explique principalement de par le fait que son utilisation n'entraine aucun effet visuel.

La différence d'affichage entre ces deux balises se situe sur le style CSS appliqué implicitement : "display : block" pour <div> et "display : inline" pour <span> qu'il est toutefois possible de modifier.



Exemple d'utilisation de la balise span :





Rendu standard de la balise span :

Contenu précédent la balise span.
<span style="color:red;">Texte inclus dans la balise span</span>
Contenu suivant la balise span.


Exemple d'application du style display avec la balise span :

Contenu précédent la balise span.
<span style="color:red; display:block;">Texte inclus dans la balise span</span>
Contenu suivant la balise span.


Utilisation de l'élément span avec du style CSS :


<span style="text-indent:25px; color:green; font-family:tahoma;">
Texte contenu dans la balise
<span style="font-weight:bold; color:blue">span</span>
</span>


<span style="display:block; text-align:center; border:solid 1px black; padding:10px;
          background-color:lightsteelblue; font-weight:bold; letter-spacing:4px; font-size:16px;'>
SPAN
</span>



Rendu standard de la balise span :

Contenu précédent la balise span. Texte inclus dans la balise span Contenu suivant la balise span.


Exemple d'application du style display avec la balise span :

Contenu précédent la balise span. Texte inclus dans la balise span Contenu suivant la balise span.


Utilisation de l'élément span avec du style CSS :

Texte contenu dans la balise span

SPAN