HTML - mise en forme des textes
Article écrit par : sandy
Catégorie(s) de cet article : - La conception de site web
Mot(s)-clef(s) de cet article : - HTML
Introduction
Dans cet article, nous allons parler d'appliquer des styles spécifiques à des portions de texte. Il ne s'agit pas encore des styles gérés par le CSS, mais plutôt, par exemple, de souligner, de mettre en gras, de barrer du texte, etc.
Mise en surbrillance, gras, italique, et autres
Mark
L’élément « mark » permet de mettre en surbrillance jaune une partie d'un texte dans le but de le faire ressortir, car il représente un intérêt particulier. Attention, il ne s'agit pas d'utiliser cet élément dans le seul but de colorer une portion d'un texte. Pour cela, vous utiliserez plutôt le CSS.
Il est souvent utilisé dans une citation. (pour indiquer une citation, nous verrons que l'on peut utiliser l'élément « blockquote » dans un autre article.)
Attention, « mark » n'est pas forcément compris par les lecteurs d'écran. (problème d'accessibilité.)
Voici un exemple de code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content=" Votre description" />
<meta name="robots" content="index" />
<meta name="author" content="nom de l’auteur" />
<title>La mise en forme des textes</title>
</head>
<body>
<h1>L'élément HTML « mark »</h1>
<p>Voici mon texte mis en surbrillance par <mark>l'élément « mark ».</mark></p>
</body>
</html>
Nous verrons le CSS dans d'autres articles, mais sachez que l'on peut modifier la forme et la couleur de la surbrillance :
mark{
display: inline-block;
padding: 3px;
background-color: orange;
border-radius: 4px;
}
Ce code permet d'indiquer que nous souhaitons que tous les éléments « mark » soit sur fond orange et non-jaune, qu'il y ait une petite marge autour du texte, et que les bords de la surbrillance soit légèrement arrondis.
L'élément pour mettre en gras
Il existe plusieurs éléments qui font visuellement la même chose, mettre en gras un texte, mais qui n'ont pas exactement la même importance.
On peut décider de mettre du texte en gras pour attirer visuellement l'attention du lecteur et dans ce cas, on va utiliser l'élément « b ». Cependant, on a de plus en plus recours à la balise « strong » : on écrit souvent un texte en gras pour mettre l'accent sur ce texte ou sur ce mot. Or, la balise « strong » est sémantiquement plus forte que la balise « b » alors que l'effet visuel sera identique. Elle est, en plus, comprise et utilisée par les moteurs de recherche.
Depuis la version HTML 4, si on veut juste mettre en gras un texte sans véritable raison sémantique mais juste pour faire joli, il vaut mieux recourir au CSS (font-weight.) Le CSS sera, par exemple, utilisé pour mettre en gras les titres d'un tableau plutôt que d'utiliser la balise « b ».
Alors, est-ce que la balise « b » est encore utile ? Oui, lorsqu'on ne veut pas donner de l'importance à un mot tout en le voulant quand même en gras et lorsque l'utilisation du CSS n'est pas nécessaire.
La syntaxe [HTML - La syntaxe](https://eridiane.fr/html-la-syntaxe) est la suivante :
<body>
<p>Voici un texte qui est écrit <b>en gras avec la balise « b »</b></p>
<p>Et voici un texte qui utilise la balise <strong>« strong » pour mettre aussi du texte en gras.</strong></p>
</body>
Ne pas mettre de titre en gras avec ces éléments, car pour les moteurs de recherche, les titres sont déjà d'une plus grande importance que les paragraphes. Cela n'a pas d'intérêt sémantiquement parlant.
Les éléments pour mettre en italique
Il existe dans ce cas deux balises possibles : « i » et « em ».
Nous allons nous retrouver avec le même dilemme qu'avec les balises « b » et « strong » : « em » a un sens sémantique, pas « i ». Je conseille donc d'utiliser « em » pour les mêmes raisons que pour la balise « strong ».
La balise « em » indique l'emphase. Cela peut être un texte écrit dans une autre langue, une définition, un terme technique ou des pensées... Le texte sous emphase a moins d'importance que le texte avec la balise « strong ».
Nous pouvons remplacer la balise « i » par du CSS avec l'élément « font-style » qui possède deux attributs possibles :
- italic : le texte va être penché en utilisant moins d'espace horizontal.
- oblique : le texte sera penché, mais en gardant le même espace horizontal que la forme normal.
Cependant, on ne voit pas toujours de différence entre les deux.
<body>
<p>Maintenant, testons <em>avec l'emphase</em></p>
<p>Et avec <i>l'italique</i></p>
</body>
La balise « em » a aussi une petite particularité : elle peut être imbriquée, c'est-à-dire que l'on peut mettre des emphases dans des emphases...
Le soulignement
Il s'agit de la balise « u ». On ne l'utilise plus pour simplement souligner, mais pour indiquer des erreurs d'orthographe ou de grammaire, voire pour certaines langues étrangères comme le chinois. Dans la plupart des cas, elle peut être remplacée par l'emphase, la mise en gras, ou la surbrillance. Si on veut quand même utiliser le soulignement, on va utiliser le CSS (text-decoration : underline.)
Texte barré
On va utiliser du texte barré pour indiquer quelque chose d'obsolète.
<p>Voici un texte qui <s>n'est plus valable</s></p>
Pour d'autres raisons, on va utiliser le CSS (text-decoration: line-through).
Et le CSS dans tout cela ?
Il faut bien faire la différence entre le HTML et le CSS. Le HTML est un langage de balisage qui donne une sémantique à votre contenu. Le CSS est là pour mettre du style à votre page. Donc, surtout depuis HTML 4 et 5, il vaut mieux indiquer l'importance du texte avec le HTML (strong et em) et laisser le style du texte au CSS (gras et italique.)
Nous n'avons pas encore vu la balise « span » (ni le CSS), mais disons, pour faire court, qu'elle permet de relier le style (CSS) à une balise (HTML).
Pour qu'un texte que nous voulons en gras soit le plus respectueux des conventions HTML et CSS, nous devrions mettre en gras de cette façon :
<body>
<p>Pour mettre un texte en gras en respectant <span style="font-weight: bold"><strong>la sémantique</strong>
</span> du HTML et <span style="font-weight: bold"><strong>le style du CSS</strong></span></p>
</body>
Et mettre en italique de cette manière :
<body>
<p>
Pour mettre un texte en italique en respectant <span style ="font-style: italic" ><em>la sémantique</em>
</span> du HTML et <span style="font-style: italic"><em>le style du CSS</em></span>
</p>
</body>
Oui, bien sûr, c'est plus long à écrire, mais c'est plus parlant pour les moteurs de recherche. Et de toute façon, avec l'auto-complétion de votre éditeur de code, ce n'est plus vraiment une excuse...
Nous pouvons aussi, et c'est recommandé, utiliser une feuille de style plutôt que l'attribut « style ».
Abréviation et citation
J'ai placé ces balises dans cet article, car elles ont une mise en page particulière que nous allons explorer.
Abréviation
Nous allons pouvoir indiquer aux moteurs de recherche et aux lecteurs qu'un mot est une abréviation, et on pourra indiquer le mot ou l'ensemble de mots auxquels ils se rapportent. Cette balise n'est pas obligatoire, mais elle apporte des informations sémantiques supplémentaires au texte.
Voici comment écrire cette balise :
<p>Voici une abréviation : <abbr>Afup</abbr></p>
Dans ce cas, on va avoir une information sémantique : les moteurs de recherche et les bots vont savoir que « Afup » est une abréviation. Et vos lecteurs, on les oublie ? Mais non voyons ! On peut rajouter un attribut, qui n'est pas obligatoire, mais qui va donner des informations supplémentaires. Il s'agit de « title ».
<p>Voici une abréviation : <abbr title="Association française des utilisateurs de PHP">Afup</abbr></p>
Chaque navigateur internet peut représenter cette balise de façon différente. Sur Firefox, on ne voit rien de spécial, sauf si vous rajoutez l'attribut « title ». Là, le contenu entre la balise, va être souligné en pointillé, et lorsque vous passez votre souris dessus, une info-bulle contenant le texte de l'attribut va apparaître.
Citation
Il arrive souvent dans un texte que l'on veuille citer une personne, un article, etc. Pour cela, il existe la balise « blockquote ». Le texte sera normalement écrit avec une indentation par votre explorateur internet. (c'est le cas avec Firefox.)
Si vous voulez en plus indiquer un lien vers un site d'où provient cette citation, vous allez rajouter l'attribut « cite ».
<blockquote cite="https://eridiane.fr/comment-creer-son-site-internet">
Vous trouverez sur ce site des articles vous permettant de créer un site internet dynamique. Nous commencerons bien sûr par le HTML.
</blockquote>
Mais attention, l'attribut « cite » est à destination des moteurs de recherche et cela n'apparaîtra pas pour vos lecteurs. Pour qu'un lien soit visible ou pour indiquer le nom de l'auteur de la citation, vous allez devoir ajouter la balise « cite ».
Lorsque l'on fait une citation courte, compris dans un texte, on va plutôt utiliser la balise « q ».
<p>Sandy qui semble avoir appris le langage PHP, <q cite="https://eridiane.fr/comment-creer-son-site-internet">Le langage que j'utilise est le PHP.</q> semble aussi aimer le HTML et le CSS.</p>
Sur Firefox, le texte va être entouré de guillemets.
Les guillemets à la française ou à l'anglaise :
Si vous mettez la balise html avec l'attribut lang égal à « fr », vous aurez des guillemets à la française, mais si vous mettez le contenu de cette balise en « en », vos lecteurs verront des guillemets à l'anglaise. Guillemet — Wikipédia
La balise Cite
Cette balise permet d'indiquer l'auteur d'une citation.
<blockquote cite="https://eridiane.fr/comment-creer-son-site-internet">
<p>
Vous trouverez sur ce site des articles vous permettant de créer un site internet dynamique. Nous commencerons bien sûr par le HTML.
</p>
<cite>Sandy Taillan, Eridiane </cite>
</blockquote>
Comme vous pouvez le constater, le texte compris dans la balise « cite » sera écrit différemment. (Sur Firefox, le texte est en italique.)
Elle peut aussi contenir un lien vers une URL, mais dans ce cas, il faudra ajouter une balise « a » imbriquée dans la balise « cite ».
<blockquote cite="https://eridiane.fr/comment-creer-son-site-internet">
<p>
Vous trouverez sur ce site des articles vous permettant de créer un site internet dynamique. Nous commencerons bien sûr par le HTML.
</p>
<cite>Sandy Taillan, Eridiane </cite>
</blockquote
Vous remarquerez que j'ai écrit le code avec des indentations pour que cela soit plus lisible, mais qu'en plus, j'ai écrit certaines balises ouvrantes sur une ligne et sa balise fermante sur une autre ligne.
D'autres balises de mises en forme
Il existe d'autres balises de mise en forme, mais elles sont beaucoup moins utilisées, car elles répondent à des besoins spécifiques.
Cela va être par exemple, ins (inserted), del (deleted) : la première indique qu'un élément a été ajouté au texte, et la seconde, indique qu'un élément a été retiré du texte.
On peut aussi mettre en indices avec « sub », ou mettre en exposant avec « sup ».
Voilà, j'espère avoir un peu démystifier l'utilisation des balises de mise en forme du texte.
Ajouter un commentaire :
Publicité
Thèmes abordés:
Publicité
Les commentaires
Il n'y a pas encore de commentaire, mais cela ne serait tarder ...