Editions ENI Livres | Vidéos | e-Formations
La mise en forme sémantique du texte
Les objectifs
Ce chapitre est consacré à la mise en forme sémantique du texte. L’objectif est de pouvoir mettre en forme un ou plusieurs mots d’un conteneur en donnant un sens à cette mise en forme. Dans un même paragraphe, il est possible de mettre des mots en gras, en italique, en souligné, d’insérer des citations, de gérer la taille des caractères. Et tout ceci uniquement avec des éléments HTML.
Les caractères spéciaux
Dans un texte, il est très courant d’avoir à insérer des caractères spéciaux, comme des flèches, des puces, des symboles mathématiques… Attention, il ne s’agit pas ici d’insérer des caractères accentués. Il ne faut pas oublier que dans l’en-tête <head>, l’encodage des caractères se fait en UTF-8, <meta charset="UTF-8">, donc tous les caractères du clavier seront parfaitement reconnus par les navigateurs.
Les caractères spéciaux s’insèrent sous la forme d’entités de caractères, avec cette syntaxe précise :
-
L’entité est préfixée par le caractère esperluette : &.
-
Ensuite, il faut indiquer le code du caractère.
-
L’entité est suffixée par le caractère point-virgule : ;.
Voici l’entité de caractères qui permet d’insérer une flèche vers la droite : →. rarr signifie Right Arrow. Une autre entité très utile et très souvent utilisée est l’espace insécable : . nbsp signifie Non-breaking space.
Voici une URL pour retrouver bon nombre d’entités de caractères : https://fr.wikipedia.org/wiki/Liste_des_entités_de_caractère_de_XML_et_HTML...
Les emphases
1. L’emphase forte
L’élément <strong> applique une emphase forte aux mots qui y sont inclus et l’affichage usuel à l’écran est une mise en gras. D’un point de vue sémantique, il s’agit bien d’une emphase forte et non d’une mise en gras.
Voici un exemple très simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8"> <title>Ma page web</title>
</head>
<body>
<p>Nullam id dolor id nibh <strong>ultricies vehicula</strong>
ut id elit.</p>
</body>
</html> Voici l’affichage obtenu :
2. L’emphase simple
D’un point de vue sémantique, une emphase simple implique une importance plus faible que l’emphase forte. Elle s’applique avec l’élément <em> et s’affiche usuellement en italique.
Voici un exemple très simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<p>Nullam id dolor id nibh...L’indice et l’exposant
Les éléments <sub> et <sup> permettent respectivement de mettre un ou des caractères en indice et en exposant.
Voici un exemple très simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title> </head>
<body>
<p>Un bidon de 10m<sup>3</sup>, d'eau (H<sub>2</sub>0).</p>
</body>
</html> Voici l’affichage obtenu :
Le souligné et le barré
Pour appliquer un souligné, utilisez l’élément <u>. Son sens sémantique est précis, il permet de mettre en évidence un texte sans importance particulière ou un texte dont l’orthographe ou la grammaire sont incorrectes. Attention à l’utilisation du souligné, les visiteurs de la page pourraient confondre ces mots mis en évidence avec un lien hypertexte dont la mise en forme par défaut est un souligné !
Voici un exemple très simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<p>Un texte avec une <u>fote d'ortografe</u>.</p>
</body>
</html> Voici l’affichage obtenu :
L’élément <s> indique qu’un texte n’est plus exact ou n’est plus pertinent. L’affichage usuel est un texte barré.
Voici un exemple très simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head> ...Les insertions et suppressions
Lorsqu’un document subit beaucoup de modifications suite à des relectures successives, il peut s’avérer très intéressant d’indiquer les passages qui ont été supprimés et ajoutés. Pour cela, utilisez les conteneurs sémantiques <ins> et <del>. Les insertions s’afficheront en souligné, les suppressions en barré.
Voici un exemple très simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<p>Integer posuere erat a <ins>ante venenatis dapibus posuere velit
aliquet. Donec sed odio dui.</ins> Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus
ac cursus commodo, <del>tortor mauris condimentum nibh,</del> ut fermentum
massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue.</p>
</body>
</html> 
Le retour à la ligne
Dans un paragraphe, il est possible d’aller à la ligne avec l’élément <br>, tout en restant structurellement dans ce même paragraphe.
Voici un exemple très simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Nullam id dolor id nibh ultricies vehicula ut id elit.<br>Donec
ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Nulla vitae elit libero, a pharetra augue.</p>
</body>
</html> Voici l’affichage obtenu :
D’autres mises en forme sémantiques
Voici d’autres mises en forme sémantiques qu’il est possible de rencontrer dans des pages web :
-
small : permet d’afficher une taille de caractères plus petite que dans le contexte du paragraphe. Voici un exemple : <p>Note : <small>Maecenas faucibus mollis.</small></p>
-
dfn indique que le texte est une définition.
-
abbr ajoute une abréviation. Voici un exemple de son usage : <abbr title="Hypertext Markup Language">HTML</abbr>. Le texte de l’attribut title pourra s’afficher dans une infobulle.
-
code indique que le contenu est du code informatique ou autre,
-
var spécifie une variable mathématique ou informatique,
-
samp signale l’utilisation d’un exemple ou d’un échantillon,
-
kbd indique une saisie faite au clavier,
-
mark met en surbrillance un texte, pour le mettre en évidence et souligner ainsi sa pertinence.