Balises de mise en forme du texte

HTML propose plusieurs balises de mise en forme du texte permettant d’ajouter de l’emphase, de souligner ou de barrer du texte selon les besoins.

Les balises <strong> et <em> servent à mettre en valeur le texte. La balise <strong> affiche le texte en gras pour indiquer une importance particulière, tandis que la balise <em> affiche le texte en italique pour signaler une emphase.

La balise <u> souligne le texte afin d’apporter une clarté visuelle et de mettre en avant des informations importantes. Cependant, il est recommandé d’utiliser le soulignement avec parcimonie pour éviter de surcharger le texte.

La balise <s> barre le texte, indiquant une suppression ou une perte de pertinence. Elle est couramment utilisée pour montrer qu’un texte a été retiré ou n’est plus valide.
Exemple :

Dans l'exemple ci-dessus :

• Les balises <strong> et <em> servent à mettre en valeur le texte, <strong> affichant le texte en gras et <em> en italique ;
• La balise <u> souligne le texte, le mettant en évidence visuellement ;
• La balise <s> barre le texte, indiquant une suppression ou une absence de pertinence.

Liens

Les liens, également appelés hyperliens, permettent aux utilisateurs de naviguer entre des pages web, des ressources et divers moyens de communication. En HTML, les liens sont créés à l'aide de la balise <a> (ancre).

<a href="href-value">some text</a>

L'attribut href dans la balise <a> spécifie la destination du lien. Il peut accepter différents types d'URL, notamment :

• URLs absolues : Spécifient l'adresse complète de la ressource liée, y compris le protocole (par exemple, "https://www.example.com") ;
• URLs téléphoniques : Permettent aux utilisateurs de lancer directement des appels téléphoniques depuis le navigateur en cliquant. Format : "tel:phone-number". Il est essentiel d'inclure l'indicatif du pays et de supprimer tout caractère spécial ou espace du numéro de téléphone (par exemple, "tel:+123456789") ;
• URLs email : Permettent aux utilisateurs de rédiger un email en cliquant. Format : "mailto:email-address". Il est important d'indiquer l'adresse email complète après mailto: (par exemple, "mailto:example@example.com").

Exemple :

Dans l'exemple ci-dessus :

• La balise <a> crée des hyperliens avec différentes destinations ;
• L'attribut href spécifie diverses URL, y compris des URL absolues, des numéros de téléphone et des adresses e-mail.

Autres attributs utiles

La balise <a> possède plusieurs attributs permettant de définir les propriétés d'un hyperlien. Parmi les attributs courants :

• target="_blank" : Définit l'emplacement d'ouverture du document lié. "_blank" ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet ;
• download : Indique que la cible sera téléchargée lorsque l'utilisateur clique sur l'hyperlien. Cet attribut peut recevoir une valeur pour spécifier le nom du fichier à enregistrer.

Exemple :

Dans cet exemple :

• L'attribut href spécifie l'URL de la ressource liée ;
• L'attribut target ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet.

Boutons

La balise <button> crée des boutons cliquables sur les pages web. Elle permet aux utilisateurs d'interagir avec la page en déclenchant des actions telles que l'envoi d'un formulaire ou l'exécution de code JavaScript. Bien que nous ne nous concentrions pas sur JavaScript dans ce cours, il est important de savoir qu'une telle possibilité existe.

Types de boutons

• Bouton standard (<button type="button">) : Un bouton polyvalent utilisé pour diverses actions sur la page, comme déclencher des fonctions JavaScript ou naviguer vers une autre page ;
• Bouton d'envoi (<button type="submit">) : Utilisé dans un formulaire pour envoyer les données du formulaire à un serveur ;
• Bouton de réinitialisation (<button type="reset">) : Utilisé dans un formulaire pour réinitialiser les champs du formulaire à leurs valeurs par défaut.

Exemple :

Dans l'exemple ci-dessus :

• Le premier bouton est un bouton standard avec un attribut onclick qui déclenche une alerte lors du clic ;
• Le deuxième bouton est un bouton de soumission qui envoie les données du formulaire au serveur ;
• Le troisième bouton est un bouton de réinitialisation qui remet les champs du formulaire à leurs valeurs par défaut.

Tutoriel vidéo