Structurer le texte
Introduction
Bonjour, dans ce cours nous allons voir les balises utiles afin de structurer le texte. Si les balises d’architecture, vues dans le cours précédent, servent à donner un sens au contenu, à créer « un bloc de contenu », les balises suivantes servent quant à elles à donner des caractéristiques plus précises. Nous allons donc voir successivement ici les paragraphes, les titres et les listes. Enfin nous verront comment mettre en valeur certains mots ou groupe de mots dans un texte.
1-Les paragraphes
90% du temps lorsque l’on écrit du texte pour une page Web, on le fait à l’intérieur de paragraphes. Les paragraphes sont la base d’une bonne structuration pour le texte d’une page, que ce soit en Web ou ailleurs. En html donc, on utilise le tag p afin d’écrire le paragraphe.
C’est une balise de type block, il y a donc un retour à la ligne avant <p> et après </p>. Mais si on souhaite revenir à la ligne au sein du paragraphe, il faudra alors utiliser la balise <br> que nous avons déjà vue dans un cours précédent. Pour compléter, je dois ajouter deux choses sur cette balise dans le but d’optimiser votre code :
- Évitez d’utiliser le retour à la ligne plusieurs fois de suite, cela se voit fréquemment pour sauter une ligne, dans ce cas, il vaut mieux fermer son paragraphe puis en rouvrir un autre.
- Mettez votre retour à la ligne à l’intérieur de l’élément p.
Si vous avez plus de choses à faire pour la mise en page de votre paragraphe, décaler le texte avec plus de précision, faire une marge intérieur etc, nous utiliserons le CSS que nous verrons dans les cours un peu plus tard.
2-Les titres
Quand le contenu de votre page va s’élargir et que vous aurez de nombreux paragraphes, il va être nécessaire, (à la fois, pour que votre lecteur se repère, mais aussi pour le bon référencement de votre site) d’utiliser les titres et des sous-titres.
En HTML nous sommes gâtés, il existe en effet 6 niveaux de titre, donc 6 balises différentes:
- h1 : titre très important, on s’en sert principalement pour désigner le titre de la page. Je recommande de ne l’utiliser qu’une fois par page, toujours par soucis d’optimiser votre référencement
- h2 : titre important
- h3 : titre un peu moins important, c’est celui-ci que j’utilise pour les sous-titres de mes articles
- h4 : titre peu important
- h5 : titre pas important
- h6 : titre vraiment pas important du tout
Plus concrètement, les 3 derniers niveaux sont peu utilisés voire très peu. Pour ma part je n’utilise que les balises h1 h2 h3. Par défaut, ces balises ont une taille dégressive, ainsi h1 affichera un très gros titre, h2 un plus petit h3 encore plus petit et ainsi de suite comme vous le voyez ci-dessous :
La grosse erreur à éviter est de choisir la balise en fonction de la mise en page qu’elle applique au texte (on retrouve des paragraphes dans du h5 ou h6), c’est à proscrire absolument, la mise en page doit se faire avec le CSS. Enfin, encore par soucis d’optimisation, il faut structurer la page avec logique, en commençant par un titre de niveau 1 puis de niveau 2… Il ne doit pas y avoir de sous-titres sans titre principal !
Attention aussi de ne pas les confondre avec la balise title qui affiche elle le titre de votre page et doit se situer dans le head de celle-ci avec ces balises.
3-Les listes
Les listes permettent d’ordonner des informations et de les donner successivement au lecteur. Nous allons voir ici deux types de listes : les listes ordonnées, pour lesquelles l’ordre des éléments a de l’importance, et les listes non-ordonnées.
Les listes non-ordonnées seront contenues dans un élément de tag ul (unorder list). Les ordonnées le seront avec le tag ol (order list). Dans les deux cas, chacun des éléments de ces listes sera défini par la balise li. Voyez ci-dessous les exemples du code html avec leur rendu :
4-Les tags de mises en valeur
Lorsque vous écrivez du contenu, vous pouvez parfois avoir besoin de faire ressortir l’importance d’un mot ou plusieurs. Pour cela, on va utiliser principalement 3 balises. Tout d’abord la balise em, qui va mettre en italique le contenu de son élément. Ensuite, il y a la balise strong, elle va faire apparaître le contenu en gras. Et enfin la balise mark, qui va donner une couleur de fond à son élément. Par défaut, cette couleur sera le jaune mais c’est modifiable nous le verrons en CSS.
Il est important de comprendre que ces 3 éléments donnent un sens à votre contenu. Que ce n’est pas seulement un rendu visuel. En effet, toujours pour le référencement de votre site, les mots contenus dans ces balises vont avoir bien plus de poids pour les moteurs de recherche. Évidemment, cela ne veut pas dire qu’il faut en utiliser à outrance, mais il est bon de s’en servir de temps en temps dans vos pages. Enfin si vous désirez mettre en valeur un mot ou plus sans que ça n’impacte votre référencement, vous pouvez utiliser la balise b pour mettre en gras, i pour l’italique et u pour souligner.
Conclusion
Nous avons vu ici les balises les plus importantes pour structurer le texte et mettre en valeur un mot ou un groupe de mots. Ce seront des éléments très forts pour le référencement des pages de votre site. J’insiste bien sur ce point, le référencement est un facteur de réussite majeur pour un site Web. D’où l’importance d’utiliser les bonnes balises pour le bon contenu. C’est donc aussi pour cela que nous éviterons au maximum de polluer le fichier html avec du langage en CSS.
