C'est le point central de ce chapitre. En HTML, deux balises peuvent produire le
même rendu visuel tout en disant des choses différentes au navigateur. Depuis HTML5,
on choisit la balise d'après le sens, et on laisse le CSS décider de l'apparence.
1. L'importance et l'emphase
Balise
Sens
Rendu par défaut
<strong>
Important, grave
gras
<b>
Ressort visuellement, sans importance particulière
gras
<em>
Accentuation, insistance
italique
<i>
Terme technique, mot étranger, pensée
italique
<p><strong>Attention :</strong> ne jamais partager son mot de passe.</p>
<p>Le terme <i>responsive</i> designe un site qui s'adapte a l'ecran.</p>
Un lecteur d'écran accentue la voix sur <strong>, mais pas sur <b>.
Voilà toute la différence : elle est invisible à l'œil, essentielle pour l'accessibilité.
2. Mettre en évidence et corriger
<p>Le resultat est <mark>surligne</mark> pour attirer l'oeil.</p>
<p>Prix : <del>15000 FCFA</del> <ins>10000 FCFA</ins></p>
<p><small>Offre valable jusqu'au 31 decembre.</small></p>
<mark> : surligne un passage pertinent
<del> : texte supprimé (barré)
<ins> : texte inséré (souligné)
<small> : mention secondaire
3. Exposant et indice
<p>La surface est de 25 m<sup>2</sup>.</p>
<p>La formule de l'eau est H<sub>2</sub>O.</p>
4. Les citations
Deux balises selon la longueur. <q> pour une citation courte dans une phrase,
<blockquote> pour un bloc entier.
<p>Il disait toujours : <q>la pratique prime sur la theorie</q>.</p>
<blockquote cite="https://example.com/article">
<p>Le code doit etre ecrit pour etre lu par des humains.</p>
</blockquote>
5. Saut de ligne et séparateur
<br> force un retour à la ligne, <hr> trace une séparation
thématique. Ce sont des balises orphelines : pas de balise fermante.
<p>BP 96 Dschang<br>Cameroun</p>
<hr>
Attention : <br> ne sert pas à espacer. Pour de l'air entre deux paragraphes,
utilisez deux <p> et réglez les marges en CSS. Enchaîner les
<br><br><br> est une faute classique.
À retenir
On choisit la balise selon le sens ; l'apparence relève du CSS
<strong> et <em> portent du sens, <b> et <i> sont surtout visuels
<br> et <hr> sont orphelines
Exercices d'application
Exercice 1. Une annonce correctement baliséeRédigez un paragraphe d'annonce avec un avertissement en <strong>, un mot anglais en <i> et une mention légale en <small>.
Exercice 2. Une promotionAffichez un ancien prix barré et le nouveau prix inséré, à l'aide de <del> et <ins>.
Exercice 3. FormulesÉcrivez l'aire d'un carré de 12 m² et la formule du dioxyde de carbone, avec <sup> et <sub>.
Faites-les dans un fichier .html et ouvrez-le dans votre navigateur : c'est en testant que l'on retient.
merci bien