alainericgauthier.com

construire une présence sur le web

Apprendre HTML5 : les éléments textuels

Web

Les éléments sémantiques de niveau textuel, ce sont les éléments qui donnent une fonction particulière à un mot ou des groupes de mots à l'intérieur d'une phrase ou à l'intérieur d'un bloc de texte.

Élément Anglais Français
Tableau des éléments de niveau textuel
<a> anchor hyperliens
<em> emphasis emphase
<strong> strong importance
<small> small petits caractères
<cite> citation titre
<q> citation citation courte
<code> code fragment de code
<sub> subscript indice
<sup> superscript exposant
<i> italic italique
<b> bold gras
<u> underline sous-ligné
<span> span autres
<br> line-break retour de ligne

 

Hyperlien

On utilise l'élément <a> pour créer des hyperliens qui mènent à d'autres emplacements dans la même page ou encore vers d'autres ressources sur internet.

Pour être un hyperlien, l'élément <a> doit avoir à tout le moins un attribut: href. Par exemple:

<a href="http://alainericgauthier.com">Alain Éric Gauthier</a>.

Nous verrons dans un autre article ce qu'est un attribut exactement et à quoi ils servent. Pour l'instant, il suffit de respecter la syntaxe.

La syntaxe se construit comme suit :

La balise de fermeture de cet élément est obligatoire.

<a></a>

Le texte qui se trouve entre les deux balises sera affiché sur la page mais aura une présentation différente. Par défaut, la plupart des navigateurs affichent ce texte en bleu et sous-ligné.

<a>Texte qui sera en hyperlien</a>

L'attribut href indique au navigateur la cible de l'hyperlien, c'est à dire vers quelle ressource il pointe. C'est habituellement une autre page web mais ça peut aussi être différents types de fichiers (audio, vidéo) ou encore d'autres type de ressources sur internet (comme un site ftp, etc.).

<a href="">Texte qui sera en hyperlien</a>

Finalement, il faut inscrire l'adresse de la cible.

<a href="http://alainericgauthier.com">Texte qui sera en hyperline</a>

Note: Il est possible d'utiliser l'élément <a> comme ancre dans un document mais nous verrons cela dans un autre article.

Modifier l'importance des mots

Dans un texte, il est parfois nécessaire de mettre l'emphase sur un ou plusieurs mots d'une phrase ou encore d'en réduire l'importance. L'usage de ces éléments porte spécifiquement sur l'importance relative de certains mots par rapport au reste du texte. Ceux-ci sont à utiliser quand l'auteur veut moduler l'importance de certains mots. Il ne faut pas confondre cet usage avec les conventions typographiques (voir prochain paragraphe).

  • <em> : quand l'auteur veut mettre l'emphase sur une partie du  texte
  • <strong> : quand l'auteur veut montrer une partie de texte qui est importante
  • <small> : quand l'auteur veut mettre des mots en petits caractères, comme une clause qu'on ne veut pas que vous lisiez dans un contrat.

Modification typographique

Dans certains contextes, il est parfois nécessaire de respecter des conventions typographiques. Par exemple, dans un manuel d'utilisation, les mots techniques pourraient être en caractère gras et les mots dans une autre langue pourraient être en italique.

Les éléments qui suivent modifient l'affichage du texte mais ne donne pas une fonction particulière à ces mots dans le texte.

  • <sub>,<sup> : pour les indices (sub) et les exposants (sup). Évidemment, on s'en sert beaucoup en mathématique mais on peut aussi s'en servir pour les notes de bas de page.
  • <i> : pour un bout de texte qui se distingue du texte, par exemple des termes techniques ou dans une autre langue ou encore les pensées d'un personnage dans une oeuvre de fiction.
  • <b> : lorsque l'auteur veut utiliser un affichage différent pour certains mots sans que ceux-ci aient une valeur sémantique particulière.
  • <u> : lorsque l'auteur veut souligner un bout de texte pour suggérer une annotation mais que celle-ci n'est pas spécifiée.
  • <br> : ajoute un saut de ligne dans le texte, ce qui est différent d'un saut de paragraphe. Utile quand on veut mettre en évidence une adresse ou une équation à l'intérieur d'un paragraphe ou pour séparer les vers un poème.

Les citations

Pour les citations assez longues pour créer un paragraphe distinct, vous utiliserez l'élément <blockquote>. Mais si votre citation ne fait que quelques mots et que vous voulez l'insérer à l'intérieur d'une phrase plus longue, vous avez deux éléments à votre disposition.

  • <cite> : permet de baliser le titre d'une oeuvre.
  • <q> : à utiliser pour les citations courtes qui sont en incise, c'est à dire à l'intérieur d'une phrase.

Exemple de programmation

<code> : pour inclure un bout de texte qui est un langage de programmation, n'est pas à utiliser au niveau bloc de texte par contre.

Autres valeurs sémantiques

Il n'est pas possible de prévoir toutes les situations et c'est pourquoi HTML5 offre la possibilité de créer des conventions propres à une page ou un site web particulier.

<span> : c'est l'élément à utiliser si aucun autre élément de niveau textuel n'est pertinent. Par exemple, si certaines phrases d'un paragraphe sont des avertissement, elles peuvent être balisées par un élément <span> qui aura un attribut class="avertissement"