Utiliser une mise en forme sémantique

Dans ce chapitre, nous allons aborder la mise en forme sémantique du texte. Vous allez pouvoir mettre en évidence un ou plusieurs mots d’un élément conteneur de type bloc, avec des éléments de type en ligne. Dans un même paragraphe, vous pourrez mettre des mots en gras, en italique, en souligné...

Insérer des 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. N’oublions pas que nous avons déclaré dans l’en-tête <head> que l’encodage des caractères se fait en 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 : &.
Nous avons ensuite 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_caractère_de_XML_et_HTML...

L’emphase forte

L’élément applique une forte emphase aux mots qui y sont inclus et l’affichage résultant usuel 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 :

Voici la propriété d’affichage par défaut de cet élément :

strong{ 
  font-weight: bold; 
}

L’emphase simple

Sur le même principe, une emphase simple s’affiche en italique et s’applique avec l’élément .

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 <em>ultricies vehicula</em> 
ut id elit.</p> 
   </body> 
</html>

Voici l’affichage obtenu :

Voici la propriété d’affichage par défaut de cet élément :

em{ 
  font-style: italic; 
}

Mettre en gras et en italique

Les éléments et permettent respectivement d’afficher du texte en gras et en italique, sans leur conférer un sens sémantique de type emphase. Il s’agit uniquement de mises en évidence pour distinguer ces mots des autres.

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 très <b>bon</b> livre et une belle <i>découverte</i>.</p> 
   </body> 
</html>

Voici l’affichage obtenu :

Les propriétés d’affichage initiales sont les mêmes que pour et .

L’indice et l’exposant

Les éléments et 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 :

Voici les propriétés d’affichage par défaut de l’indice et de l’exposant :

sub{  
  vertical-align: sub;  
  font-size: smaller; 
}  
sup{  
  vertical-align: super;  
  font-size: smaller; 
}

Le souligné

Pour appliquer un souligné, utilisez l’élément . 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.

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 :

Voici les propriétés d’affichage par défaut du souligné :

u{ 
  text-decoration: underline; 
}

Le barré

Applique un barré à du texte avec l’élément <s>, indique que celui-ci n’est plus exact ou n’est plus pertinent. Son 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> 
   <body> 
       <p>Les pages web créées avec le langage <s>HTML 4.01</s>, 
se conçoivent maintenant avec l'HTML5.</p> 
   </body> 
</html>

Voici l’affichage obtenu :

Voici les propriétés d’affichage par défaut du barré :

s{  
  text-decoration: line-through; 
}

Notez bien qu’il ne faut pas confondre l’utilisation de cet élément <s> avec les annotations de révision des documents indiquées avec <ins> et <del> (voir la section Les insertions et les suppressions).

Réduire la taille de caractères

L’élément a un sens sémantique très précis : il permet d’indiquer que le texte affiché en plus petit est de type "note en bas de page".

Voici un exemple très simple :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Ma page web</title> 
   </head> 
   <body> 
       <p>Sed posuere consectetur est...</p> 
       <hr> 
       <p>Note : <small>Maecenas faucibus mollis...</small></p> 
   </body> 
</html>

Voici l’affichage obtenu :

Voici les propriétés d’affichage par défaut de :

small{ 
  font-size: smaller; 
}

Les titres d’œuvres et les citations courtes

L’élément <cite> permet d’indiquer le titre d’une œuvre et l’élément <q> spécifie une courte citation. Le texte inclus dans le titre est usuellement affiché en italique et le texte placé dans la citation courte est affiché entre guillemets.

Voici un exemple très simple :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Ma page web</title> 
   </head> 
   <body> 
       <p>Dans l'ouvrage <cite>Le web en 2032</cite>, l'auteur 
nous dit <q>Eh bien je ne sais pas !</q>.</p> 
   </body> 
</html>

Voici l’affichage obtenu :

Voici les propriétés d’affichage par défaut de <cite> et de <q> :

cite{ 
  font-style: italic; 
} 
q{ 
  display: inline; 
}

Les insertions et suppressions

Lorsque vous avez un document qui subit beaucoup de modifications suite à des relectures successives, il peut s’avérer très intéressant d’indiquer les textes 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>

Voici l’affichage obtenu :

Voici les propriétés d’affichage...

Le retour à la ligne

Vous pouvez, dans un paragraphe par exemple, aller à la ligne avec l’élément , 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 que vous pourrez rencontrer dans des pages web :

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.
ruby permet de mettre en évidence des annotations faites avec Ruby qui permet d’afficher la prononciation des caractères d’Asie orientale.
rt et rp sont des éléments enfants de ruby, dans le système d’annotation.
data permet de mettre en évidence des données provenant d’une machine. La donnée numérique peut être placée dans l’attribut value.
time permet de mettre en évidence une date ou une durée. La donnée numérique peut être placée dans l’attribut datetime.
dbo permet d’isoler une portion d’un texte pour l’orienter...

La mise en forme sémantique du texte

Utiliser une mise en forme sémantique

Insérer des caractères spéciaux

L’emphase forte

L’emphase simple

Mettre en gras et en italique

L’indice et l’exposant

Le souligné

Le barré

Réduire la taille de caractères

Les titres d’œuvres et les citations courtes

Les insertions et suppressions

Le retour à la ligne

D’autres’mises en forme sémantiques