Nous sommes à l’ère du numérique où le réseau mondial Internet prend de l’ampleur et le web devient un endroit où tout le monde mène des activités.
Mais, de quoi est constitué le web ? Quel est le langage utilisé pour les services web ?
Plusieurs langages de programmation comme le HTML, le CSS, le JS, le PHP… sont utilisés pour des services web. Dans cet article, nous allons principalement nous concentrer sur le langage HTML.
Quelque soit votre activité (rédacteur web, consultant SEO ou SEA, développeur web…) dans le numérique, vous avez besoin de connaître le langage HTML ainsi que de connaître son fonctionnement et ses fonctionnalités. Justement, c’est pour ça que vous lisez cet article.
Mais avant de continuer, voyons en quelques lignes ce que vous allez gagner à la fin de la lecture de cet article. Vous serez en mesure de :
- donner une définition claire du langage HTML
- comprendre et expliquer la notion de balisage HTML
- parler de la différence entre le HTML et le CSS
Et une chose, je vous réserve une petite surprise à la fin de l’article, restez donc jusqu’à la fin pour ne pas rater.
En informatique, qu’est-ce que le langage HTML ?
.
Le HTML : un peu d’histoire !!
Commençons par une petite histoire du HTML. Promis, je n’ouvrirai pas le grand livre du développement web, juste quelques mots sur le HTML et son évolution 😉
Le langage informatique HTML a été développé en 1990 par un Anglais, Tim Berners-Lee. Depuis ces années jusqu’à aujourd’hui, le HTML a évolué de manière progressive.
En effet, plusieurs versions sont apparues jusqu’à aujourd’hui où nous utilisons le HTML5 (sorti depuis 2014).
On peut donc dire que le langage HTML suit les évolutions du web et s’améliore dans le temps.
Définition du HTML
Le langage HTML, désigné par les anglophones “HyperText Markup Language”, est un langage de structuration d’une page web ou simplement un langage de balisage.
Le HTML n’est pas un langage de programmation. Il permet de donner une arborescence, une hiérarchie aux éléments d’une page web.
C’est un langage utilisé par les développeurs web pour construire les pages d’un site internet. Il permet de donner du sens à chaque élément de la page à travers les balises.
Ce qui permet aux moteurs de recherche de comprendre le contenu des pages d’un site et d’en juger sa pertinence.
Langage informatique HTML : comment fonctionne t-il ?
Le langage HTML est une technologie de création de site internet constitués de composants appelés balises qui permettent de structurer les éléments de la page dans le fichier HTML, pour qu’il soit lu et compris par le navigateur web. Je m’explique 👇👇
Le langage HTML est un langage lu côté Client. C’est-à-dire que c’est le navigateur web qui interprète le code source HTML écrit et retranscrit sous forme visuel à l’internaute.
C’est un langage à travers lequel, on indique au navigateur la hiérarchie des éléments d’une page web ainsi que la signification de chaque élément de la page.
Mais comment ? A travers un système de balises.
Qu’est-ce qu’une balise HTML ?
Le HTML est composé d’une syntaxe simple et rigide reposant sur le concept de balise. C’est un morceau de texte non visible dans le contenu de la page web mais qui permettent de désigner un élément et structurer le contenu.
Autrement, une balise HTML est un composant du langage HTML. Las balises sont par paire, une balise ouvrante (balise de début) et une autre fermante (balise de fin). Elles se construisent suivant la même syntaxe :
- un chevron (<) pour ouvrir
- le nom de l’élément que contient la balise
- un attribut si nécessaire. Les attributs permettent de donner des identifiants aux éléments (cas des « id » et des « class ») ou d’apporter une spécification comme les attributs « alt », « src », … Pour écrire un attribut, on met le nom de l’attribut, suivi d’une égalité (=), accompagnée d’une quote (“) puis la valeur de l’attribut et on ferme. Exemple : (alt=”exemple”)
- un chevron pour fermer (>)
En dehors de la balise d’ouverture, la balise de fermeture reprend la même syntaxe sauf qu’à la fin, on utilise un slash (/) avant de mettre le nom de l’élément de la balise. Exemple :
<h2>exemple de titre de niveau 2</h2>Cependant, il existe également des balises appelées balises autofermantes ou balises vides, qui n’ont pas de contenus. Voyons un exemple :
<img src=”source de l’image” />Il existe plusieurs balises HTML permettant de donner du sens à chaque élément de la page. A titre d’exemple, nous avons des balises pour les textes, les images, les liens hypertextes, les ancres, les listes, les tableaux, etc.
Le navigateur lit les balises et affiche le résultat correspondant sous forme graphique, lisible par les internautes.
Comprenez donc qu’un site web est un ensemble de fichiers écrits sous un langage comme le HTML, qui est interprété par le navigateur et affiché par la suite à l’internaute.
Quels sont les types de balises que vous pouvez rencontrer ?
Il existe de nombreuses balises HTML depuis sa normalisation jusqu’à nos jours. Mais en effet, chaque balise appartient à une catégorie de balises données. Je vous présente ici quelques balises HTML que vous pourrez rencontrer généralement.
N’hésitez pas surtout à pousser votre recherche pour en découvrir plus. Vous trouverez plusieurs tutoriels ou contenus explicatifs en ligne qui vous aideront.
1. Les balises de premier niveau
Ce sont des balises qui permettent d’indiquer aux moteurs de recherche qu’il s’agit d’un fichier HTML. Nous avons :
- <html> … </html> : la page elle-même, le plus grand niveau dans la hiérarchie HTML
- <head> … </head> : en tête de la page
- <body> … </head> : corps de la page
2. Les balises d’en tête
- <title> … </title> : le contenu qui apparaît en couleur bleue sur la page de classement des moteurs de recherche. Les balises title sont indispensables pour un bon référencement du site.
- <meta /> : le mot meta vient de l’abréviation de métadonnées. Les balises meta permettent d’indiquer aux moteurs de recherche le contenu de votre page web. Il y a les balises meta description, meta keywords, meta author, etc.
- <link /> : liaison avec une source externe
- <style> … </style> : liaison avec une feuille de style externe CSS
- <script> … </script> : liaison avec une feuille de style externe JS
3. Les balises de structuration du texte
- <p> … </p> : désignation d’un paragraphe
- </hn> … </hn> : désignation d’un titre (n peut prendre les valeurs 1, 2, 3, 4, 5, 6)
- <a> … </a> : pour les liens hypertextes
- <img /> : insertion d’une image
- <strong> … </strong> ou <b> … </b> : mettre en gras un texte
- <em> … </em> ou <i> … </i> : mettre en italique un texte
- <abbr> … </abbr> : abréviation d’un texte
- <audio> … </audio> : mettre du son
- <video> … </video> : mettre de la vidéo
- <figure> … </figure> : pour mettre une figure contenant une image, du code etc
- <figcaption> … </figcaption> : légende de la figure
- <blockquote> … </blockquote> : mettre une longue citation
- <q> … </q> : mettre une courte citation
- etc
4. Les balises de tableau
- <table> … </table> : balise qui comporte entièrement le tableau
- <tr> … </tr> : ligne du tableau
- <th> … </th> : ligne en-tête (1ʳᵉ ligne du tableau)
- <td> … </td> : cellule du tableau
- <tfoot> … </tfoot> : bloc désignant le pied du tableau
- <tbody> … </tbody> : bloc désignant le corps du tableau
- <thead> … </thead> : bloc désignant l’entête du tableau
5. Les balises de listes
- <ul> … </ul> : mettre une liste à puces
- <ol> … </ol> : mettre une liste numérotées
- <li> … </li> : un élément de la liste
- <dl> … </dl> : liste de définitions
- <dt> … </dt> : identifie le terme dans une liste de définitions
6. Les balises de formulaire
- <form> … </form> : couvre entièrement la section du formulaire (accompagnée d’un attribut “action” qui permet de diriger l’internaute vers une page donnée et “method” qui permet de choisir la requête POST ou GET à utiliser vers le serveur après remplissage du formulaire).
- <input> … </input> : un champ de formulaire (utilisation de l’attribut type pour le champ)
- <texterea> … </texterea> : une zone de saisie de plusieurs lignes dans le formulaire
- <button> … </button> : bouton utilisé pour soumettre le formulaire ou un autre
- <select> … </select> : permet de définir une liste déroulante avec plusieurs choix
- <option> … </option> : un élément de la liste déroulante
- <label> … </label> : un titre d’un champ de saisie à remplir
7. Les balises sectionnantes
- <header> … </header> : l’entête de la page HTML
- <nav> … </nav> : lien de navigation pour le menu
- <main> … </main> : corps du contenu
- <article> … </article> : désignation d’un contenu autonome
- <section> … </section> : section de page
- <aside> … </aside> : partie supplémentaire – sidebar
- <footer> … </footer> : pied de page
8. Les balises génériques
- <div> … </div> : c’est une balise de type bloc qui occupe tout l’espace qui lui est réservé (largeur et longueur) et aussi qui exige un retour à la ligne à l’élément qui le suit
- <span> … </span> : c’est une balise de type inline qui autorise que des éléments soient sur la même ligne qu’elle (à droite et à gauche)
Vous désirez savoir plus sur certaines balises importantes pour le SEO ? Cliquez sur les liens ci-dessous pour découvrir son contenu.
Voilà, vous connaissez beaucoup de balises HTML désormais. J’espère que vous serez capable de reconnaître quelques-unes et de comprendre leur signification. Mais, comme je l’avais dit plus haut, cette liste est non exhaustive. Si vous voulez en savoir plus, je vous invite à vous diriger vers la documentation du MDN (enfin si vous voulez faire du développement web, sinon pour votre culture générale, le peu vous suffit pour le moment 😉).
Cependant, est-ce que seul le HTML est utilisé sur le web ? N’y a-t-il pas d’autre langage qui vient le compléter ? Bien sûr que oui, on parle du langage CSS (Cascading Styles Sheets). Que veulent-ils dire ces mots barbares ? Qu’est-ce que ça signifie ? Eh bien, ne vous inquiétez pas, je vous explique toute suite.
Langage CSS : concept et différence avec le langage HTML
Maintenant, vous connaissez ce que c’est le HTML ainsi que son utilisation. Le moment est venu pour vous parler de son cousin le CSS.
Si le HTML est un langage de balisage qui permet de définir le fond d’une page web, le CSS est un langage de style qui permet d’attribuer une forme aux éléments HTML et les rendre plus attrayants.
Le HTML permet d’indiquer aux crawlers (robots des moteurs de recherche) comment ils doivent comprendre la page et quelles informations contiennent elles.
Le langage CSS est un langage qui permet de donner une forme aux différents éléments d’une page. Il permet de donner une apparence visuel et attractif à chaque élément de la page. A titre illustratif, il s’occupe des polices de caractères et de la taille, des couleurs, des images en arrières plans, des boites de conteneurs…
Le HTML et le CSS sont deux langages complémentaires et très proches, mais ils n’ont pas les mêmes rôles.
Bonus : chose promise, chose due !!
Allez, ça y est ! Je vous avais promis un petit bonus. Nous y sommes maintenant. Parlons-en !
Connaissez-vous le référencement naturel SEO et le lien qui existe entre le SEO et le HTML ? Si vous ne connaissez pas ce que c’est le SEO, je vous invite à découvrir mon article complet sur le référencement naturel SEO.
Bon, commençons avant que le repas ne devienne froide !
Quelle est la relation entre le HTML et le SEO ?
Par définition, le SEO est l’ensemble des méthodes permettant d’optimiser un site internet pour les moteurs de recherches afin de bien le positionner sur ces mots clés stratégiques.
Il se repose sur trois piliers à savoir : la technique, le contenu et la popularité. L’optimisation d’un site internet pour l’expérience utilisateur à savoir les moteurs de recherche et aussi les internautes commence par l’aspect technique.
L’aspect technique va consister à réfléchir sur la conception du site de telle sorte qu’il soit le plus facile accessible aux moteurs de recherche et facile d’utilisation par les internautes.
Et c’est dans cette partie technique du SEO que l’on a besoin de comprendre le langage HTML. Pour donc comprendre l’architecture d’un site et comment les moteurs de recherches peuvent y accéder, il va falloir comprendre d’abord le HTML.
D’où tout l’intérêt de comprendre le langage HTML pour pouvoir réussir en SEO.
Ceci étant, est-il obligatoire pour vous d’apprendre le langage HTML ? Je ne pense pas ! Cela dépend de votre travail et de vos centres d’intérêts. Il existe quand même certains domaines de travail dans lesquels la compréhension du langage HTML s’avère importante.
Langage HTML : ceux qui doivent apprendre
- Les rédacteurs web
- Les consultants webmarketing
- Les développeurs web
- Pour les rédacteurs web
Si vous êtes rédacteur web, le HTML va beaucoup vous servir. En connaissant le HTML, vous allez pouvoir bien structurer votre contenu.
Vous serez même capable de baliser votre texte avec le HTML suite à la demande d’un client. Justement, vos clients seront contents et vous confierez de missions d’avantages.
Découvrez ici mon article : comment faire de la rédaction web réussie en 2023 ?
- Pour les consultants webmarketing
Si vous voulez devenir consultant dans le domaine du webmarketing, il est de votre devoir de connaître le HTML. Le consultant en webmarketing doit connaître les enjeux du web à savoir le HTML minimum, ainsi que le marketing.
Vous allez tout le temps travailler avec des sites web, les optimiser, etc. Il est donc impératif de connaitre le HTML.
- Pour les développeurs web
Si vous envisagez d’exercer dans le domaine du développement web, alors le HTML est une obligation pour vous.
C’est même le premier langage à apprendre. Vous ne pouvez pas être développeur web sans connaître le HTML.
Enfin, nous avons fini !!
Eh oui, nous avons fini. Désormais, vous êtes capable de parler aisément du HTML sans ambiguïté quelconque.
Si vous avez des questions ou des apports, n’hésitez pas à les mettre en commentaires. Et si vous avez aimé cet article, partagez-le sur les réseaux sociaux pour améliorer son référencement.
