Les balises de structuration du texte
Il existe plusieurs balises pour insérer du texte. Tout dépend de la signification de chacune des différentes parties du texte que l’on veut faire figurer dans la page, de ce que l’on appelle leur « valeur sémantique » — s’il s’agit par exemple d’un titre ou d’un intertitre (titre de deuxième, voire de troisième niveau) ou encore d’un paragraphe.
Dans chacun des cas, il faudra utiliser une balise différente et bien respecter leur hiérarchie : on utilisera un balise <p> pour un paragraphe, une balise <h1> pour un titre de premier niveau, une balise <h2> pour un titre de deuxième niveau — jusqu’à la balise <h6> (titre de sixième niveau). Il y a encore d’autres balises pour le texte, comme celles utilisées pour créer :
- des listes à puces (balises <ul> et <li>)
- des listes numérotées (<ol> et <li>)
- des listes de descriptions (<dl>, <dt>, <dd>)
- des définitions (<dfn>)
- des tableaux (<table>, <tr>, <td>)
- des citations (<q> et <cite>)...
Exemple de code source avec du texte
Nous nous contenterons dans un premier temps de te montrer un exemple de code source de page HTML avec les balises <p> et <h1> à <h3>, qui sont sans doute les plus importantes pour le texte.
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Titre de la page s’affichant en haut du navigateur</title>
</head>
<body>
<h1>Titre principal s’affichant dans la page</h1>
<div>
<h2>Titre de deuxième niveau</h2>
<p>paragraphe de texte</p>
<p>paragraphe de texte</p>
<h3>Titre de troisième niveau</h3>
<p>paragraphe de texte</p>
</div>
<div>
<h2>Titre de deuxième niveau</h2>
<p>paragraphe de texte</p>
<p>paragraphe de texte</p>
</div>
</body>
</html>
Respecter la « hiérarchie sémantique » du HTML
Lorsque l’on crée une page HTML, il est très important de bien choisir les balises que l’on va utiliser pour insérer du texte, selon le sens et la fonction du texte dans la page. On a vu qu’il faut ainsi utiliser des balises différentes si l’on veut insérer le titre principal de la page (<h1>), des sous-titres de deuxième niveau (<h2>), des sous-titres de troisième niveau (<h3>) ou des paragraphes (<p>). Et il est très important de respecter la hiérarchie entre les balises. Il faut commencer par un titre principal avec la balise <h1> et ne pas passer directement à l’emploi d’une balise <h3> pour un titre de deuxième niveau, mais bien procéder dans l’ordre en utilisant préalablement une balise <h2>.
Respecter cette hiérarchie sémantique est important pour plusieurs raisons :
- D’abord, cela permet d’ordonner le texte selon une structure claire qui facilite la lecture sur écran.
- Ensuite, cela améliore également le référencement de la page.
Sémantique HTML et référencement
On appelle référencement l’ensemble des techniques à mettre en œuvre pour voir sa page web apparaître dans les premiers résultats des moteurs de recherche (comme Google, Bing ou Yahoo) sur le maximum de requêtes saisies par les internautes dans ces moteurs de recherche. Comme ceux-ci sont énormément employés aujourd’hui pour faire des recherches sur le Web, avoir ses pages HTML qui figurent parmi les premiers résultats qui s’affichent lors des recherches faites sur Google, Bing ou Yahoo est primordial pour qu’elles soient consultées par des internautes.
Pourquoi tel site apparaît avant tel autre dans la liste des résultats lorsque tu recherches quelque chose dans Google ? Comment Google classe-t-il les pages HTML pour décider laquelle apparaîtra en premier dans ses résultats de recherche ? À vrai dire, c’est un peu mystérieux car l’entreprise Google garde secrète une partie de la réponse. Certains critères sont néanmoins connus. On sait notamment que le nombre de liens pointant sur une page a une grande incidence. Mais l’on sait aussi que les robots de Google qui indexent et classent les pages web mettront davantage en avant celles qu’ils jugeront « bien écrites », et, pour un robot, une page bien écrite est une page structurée dans le respect de la sémantique HTML...
Aussi, une page HTML donnée sera davantage mise en avant par Google sur une expression ou un mot recherchés plutôt que sur d’autres.Telle page remonte dans les premiers résultats de Google lorsque l’on tape un mot dans ce moteur de recherche, et à la dernière page des résultats lorsque l’on tape un autre mot, même si ces deux mots sont tous les deux bien présents dans la page. Là aussi, avoir conscience de la valeur sémantique des balises que l’on emploie pour coder une page HTML est important, car dans ses calculs de classement, Google donnera par exemple un poids supérieur aux mots présents dans les titres (et donc encadrés par des balises <h1> à <h6>) et un poids inférieur aux mots présents dans le corps du texte (balises <p>).
HTML5 et sémantique
La dimension sémantique du HTML est donc fondamentale et celle-ci est même amenée à se renforcer. Comme nous l’avons vu, le HTML évolue et le HTML5 apporte de nouvelles balises pour structurer la page web selon la valeur sémantique de ses éléments. À la balise <div>, conteneur de base neutre sémantiquement, viennent se substituer toute une série de balises pour distinguer les éléments d’une page web selon leur sens et leur fonction dans la page. Là où auparavant on utilisait indifféremment la balise <div> pour délimiter par exemple un menu, un en-tête ou un pied de page, on emploiera à présent respectivement les balises <nav>, <header> et <footer>.