Formatage de texte HTML

Vous avez déjà utilisé l’attribut style pour changer l’apparence du texte. Les balises de formatage répondent à une autre question : que signifie ce morceau de texte ? Les avertissements importants, l’accentuation parlée, les surlignages, les modifications, les petites notes et les formules comme H₂O appartiennent à des éléments HTML dédiés. Les navigateurs les affichent souvent en gras ou en italique par défaut, mais les outils d’assistance et les systèmes de recherche peuvent aussi utiliser le sens — quelque chose que la couleur seule ne fournit pas.

Qu’est-ce que le formatage de texte HTML ?

Les éléments de formatage de texte entourent un mot ou une expression dans un paragraphe (ou un texte similaire) pour marquer un rôle : importance, accentuation, surlignage, suppression, insertion, et plus. Ce sont des éléments en ligne. Ils ne commencent pas un nouveau bloc comme p ou h1. Vous les placez autour de l’extrait exact qui porte ce rôle, puis vous les fermez pour que le reste de la phrase redevienne normal.

Réponse directe

Utilisez des balises de formatage sémantiques pour le sens : strong pour une importance forte, em pour une accentuation de stress (comme si vous appuyiez sur le mot en parlant), mark pour un surlignage de pertinence, small pour les petites notes ou commentaires secondaires, del et ins pour le texte supprimé ou ajouté, et sub / sup pour l’indice et l’exposant. Préférez ces balises quand le sens compte. Quand vous voulez seulement du gras ou de l’italique sans sens supplémentaire, utilisez le CSS — y compris les idées de style en ligne de la session précédente — au lieu de mal utiliser strong ou em.

Référence des balises en un coup d’œil

D’abord strong et em

strong et em sont la paire que vous utiliserez le plus. Tournez-vous vers strong quand le contenu est important — un terme clé, un avertissement, l’intitulé d’un champ obligatoire dans le texte. Tournez-vous vers em quand vous changeriez votre voix pour appuyer un mot. Le gras et l’italique par défaut ne sont que la présentation courante ; les balises portent encore le sens si une feuille de style change l’apparence plus tard.

Lecture de l’exemple

• strong entoure « prix final » parce que cette expression est importante dans la phrase
• em entoure « avant » parce que le moment est l’idée accentuée
• Les deux balises sont dans un seul paragraphe ; elles ne remplacent pas p
• Si vous vouliez seulement du texte bleu marine sans sens d’importance, style (ou le CSS plus tard) serait le meilleur outil

Plus de balises de formatage dans un paragraphe

Une fois que strong et em semblent naturels, ajoutez les aides pour les surlignages, les modifications, les petites notes et les formules. Gardez l’imbrication peu profonde : n’entourez que les mots qui ont besoin de chaque rôle.

Ce que fait chaque aide

• sub abaisse le « 2 » de la formule de l’eau ; sup relève l’exposant dans 12²
• del et ins montrent une trace d’édition — ancienne valeur dehors, nouvelle dedans
• small marque les petites notes secondaires, pas l’affirmation principale
• mark surligne un résultat pertinent, comme un surlignage de recherche
• strong et em marquent encore l’importance et le stress dans le même paragraphe
  Vous n’avez pas besoin de chaque balise dans chaque phrase. Choisissez celles qui correspondent au sens réel de votre texte.

Balises de sens contre style purement visuel

Les anciennes pages utilisent parfois b et i pour le gras et l’italique sans sens fort. Dans ce cours, préférez strong quand le contenu est important et em quand vous appuyeriez sur un mot en parlant. Utilisez le CSS quand vous voulez seulement l’apparence. Cette habitude garde votre HTML honnête : les balises de formatage décrivent le contenu, et les feuilles de style décrivent la présentation.

Entraînez-vous dans votre éditeur

1. Écrivez un paragraphe normal sur le prix d’un produit.
2. Entourez le nom du produit avec strong.
3. Entourez un mot d’avertissement avec em.
4. Marquez un ancien prix avec del et un nouveau avec ins.
5. Facultatif : ajoutez une petite note de type bas de page avec small, ou un fragment de formule avec sub / sup.
6. Enregistrez et ouvrez la page. Vérifiez que les balises sont fermées et que le sens se lit clairement.
7. Omettez volontairement une balise de fin, actualisez, remarquez comment le reste de la ligne reste stylé, puis corrigez.
   Voir une balise non fermée « fuir » son style à travers le paragraphe entraîne une imbrication soignée plus vite que de seulement copier des exemples parfaits.

Erreurs qui affaiblissent le formatage

• Utiliser seulement style="font-weight: bold" quand le mot est vraiment important — préférez strong pour le sens
• Utiliser strong partout juste pour épaissir le texte — cela dilue l’importance
• Imbriquer cinq balises de formatage les unes dans les autres sans raison
• Utiliser sup / sub pour la décoration au lieu de vrais indices (maths, chimie, notes de bas de page)
• Oublier les balises de fin pour que le reste de la page hérite du gras, de l’italique ou du surlignage
• Traiter mark comme une peinture jaune générale pour des paragraphes entiers sans rapport

Résumé

• Les balises de formatage ajoutent du sens dans le texte, pas seulement de la décoration
• Commencez par strong et em, puis ajoutez mark, small, del, ins, sub et sup au besoin
• Préférez les balises sémantiques quand l’importance, l’accentuation, les modifications ou les indices comptent
• Utilisez le CSS quand vous avez seulement besoin d’apparence sans sens supplémentaire
• Gardez l’imbrication simple et fermez toujours chaque balise ouverte
• Choisissez les balises d’après le sens de la phrase, pas d’après l’habitude de tout mettre en gras