Qu’est-ce que le langage HTML et à quoi ça sert ?

You are currently viewing Qu’est-ce que le langage HTML et à quoi ça sert ?

Le HTML est un langage informatique que l’on utilise pour créer des pages web. Il est utile pour mettre en forme votre texte et également pour améliorer votre SEO. Vous êtes propriétaire d’un site Internet, rédacteur web ou futur développeur ? Cet article va vous permettre de comprendre ce qu’est concrètement le langage HTML et à quoi il sert !

Sommaire : 

  1. Définition du langage HTML
  2. Pourquoi en a-t-on besoin ?
  3. HTML et HTML5, quelle différence ?
  4. À quoi ça ressemble ?
  5. La structure d’une page HTML
  6. Travailler le HTML pour son SEO
  7. Envie d’apprendre un langage HTML SEO friendly ?

1. Qu’est-ce que le langage HTML ?

Pour la petite info, HTML signifie HyperText Markup Language. C’est un langage de développement informatique qui sert à créer des pages web. 

En effet, le HTML permet de structurer le texte d’une page web. Il existe donc pour chaque page web (et pour chaque URL), un fichier écrit en langage HTML.

Il existe d’autres langages informatiques complémentaires pour créer un site Internet comme le CSS et le JavaScript. 

Pour gérer le design d’une page (couleurs, taille de police), on utilise le langage CSS que l’on gère depuis une feuille de style dédiée et non dans le code HTML de chaque page web. 

Le JavaScript est quant à lui un langage de programmation qui sert à rendre un site web interactif. Il permet par exemple de créer des animations qui se produisent au clic ou au scroll de l’internaute. 

2. Quel est son rôle ?

Pour le moment, il n’est pas possible de mettre en forme une page web en faisant un simple copié-collé d’un texte que vous auriez préparé sur Word. 

Le langage HTML est en effet indispensable pour ajouter des titres, des mots en italique ou tout simplement des sauts à la ligne !

Le travail de retranscription du fichier HTML en page web “normale” pour l’utilisateur, c’est celui du navigateur. 

Pour naviguer sur le web, vous en utilisez forcément un, qu’il s’agisse de Google Chrome, Mozilla Firefox, Safari ou encore de Microsoft Edge (qui a remplacé Internet Explorer). 

Si le HTML est décrypté par les navigateurs, il est également compris par les robots des moteurs de recherche d’où son intérêt en SEO, mais nous y reviendrons plus loin…

3. Langage HTML et HTML5 : quelle différence ?

Le langage HTML a été initialement développé par le W3C dans les années 90. Cet organisme à but non lucratif émet des recommandations aux développeurs. Leur objectif est d’offrir à tous les internautes des points de repère valables d’un site à l’autre. Un exemple : le soulignement des liens cliquables. 

Le HTML5 également développé par le W3C et par la WhatWG Community n’est autre que sa mise à jour la plus récente. Elle est sortie en 2014. 

Par rapport à sa version précédente, le HTML5 est mieux compris par les robots grâce à des balises dites sémantiques. L’intégration de médias (audio, vidéo ou animation) est également facilitée et il rend possible le glisser-déposer de nombreux éléments d’une page web. Cette fonction intuitive et ludique est très appréciée des utilisateurs. 

4. À quoi ressemble le HTML ?

Si vous vous demandez à quoi ressemble le langage HTML, rendez-vous sur n’importe quelle page de n’importe quel site Internet. 

En faisant un clic droit, vous pourrez sélectionner la ligne “afficher le code source de la page” dans la fenêtre qui apparaît. 

Extrait du code source d'une page web avec mise en avant du langage HTML
Code source d’une page web avec langage HTML

Des balises identifiables par des crochets

Une fois que cela est fait, vous verrez apparaître la page en HTML. Elle comporte du texte brut que vous pouvez comprendre et des balises HTML facilement identifiables grâce aux chevrons ou crochets qui les composent. 

Une balise HTML contient au minimum :

  • Un chevron ou crochet oblique qui marque son ouverture <
  • le nom de la balise comme “h1” pour marquer le titre principal, “p” pour un paragraphe…
  • un chevron > pour fermer la balise
Exemple de titre avec balise h1
Titre de cet article en langage HTML

