HTML
Formatage du texte

Introduction

Syntaxe

• <abbr>Abbreviation</abbr>
• <b>Bold Text</b>
• <del>Deleted Text</del>
• <em>Emphasized Text</em>
• <i>Italic Text</i>
• <ins>Inserted Text</ins>
• <mark>Marked (or Highlighted) Text</mark>
• <s>Stricken Text</s>
• <strong>Strong Text</strong>
• <sub>Subscript Text</sub>
• <sup>Superscript Text</sup>
• <u>Underlined Text</u>

Gras, italique et souligné

Texte en gras

Pour mettre du texte en gras, utilisez les balises <strong> ou <b> :

<strong>Bold Text Here</strong>

ou

<b>Bold Text Here</b>

Quelle est la différence? Sémantique. <strong> est utilisé pour indiquer que le texte est fondamentalement ou sémantiquement important pour le texte environnant, tandis que <b> n'indique pas une telle importance et représente simplement un texte qui doit être mis en gras.

Si vous utilisiez <b> un programme de synthèse vocale ne dirait pas le (s) mot (s) différemment que les autres mots qui l’entourent - vous attirez simplement l’attention sur eux sans ajouter d’importance supplémentaire. En utilisant <strong> , cependant, le même programme voudrait prononcer ces mots avec un ton différent pour indiquer que le texte est important d’une manière ou d’une autre.

Texte en italique

Pour mettre du texte en italique, utilisez les balises <em> ou <i> :

<em>Italicized Text Here</em>

ou

<i>Italicized Text Here</i>

Quelle est la différence? Sémantique. <em> est utilisé pour indiquer que le texte doit être accentué de manière à être souligné, tandis que <i> représente simplement un texte qui doit être séparé du texte qui l'entoure.

Par exemple, si vous voulez insister sur l'action à l'intérieur d'une phrase, vous pouvez le faire en italique via <em> : "Souhaitez-vous simplement soumettre l'édition?"

Mais si vous identifiiez un livre ou un journal que vous classeriez normalement en italique, vous utiliseriez simplement <i> : "J'ai été obligé de lire Roméo et Juliette au lycée.

Texte souligné

Alors que l'élément <u> lui-même était déconseillé dans HTMl 4, il a été réintroduit avec une signification sémantique alternative dans HTML 5 - pour représenter une annotation non textuelle et non textuelle. Vous pouvez utiliser un tel rendu pour indiquer un texte mal orthographié sur la page ou pour une marque chinoise.

<p>This paragraph contains some <u>mispelled</u> text.</p>

Mise en évidence

L'élément <mark> est nouveau en HTML5 et permet de marquer ou de mettre en évidence du texte dans un document "en raison de sa pertinence dans un autre contexte". ¹

L'exemple le plus courant serait dans les résultats d'une recherche si l'utilisateur a entré une requête de recherche et que les résultats sont affichés en mettant en évidence la requête souhaitée.

<p>Here is some content from an article that contains the <mark>searched query</mark>
that we are looking for. Highlighting the text will make it easier for the user to 
find what they are looking for.</p>

Sortie:

Un format standard courant est le texte noir sur fond jaune, mais cela peut être modifié avec CSS.

Inséré, supprimé ou affaibli

Pour marquer le texte comme inséré, utilisez la <ins> :

<ins>New Text</ins>

Pour marquer le texte comme étant supprimé, utilisez la <del> :

<del>Deleted Text</del>

Pour parcourir le texte, utilisez la <s> :

<s>Struck-through text here</s>

En exposant et indice

Pour décaler le texte vers le haut ou vers le bas, vous pouvez utiliser les balises <sup> et <sub> .

Pour créer un exposant:

<sup>superscript here</sup>

Pour créer un indice:

<sub>subscript here</sub>

Abréviation

Pour marquer une expression comme une abréviation, utilisez la <abbr> :

<p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr>!</p>

S'il est présent, l'attribut title est utilisé pour présenter la description complète de cette abréviation.