Le balisage HTML se compose de balises avec des propriétés CSS par défaut.

Les paragraphes, mots ou lettres des pages Web peuvent être formatés avec l’aide CSS (souligné, gras, italique…), l’architecture HTML inclut également des balises de formatage HTML avec ces fonctionnalités par défaut;

Balises en gras <b> & <strong>

Balise <b>

Dans l’utilisation de la balise <b> (bold), les navigateurs Internet montrent visuellement aux visiteurs du site Web le texte entre les balises en gras et en noir, il est utilisé pour attirer l’attention des visiteurs du site Web, il ne souligne pas l’importance du mot ou du texte du côté du navigateur.

L’utilisation de la balise <b> dans les en-têtes n’est pas nécessaire, à la place les balises d’en-tête (h1, h2, h3, h4, h5, h6) doivent être utilisées. Si la balise <b> n’est pas beaucoup utilisée en attribuant une classe, le texte peut être mis en gras à partir des paramètres CSS au lieu d’utiliser la balise <b>.

<p>Les balises d'en-tête doivent être utilisées à la place de la balise en <b>gras</b> dans les titres du contenu du site Web.</p>

Affichage du navigateur:

Les balises d’en-tête doivent être utilisées à la place de la balise en gras dans les titres du contenu du site Web.

<strong>

Lorsque la balise <strong> est utilisée, les navigateurs Internet affichent le texte entre la balise <strong> en gras et en noir pour les visiteurs du site Web comme dans la balise <b>, soulignant l’importance du texte côté navigateur.

<p>La <strong>balise strong</strong> souligne l'importance du texte.</p>

Affichage du navigateur:

La balise strong souligne l’importance du texte.

Différence entre les balises <b> et <strong>

La balise <b> aide généralement les crawlers à mettre du texte en gras, tandis que la balise <strong> aide le navigateur à mettre en évidence l’importance du texte pertinent pour l’ensemble du contenu de la page. Ces deux balises offrent aux visiteurs du site Web la même image, du texte en noir et en gras, mais la principale différence se situe du côté du navigateur.

Au lieu d’utiliser la balise <b>, la même image peut être donnée en modifiant les paramètres de police du texte avec CSS, mais la préférence des paramètres CSS au lieu de cette balise ne donnera pas le même résultat, puisque la balise <strong> est important. En termes de référencement, la balise <strong> doit être utilisée à la place de la balise <b>.

Balise de soulignement <u>

La balise <u> (underline) est utilisée pour mettre en évidence n’importe quelle partie du texte et attirer l’attention.

<p>Le texte entre la <u>balise Souligné</u> apparaît souligné dans le navigateur.</p>

Affichage du navigateur:

Le texte entre la balise Souligné apparaît souligné dans le navigateur.

Balises italiques <i> & <em> & <cite> & <var>

<i>

La balise HTML i tag (<i> Italic) affiche le texte en italique, comme son nom l’indique. Il est généralement utilisé pour décrire des termes latins biologiques et pour décrire des termes techniques.

Comme la balise <b>, elle ne se contente pas de la présenter visuellement, mais spécifie plutôt le texte à l’intérieur de la balise <i> au navigateur.

<p>Les serveurs <i>proxy</i> contrôlent et acheminent le trafic.</p>

Affichage du navigateur:

Les serveurs proxy contrôlent et acheminent le trafic.

<em>

Lors de l’utilisation de la balise <em> (emphasis), il affichera du texte comme la balise <i> en italique. Dérivée des initiales des mots emphase, cette balise sert à souligner, comme son nom l’indique.

La balise d’emphase <em> est utilisée pour mettre en évidence les mots qui sont plus pertinents pour le contenu, plutôt que de marquer un long texte sur la page.

L’utilisation de la balise <em> dans le but de donner une apparence italique n’a pas de sens, à la place, l’apparence italique de la police peut être préférée à partir des paramètres CSS.

<p>La balise <em>d'emphase</em> est utilisée pour souligner le contenu.</p>

Affichage du navigateur:

La balise d’emphase est utilisée pour souligner le contenu.

Différence entre <i> et <em>

La balise <i> représente un mot étranger ou une expression technique, tandis que la balise <em> représente le mot qui met en évidence le contenu. Les deux se ressemblent visuellement pour les visiteurs du site Web, mais la situation est différente du côté du navigateur.

<cite>

La balise Cite (citation element) est utilisée lorsque l’on parle d’un livre, d’une chanson, d’un poème ou d’un film, pour indiquer le nom de l’œuvre en question.

Les navigateurs Internet affichent le texte de la balise <cite> en italique, mais l’objectif principal de cette balise est bien sûr de ne pas être utilisé comme police italique.

<p><cite>The Lord of the Rings</cite> by J.R.R Tolkien.</p>