Un attribut peut aussi être présent. Une balise image doit par exemple être enrichie d’un attribut src qui permet de retrouver sa source ou son emplacement et donc de l’intégrer.

Balise image avec attrribut src
Balise image avec attribut src

Un fonctionnement par paire

Presque toutes les balises HTML fonctionnent par paire. Il existe donc une balise d’ouverture identifiable par le nom de la balise entredeux cochets et une balise de fermeture qui comporte les mêmes symboles avec en plus, un slash.

Le changement demandé comme la mise en gras d’un mot ou sa conversion en lien hypertexte cliquable s’applique si le mot est bien présent entre une balise ouvrante et une balise fermante.

Exception : il existe 2 balises orphelines, qui ne fonctionnent pas par deux :  la balise br qui sert au saut de ligne et la balise img qui sert à intégrer une image. 

5. Comment est structurée une page HTML ?

Pour écrire un article, une landing page, ou encore une fiche produit en langage HTML, il faut ajouter à votre texte des balises appropriées et intégrer le tout au bon endroit. 

Ce n’est pas nécessairement une mince affaire lorsque l’on débute puisque de nombreux éléments qui ne concernent pas le texte sont présents dans le code source d’une page web. 

Voici donc trois balises à connaître pour vous repérer plus facilement dans un fichier HTML. 

L’indispensable balise HTML

Vous retrouvez la balise dès le début, car elle marque le commencement d’une page web. La balise HTML fermante (avec un slash) permet de terminer la page web. Elle se situe à la toute fin du code. 

La balise head pour les métadonnées

Elle contient entre autres, la balise title et la balise meta description qui sont visibles non pas sur votre page mais dans les résultats de Google. Le title est le titre de votre page, la meta description est un texte d’une ligne ou deux qui doit décrire le contenu et inciter au clic !

La balise body pour le texte !

C’est ici que doit se trouver votre texte, entre les balises < body >. Cela inclut votre titre, votre accroche, vos paragraphes, mais également le header et le footer.

6. Quel est l’intérêt du HTML en SEO ?

Si entourer certains mots de balises HTML modifie leur apparence visuelle (mise en gras, en italique, sous forme de liste à puces…), l’intérêt du langage HTML n’est pas simplement esthétique. 

Il sert surtout à indiquer l’importance de certains mots. Il permet notamment aux robots des moteurs de recherche d’identifier les titres et les sous-titres d’un texte. L’enchaînement et la hiérarchisation des idées sont donc plus clairs grâce à lui. 

Sans le HTML, les robots liraient simplement une longue liste de mots qu’ils seraient incapables d’analyser, car ils ne peuvent pas comprendre votre texte comme le ferait un être humain !

Attention : maîtriser le langage HTML ne vous garantit pas d’être premier sur Google sur tel ou tel mot-clé. Ce n’est pas le seul critère à prendre en compte, mais c’est un critère indispensable.  

D’autres techniques de référencement naturel utilisées conjointement vous aideront à améliorer votre classement sur les pages de résultats des moteurs de recherches. Elles sont très diverses et nous ne les développerons pas ici. Toutefois, voici quelques exemples afin de vous donner une petite idée : 

  • s’assurer que votre page ne bloque pas l’accès aux robots, 
  • concevoir le site de façon à ce qu’il soit adapté aux mobiles, 
  • créer un réseau de liens internes et externes, 
  • bien choisir ses mots-clés, 
  • remplacer le contenu dupliqué par un contenu unique…

7. Apprendre le langage HTML SEO friendly

Vous voulez savoir quelles balises HTML utiliser pour optimiser votre contenu ? Je vous invite à lire l’article sur les balises HTML essentielles au SEO .

Il vous aidera à savoir comment utiliser les balises de titres, de sous-titres ou encore s’il faut choisir la balise bold ou strong pour mettre vos mots en caractères gras.

Bien sûr sous WordPress, vous pouvez travailler au format texte sans jamais vous soucier du balisage HTML, mais les titres 1, titres 2 que ce CMS vous propose sont directement des équivalents des balises HTML H1, H2, H3… Pour améliorer votre référencement naturel, il faut donc savoir comment les choisir. 

Et même sur WordPress, un bug de l’éditeur de texte peut survenir, et il est plus facile à corriger quand on “parle” le HTML couramment !

Ingrid Pilard

Consultante SEO et rédactrice web

Laisser un commentaire