Balise HTML <span>
La balise HTML <span> est utilisée pour définir un petit morceau de contenu ou de texte au sein d'un document plus large qui doit être mis en forme différemment du texte environnant. C'est un élément en ligne qui peut être utilisé pour appliquer des styles, tels que la couleur ou la police, à une section spécifique du texte.
La balise <span> n'a pas de signification sémantique en soi, mais elle peut être utilisée conjointement avec d'autres balises, comme <div> ou <p>, pour appliquer un style ou une fonctionnalité supplémentaires à des parties spécifiques du contenu. C'est un outil utile pour les designers et développeurs web qui doivent apporter de petites modifications au texte sans affecter la structure globale de la page.
Par exemple, vous pouvez utiliser la balise <span> pour mettre en surbrillance un mot spécifique dans un paragraphe ou pour appliquer une taille de police différente à un seul caractère. La balise <span> peut également être utilisée avec CSS pour créer des effets de survol, des animations et d'autres fonctionnalités dynamiques sur une page web.
La balise <span> est similaire à la balise <div>, mais il existe quelques différences. Alors que la balise HTML <span> est utilisée pour définir un petit morceau de contenu ou de texte au sein d'un document plus large qui doit être mis en forme différemment du texte environnant, la balise <div> est utilisée pour définir une section ou un bloc de contenu plus large qui peut contenir d'autres éléments HTML. La balise <div> est un élément conteneur souvent utilisé pour regrouper du contenu connexe et appliquer un style à l'ensemble du bloc. C'est un élément de niveau bloc, ce qui signifie qu'il occupe toute la largeur de son conteneur parent et force un saut de ligne avant et après l'élément.
Syntaxe
La balise <span> s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (<span>) et la balise de fermeture (</span>).
Dans l'exemple ci-dessous, nous appliquons un style directement à l'intérieur de la balise.
Exemple de la balise HTML <span> :
Un exemple de balise HTML <span>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Voyons un autre exemple où nous ajoutons un attribut class à la balise et appliquons des styles à son contenu séparément.
Exemple de la balise HTML <span> avec l'attribut class :
Un exemple de balise HTML <span> avec l'attribut class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Font size in percents */
position: relative; /* Relative positioning */
top: 7px; /* Move from above */
}
</style>
</head>
<body>
<p>
<span class="letter">О</span>
She brought in disgusting, disturbing yellow flowers in her hands.
And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Attributs
La balise <span> prend en charge les Attributs globaux et les Attributs d'événement.
Les attributs globaux désignent les attributs utilisés sur n'importe quel élément HTML. Ces attributs sont communs à tous les éléments HTML.
Un événement se produit lorsqu'un navigateur réagit à une action spécifique de l'utilisateur. L'utilisateur génère un événement en cliquant sur la souris, en lisant une vidéo, en téléchargeant un document ou une image, ou en effectuant toute autre action sur le site web.
Pratique
Quelle est la bonne utilisation de la balise span HTML ?