Editions ENI Livres | Vidéos | e-Formations
Les conteneurs pour le texte
Les objectifs
Après avoir vu les conteneurs de structure, ce chapitre aborde les conteneurs pour le texte. Comme il a été dit précédemment, l’HTML est sémantique, cela veut donc dire que pour afficher du texte dans une page, il faut utiliser les bons éléments HTML. Chaque élément HTML est fait pour y placer un type de texte précis, afin de concevoir des pages qui soient valides, utilisables et compréhensives par tous.
Ce chapitre va évoquer les principaux contenus de textes, les plus couramment utilisés.
Les attributs usuels
1. L’attribut de langue
Dans toute page web, il est possible de spécifier la langue utilisée avec l’attribut lang. C’est ce qui est à faire dans l’élément <html> pour indiquer la langue utilisée dans l’ensemble de la page. Mais il est parfaitement faisable de faire une exception pour un conteneur de texte précis. Par exemple, il est possible d’indiquer que dans une partie spécifique d’un paragraphe rédigé en français, la langue est de l’italien. Pour cela, il faut utiliser l’élément <span>, avec l’attribut lang.
Dans cet exemple, la page est en français :
<html lang="fr"> Et dans un paragraphe donné, il y a une exception pour indiquer qu’il s’agit d’italien :
<p>Il m'a dit <span lang="it">Ciao a tutti! Come state ?</span> quand nous
nous sommes vus.</p> 2. L’attribut de direction du texte
En plus de la langue, il est possible de spécifier la direction d’écriture avec l’attribut dir. Cet attribut utilise ces trois valeurs :
-
ltr : qui signifie left to right, écriture de gauche à droite, comme le français ou l’italien par exemple.
-
rtl : qui signifie right to left, écriture de droite à gauche, comme l’arabe par exemple.
-
auto...
Les titres
Les éléments de titrage permettent d’insérer six niveaux de titre hiérarchique aux pages. Les éléments à utiliser sont <h1> à <h6>. Ces titres ont une très forte valeur sémantique. Le niveau de titre <h1> est le plus important dans la page et le niveau <h6> est le moins important.
Il est fortement conseillé de les utiliser dans l’ordre descendant : il faut d’abord utiliser un titre de niveau 1, puis, un titre de niveau 2 et ainsi de suite. Il est déconseillé d’omettre un niveau, comme passer de <h1> à <h3>, en omettant le titre <h2>.
Il est aussi recommandé de n’utiliser qu’un seul niveau <h1> par page. Par contre, il est possible utiliser plusieurs fois les mêmes niveaux inférieurs de titre dans des conteneurs diffèrents. Ainsi, il est possible d’avoir un élément <main> avec un titre <h1> qui contient plusieurs éléments <article> ayant chacun un titre <h2>. Puis ailleurs, dans un élément <aside> par exemple, il est possible d’utiliser à nouveau d’autres éléments <h2>.
Dernier point, tous les titres <hx> s’affichent en gras dans les navigateurs, avec la taille la plus grande pour le <h1> et la plus petite pour le <h6>.
Voici...
Les paragraphes
L’élément<p> permet d’insérer du texte courant dans des paragraphes. Comme pour tous les écrits, chaque paragraphe pourra contenir une idée, un concept. Dans chaque paragraphe, il sera possible de mettre en évidence un ou des mots avec des éléments de mise en forme sémantique.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<p>Morbi leo risus, porta ac consectetur...</p>
<p>Nullam quis risus eget urna mollis ornare...</p>
</body>
</html> Voici l’affichage obtenu :
Les citations
Les blocs de citation permettent d’afficher un texte extrait d’une source externe à la page web. C’est l’élément <blockquote> qui est utilisé. L’élément <blockquote> sert de conteneur à d’autres éléments qui peuvent être de tout type : titre, paragraphe, image...
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<h1>Inceptos Consectetur Tristique Bibendum</h1>
<p>Morbi leo risus, porta ac consectetur...</p>
<blockquote>
<h2>Fusce Mattis Ligula Etiam</h2>
<p>Nullam id dolor id nibh...</p>
<img src="gutenberg.jpg" alt="Gutenberg" />
</blockquote>
<p>Nullam quis risus eget...</p>
</body>
</html> Voici l’affichage obtenu :
Les listes
1. Les différents types de liste
Les listes permettent d’insérer des énumérations sémantiques dans vos pages web. Il existe trois types de liste disponibles : les listes non ordonnées (plus communément appelées listes à puces), les listes ordonnées (listes numérotées) et les listes de définitions.
Il est très courant d’utiliser des listes pour créer des barres de navigation. C’est une utilisation parfaitement valide puisque ces barres sont des énumérations, des listes de liens.
2. Les listes non ordonnées
Les listes non ordonnées (unordered list en anglais) permettent de lister, d’énumérer des données qui s’afficheront avec une puce devant chaque élément de la liste. C’est l’élément <ul> qui est utilisé pour définir la liste. Ensuite, chaque élément, chaque item de la liste, sera placé dans un élément <li>.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<ul>
...Les adresses
Il n’est pas rare d’avoir besoin d’insérer des adresses en tout genre dans vos pages web. Pour cela, il faut utiliser l’élément <address> qui est dédié à cet usage. Tout type d’adresse peuvent y être insérées : des adresses postales, des adresses mail, etc. Il est possible d’imbriquer d’autres conteneurs dans l’élément <address>, afin d’obtenir un affichage attrayant.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<p>Voici nos coordonnées :</p>
<address>
<p>Agence Be Web</br>
12 rue Tim Berners Lee<br>
44000 NANTES
</p>
<p>Sur LinkedIn : <a href="https://linkedin.com/beweb/">Be Web</a>.</p>
</address>
</body> ...Le texte préformaté
Le texte préformaté, inséré avec l’élément <pre>, permet d’afficher du texte qui sera mis en forme avec les conventions typographiques usuelles et non pas avec des éléments HTML. Cela veut dire que les espaces seront conservés, comme les marques de tabulation, et le texte sera usuellement affiché avec une police de caractères à espace constant, de type Courier.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<p>Voici nos données :</p>
<pre>
Janvier Février Mars
123 134 154
245 276 287
190 213 267
</pre>
<p>Donec ullamcorper nulla non metus auctor...Les liens
1. La structure des liens
Par essence même, le Web est constitué de liens hypertextes : les pages sont reliées par des liens hypertextes. L’insertion d’un lien se fait avec l’élément<a> (a pour anchor en anglais). Cet élément possède plusieurs attributs :
-
href est indispensable, il permet d’indiquer l’URL à atteindre.
-
hreflang peut spécifier la langue de la cible. Les valeurs peuvent être par exemple en, it, es…
-
rel permet d’indiquer le type de relation du lien qui est établi.
-
target donne le contexte d’ouverture du lien dans le navigateur.
Voici la structure minimale d’un lien :
<a href="inscription.html">Inscrivez-vous</a> Voilà le détail de cette structure :
-
La balise d’ouverture <a>.
-
La référence du lien, href, est ici une page du même site, inscription.html.
-
Le contenu du lien est Inscrivez-vous. Cela correspond au texte sur lequel les visiteurs devront cliquer pour activer le lien.
-
La balise de fermeture </a>.
2. Les liens vers des pages
Les liens insérés peuvent avoir plusieurs destinations possibles. Ils peuvent cibler une page du site en cours ou une page d’un autre site. Dans le premier cas, l’URL pourra être relative, dans le second, l’URL devra être absolue.
Une URL relative se crée par rapport à la page qui contient le lien. Voici quelques exemples :
-
La page ciblée se trouve dans le même dossier que la page contenant le lien :
<a href="inscription.html">Inscrivez-vous</a> -
La page ciblée se trouve dans un sous-dossier par rapport à la page contenant le lien :
<a href="utilisateurs/inscription.html">Inscrivez-vous</a> -
La page ciblée se trouve dans un dossier parent par rapport à la page contenant le lien :
<a href="../inscription.html">Inscrivez-vous</a> Une URL absolue se crée en indiquant l’adresse complète de la page :
<a href="http://www.le-site.fr/voyages/ venise.html">Venise</a> 3. Les liens internes
Pour une longue page web avec beaucoup de contenu rédactionnel, il peut être très utile pour les visiteurs de créer des liens internes à la page, afin de pouvoir se déplacer...
Les lignes horizontales
L’élément <hr> ne contient pas de texte, mais n’affiche qu’une ligne horizontale qui permet de séparer différentes parties d’un contenu.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
</head>
<body>
<h1>Magna Etiam Parturient Inceptos</h1>
<p>Maecenas faucibus mollis...</p>
<hr>
<p>Sed posuere consectetur est at lobortis...</p>
</body>
</html> Voici l’affichage obtenu :
