Publié le 24 juillet 2019

C’est un fait paraissant évident pour tout développeur web, mais pourquoi certains se permettent encore l’usage des balises comme <h4> ou <strong> pour mettre en page leur code ? Studio218 mène l’enquête.

Ah, les balises HTML. On aimerait pouvoir en faire ce que l’on veut, mais malheureusement le W3C en a décidé autrement. S’il fait partie des rudiments du développeur de savoir que les tags ne servent pas l’esthétique, mais la structure, il est encore monnaie courante de les trouver parfois ici et là.

Un <h4> placé ici, car le texte d’un <h4> est plus petit que celui d’un <h2>, alors que c’est pourtant un <h2> qu’il faudrait, ou encore une balise <em> simplement pour pouvoir mettre en italique un texte, alors que celle-ci sert à mettre en emphase un extrait… Les tentations sont multiples !

Bien entendu, cela échappe à ceux qui découvrent les joies du code, en ne les en blâmons pas. Cet article est là pour rappeler les rudiments SEO, qui ont impact si petit soit-il, sur le positionnement et le PageRank de votre site.

À quoi servent les principales balises HTML ?

Les balises HTML servent fondamentalement à indiquer la fonction du contenu qu’elles encadrent. En d’autres termes, elles définissent la structure et le format du contenu d’une page web. Une balise commence toujours par « < » et se termine par « > ». 

Les balises HTML permettent de rendre votre page plus lisible pour les crawlers qui viendront vous visiter. Même si Google n’analyse pas que cela, il est indispensable d’avoir cette base qui permettra une structure claire et facilement décryptable. On oublie alors les <h1> suivis d’un <h3> parce que “c’est plus sympa comme ça”. C’est, dans la logique des choses : <h1><h2><h3>, etc. ! Personnalisez ainsi leur mise en forme en CSS, il est là pour ça.

Le propos est le même pour les balises de type <strong><em> ou encore <b>. Il est important de bien faire le distinguo entre chacune d’entre-elles. Par exemple, quelle est la différence fondamentale entre un <b> et un <strong> ? C’est tout simplement l’interprétation. En effet, Google n’interprètera pas une balise <b> comme une balise <strong> :

  • <strong> met en valeur le texte, car il est important à la compréhension.
  • <b> met juste le texte en gras.

Ainsi, ne mettez en <strong> que les éléments que vous considérez comme important. Si vous souhaitez mettre des parties de votre texte ou de votre structure en gras par pur intérêt visuel, préférez la balise <b> ! L’exercice est le même avec le tag <em> et <i>.

Un exemple de bonne structure de titres par STUDIO218

Un exemple de structure correcte.

Quelles sont les balises HTML les plus courantes ?

Il existe de nombreuses balises HTML. En revanche, vous n’aurez pas toujours affaire à elles. Cela dépend en réalité de l’organisation de votre démarche. Si vous ne gérez pas l’intégration du contenu sur votre site web, seules les balises titres vous intéressent. En revanche, si vous accompagnez le processus de production de contenus de A à Z, vous pourrez avoir l’utilité de ces balises HTML :

  • HTML : indique le début et la fin de la page HTML
  • head : contient des informations sur la page, telles que le titre (affiché dans l’onglet du navigateur) et les balises méta
  • body : contient le contenu visible de la page
  • h1 à h6 : les balises de titre utilisées pour les titres et les sous-titres
  • p : balise de paragraphe utilisée pour marquer le contenu de texte
  • a : balise de lien utilisée pour créer des liens vers d’autres pages ou des URL
  • img : balise utilisée pour afficher des images
  • ul : balise de liste à puces
  • ol : balise de liste numérotée
  • li : balise d’élément de liste utilisée pour marquer chaque élément d’une liste
  • div : balise de division utilisée pour organiser le contenu en groupes logiques
  • span : balise utilisée pour marquer un petit morceau de texte pour une mise en forme spécifique.

Il existe de nombreuses autres balises HTML, comme <form> pour les formulaires, <table> pour les tableaux, <header> pour l’en-tête, <footer> pour le pied de page, etc. Mais celles-ci sont considérées comme les plus importantes pour la mise en forme de base d’une page web.

Les balises HTML sont-elles toujours nécessaires ?

Au risque de vous surprendre : la réponse est oui. Une structure HTML bien pensée et réfléchie, c’est l’assurance de gagner en PageRank. De la même manière que lorsque l’on construit une maison, il faut que les fondations soient solides. Sans elles, le reste est compromis.

Même si de premier abord, ce ne sont pas quelques balises placées avec peu de considération qui vont sensiblement vous faire remonter, ce sera les positionner de manière réfléchie et structurée les unes après les autres qui feront que le tout changera la donne. Ainsi, lorsque vous pensez votre page web, pensez structure et sémantique :

  • Quelle est ma structure de titre ?
  • Quels sont les éléments importants à mettre en emphase ?
  • Que dois-je mettre en gras, ou en important ?

Toutes ces questions et bien d’autres à garder à l’esprit lorsque vous codez.

Mais qu’en est-il de WordPress ou des CMS alors ? Eux qui ont des thèmes préexistants et qui ne laissent que très peu la main sur la structure ? Faites au mieux. Parfois, certains builders tels que WP Bakery ou Elementor vous permettront de choisir quelle balise mettre pour les titres et les intertitres. Utilisez-les à votre avantage.

Voilà le laïus de STUDIO218 pour les jeunes développeurs qui nous liraient ici. Nous mettons du coeur à l’ouvrage dans nos productions et pour nos clients, et ce, dans les moindres détails, si infimes soient-ils !