Affichage du navigateur:

The Lord of the Rings by J.R.R Tolkien

<var>

La balise <var> (variable) est utilisée pour spécifier des variables dans la page, les variables à l’intérieur de la balise <var> apparaissent en italique par défaut.

Tout en spécifiant les formules des branches scientifiques telles que les mathématiques et la physique, les variables sont affichées dans la balise <var>.

<p><var>E</var>=<var>m</var><var>c<sup>2</sup></var></p>

Affichage du navigateur:

E=mc²

<address>

La balise <address> doit être utilisée lors de la spécification d’une adresse, comme son nom l’indique. Il est affiché en italique par les navigateurs, mais l’utilisation de la balise <address> pour lui donner l’apparence de l’italique est incorrecte.

<p>Siège social de Google <address>1600 Amphitheatre Parkway Mountain View, CA 94043, États-Unis</address></p>

Affichage du navigateur:

Siège social de Google 1600 Amphitheatre Parkway Mountain View, CA 94043, États-Unis

Étiquettes barrant le texte

<s>

Lors de l’utilisation de la balise barrée <s> (strikethrough), les navigateurs Internet affichent le texte entre la balise <s> barré.

Il peut être utilisé pour rayer une phrase précédemment écrite qui n’est plus importante.

<p><s>Produits en stock avec 50% de remise!</s> Pas de stock!</p>

Affichage du navigateur:

Produits en stock avec 50% de remise! Pas de stock!

<del>

Lorsque la balise <del> (delete) est utilisée, elle affiche le texte entre la balise <del> barré par les navigateurs Internet, similaire à la balise <s>.

Cela signifie qu’une partie du texte a été supprimée, mais ce n’est pas une étiquette très utilisée.

<p>HTML est un langage de balisage <del>de programmation</del>.</p>

Affichage du navigateur:

HTML est un langage de balisage de programmation.

<mark>

La balise <mark> est utilisée pour une zone spécifique du texte à marquer, par défaut la couleur de fond du texte à l’intérieur de la balise <mark> est marquée en jaune.

Il ne met pas l’accent sur l’importance du contenu comme la balise <strong>. La balise <mark> est utilisée pour montrer la zone désignée au visiteur du site Web avec une différence de couleur.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<mark>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</mark>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Affichage du navigateur:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<small>

Normalement, la taille de police par défaut des navigateurs est de 16 pixels pour la balise <p>. Lorsque vous utilisez la balise <small>, la taille de la police du texte entre la balise <small></small> passe à 13,3333px. Ce n’est pas une balise très préférée car elle peut donner le même aspect avec CSS.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<small>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</small> 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Affichage du navigateur:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Déclarations inférieure et supérieure

Balise <sub>

Lorsque vous utilisez <sub> (subscript), la balise d’indice, la partie entre la balise  est affichée en indice du côté du navigateur. Il peut être utilisé en chimie pour spécifier le numéro atomique de molécules ou en mathématiques pour spécifier des séquences.

<p>La formule de l'eau, source de vie, est H<sub>2</sub>O.</p>

Affichage du navigateur:

La formule de l’eau, source de vie, est H₂O.

Balise <sup>

<sup> (superscript), lors de l’utilisation de la balise exposant, la partie entre la balise  s’affiche en exposant côté navigateur. Il est utilisé pour représenter des expressions exponentielles en mathématiques et pour spécifier l’ordre dans les langues.

<p>(a-b)<sup>2</sup> =a> <sup>2</sup> -2ab +b<sup>2</sup></p><p>5<sup>th</sup></p>

Affichage du navigateur:

(a-b)² = a² -2ab +b² 5^th

Balises d’en-tête

Chacune des 6 balises de titre (h1,h2,h3,h4,h5,h6) dans la structure HTML reflète la partie entre la balise et le navigateur avec une taille de police différente. Au fur et à mesure que vous passez de H1 à H6, l’importance de la balise et la taille de la police diminuent.

<h1> Balise

La balise H1 a la police la plus grande parmi les balises d’en-tête. Par défaut, le titre entre la balise <h1> est affiché en 32px par les navigateurs.

<h2>Balise

La taille de police par défaut est de 24 pixels.

<h3> Balise

La taille de police par défaut est de 18,72 pixels.

<h4> Balise

La taille de police par défaut est de 16 pixels.

<h5> Balise

La taille de police par défaut est de 13,28 pixels.

<h6> Balise

La taille de police par défaut est de 10,72 pixels.

<h1>Balise 1</h1>
<h2>Balise 2</h2>
<h3>Balise 3</h3>
<h4>Balise 4</h4>
<h5>Balise 5</h5>
<h6>Balise 6</h6>

Affichage du navigateur:

Balise 1

Balise 2

Balise 3

Balise 4

Balise 5

Balise 6

Les références:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element