Spans en ligne
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 26 sur 60.
Et si nous avons une phrase et que nous devons mettre en évidence un seul mot ou une petite partie de celle-ci ? Nous pouvons utiliser la balise <span> ! Elle nous aide à appliquer des styles ou à apporter des modifications à une seule partie spécifique du texte sans affecter le reste.
Voici la syntaxe de base pour utiliser un span en HTML :
<span>This is some text.</span>Voici un exemple de l'utilisation des balises span pour mettre en évidence une partie du texte dans un paragraphe :
<p>This is a <span style="color: blue;">blue</span> word.</p>Dans cet exemple, le mot "blue" sera affiché en couleur bleue.
Nous en apprendrons davantage sur l'attribut style plus tard !
Défi
FacileÉtant donné un document HTML avec un paragraphe. Votre tâche consiste à utiliser une balise <span> pour entourer le texte "qwerty12345".
Aide-mémoire
La balise <span> est utilisée pour appliquer des styles ou apporter des modifications à une partie spécifique du texte sans affecter le reste.
Syntaxe de base :
<span>This is some text.</span>Exemple avec un style en ligne :
<p>This is a <span style="color: blue;">blue</span> word.</p>Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le code ici -->
<p>The secret password is qwerty12345.</p>
</body>
</html>Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-tête3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page