Texte souligné avec la balise Mark

Introduction

En HTML, la balise  est utilisée pour souligner ou marquer une partie du texte afin de montrer son importance. Dans ce laboratoire, nous allons apprendre à utiliser la balise  pour créer du texte souligné.

Note : Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Configurer le fichier HTML

Pour commencer, créez un fichier index.html et configurez la structure de base du fichier HTML. Insérez le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Highlighted Text with Mark Tag</title>
  </head>
  <body></body>
</html>

Ajoutez du texte au balisage

Entre les balises <body>, ajoutez du texte. Dans cet exemple, nous allons souligner le texte "renard brun" dans une phrase.

<body>
  <p>The quick <mark>brown fox</mark> jumped over the lazy dog.</p>
</body>

Ajoutez un style CSS pour changer la couleur par défaut

Par défaut, le texte souligné aura un fond jaune et une couleur de texte noire. Vous pouvez changer ces couleurs en ajoutant du CSS à la balise . Par exemple, pour changer la couleur de fond soulignée en rouge et la couleur de texte en blanc, ajoutez le style CSS suivant :

<style>
  mark {
    background-color: red;
    color: white;
  }
</style>

Facultatif): Ajoutez un sélecteur de classe pour la mise en forme

Si vous avez plusieurs instances de texte souligné sur une page et que vous voulez les styler de la même manière, vous pouvez ajouter une classe à la balise  et ajouter un sélecteur de classe CSS. Dans l'exemple suivant, nous allons ajouter une classe nommée highlight à la balise  puis la styler à l'aide de CSS.

<body>
  <p>
    The quick <mark class="highlight">brown fox</mark> jumped over the lazy dog.
  </p>
  <p>The <mark class="highlight">sun</mark> is a star.</p>
</body>

<style>
  .highlight {
    background-color: green;
    color: white;
  }
</style>

Résumé

C'est tout! Vous avez appris à créer du texte souligné avec la balise  en HTML. En utilisant la balise  et quelques styles CSS, vous pouvez facilement attirer l'attention de vos lecteurs sur les parties importantes de votre texte.

Texte souligné en HTML