{"id":59143,"date":"2022-07-01T11:32:24","date_gmt":"2022-07-01T10:32:24","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=59143&post_type=knowledgebase&preview_id=59143"},"modified":"2025-10-01T20:46:05","modified_gmt":"2025-10-01T19:46:05","slug":"qu-est-ce-que-le-html","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/","title":{"rendered":"Qu’est-ce que le HTML ? Un guide pour d\u00e9butants"},"content":{"rendered":"

Vous voulez cr\u00e9er le site web de vos r\u00eaves, mais vous ne voulez pas qu’il ressemble \u00e0 un mod\u00e8le \u00e0 l’emporte-pi\u00e8ce. Toute personne rompue \u00e0 la conception de sites web<\/a> vous dira que vous devez d’abord conna\u00eetre le langage HTML. Mais qu’est-ce que le HTML, et comment l’apprendre ?<\/p>\n

Vous voulez que le site web que vous publiez<\/a> se d\u00e9marque et soit original. Vous voulez des \u00e9l\u00e9ments et des conceptions que personne d’autre dans votre secteur n’utilise. Apr\u00e8s tout, votre site web est la premi\u00e8re impression que de nombreux clients potentiels ont de votre entreprise.<\/p>\n

Mais avant de pouvoir le faire, vous devez apprendre un langage informatique appel\u00e9 HTML<\/a>. Il s’agit essentiellement du langage qui d\u00e9finit ce qu’un navigateur web doit montrer \u00e0 un visiteur lorsqu’il arrive sur votre site.<\/p>\n

Dans cet article, nous allons vous expliquer ce qu’est le HTML, comment il est apparu, comment il est utilis\u00e9, comment il fonctionne, et vous proposer une formation de base au HTML<\/a> avec des conseils pour en savoir plus.<\/p>\n

\u00cates-vous pr\u00eat \u00e0 apprendre comment coder votre site web sans cr\u00e9er de page cass\u00e9e ? Commen\u00e7ons tout de suite.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu’est-ce que le HTML ?<\/h2>\n

HTML est l’abr\u00e9viation de \u00ab hypertext markup language \u00bb (langage de balisage hypertexte) et est un langage relativement simple utilis\u00e9 pour cr\u00e9er des pages web. Comme il n’autorise pas les variables ou les fonctions, il n’est pas consid\u00e9r\u00e9 comme un \u00ab langage de programmation \u00bb, mais plut\u00f4t comme un \u00ab langage de balisage \u00bb, c’est-\u00e0-dire un langage qui utilise des balises pour d\u00e9finir les \u00e9l\u00e9ments d’un document.<\/p>\n

Si vous demandez \u00e0 n’importe qui dans le monde de la conception web<\/a> ce qu’est le HTML, vous obtiendrez probablement une explication interminable qui vous laissera sans voix, surtout si vous \u00eates comme la plupart des gens et que vous n’avez pas la moindre id\u00e9e du codage et de la cr\u00e9ation d’un site web \u00e0 partir de z\u00e9ro<\/a>.<\/p>\n

\"Quatre
Quatre points d\u00e9finissant le html (Source :<\/b> Studypool<\/a>)<\/figcaption><\/figure>\n

Que signifie donc \u00ab langage de balisage hypertexte \u00bb ?<\/p>\n

L’hypertexte est un texte plac\u00e9 dans l’ordre qui relie des \u00e9l\u00e9ments connexes, g\u00e9n\u00e9ralement par le biais de liens (\u00e9galement appel\u00e9s hyperliens). Le langage de balisage d\u00e9crit le style et la structure d’une page pour les navigateurs web.<\/p>\n

Ainsi, le langage HTML permet de s’assurer que le texte et les images apparaissent au bon endroit et que les utilisateurs peuvent naviguer sans probl\u00e8me sur votre site web<\/a>. Les navigateurs chargent ces informations depuis votre serveur web pour g\u00e9n\u00e9rer les sites que vous voyez tous les jours.<\/p>\n

Si vous deviez regarder le HTML dans sa forme brute, vous verriez beaucoup de symboles et de parenth\u00e8ses qui n’ont apparemment aucun sens. Cependant, tout cela contribue au produit final destin\u00e9 au client.<\/p>\n

La structure m\u00eame des sites web est cr\u00e9\u00e9e par le HTML. Ce langage fonctionne aux c\u00f4t\u00e9s de CSS (feuilles de style en cascade) et de JavaScript<\/a> pour cr\u00e9er des sites web visuellement attrayants et interactifs dont les utilisateurs peuvent profiter.<\/p>\n

L’essentiel ici est que le HTML est la base d’une bonne page web. Sans lui, vous ne seriez pas en mesure de partager du texte avec les visiteurs du site, et encore moins d’ajouter votre touche personnelle au site Web de vos r\u00eaves.<\/p>\n\n

L’histoire du HTML<\/h3>\n

Sir Tim Berners-Lee a cr\u00e9\u00e9 le HTML \u00e0 la fin de l’ann\u00e9e 1991, mais le langage de codage<\/a> n’a \u00e9t\u00e9 mis \u00e0 la disposition des masses qu’en 1993.<\/p>\n

C’est \u00e0 cette \u00e9poque que le HTML1 est apparu. D\u00e8s le d\u00e9part, il a \u00e9t\u00e9 con\u00e7u comme un moyen de partager des donn\u00e9es via les navigateurs web.<\/p>\n

La croissance du HTML s’est arr\u00eat\u00e9e peu apr\u00e8s sa sortie car peu de d\u00e9veloppeurs cr\u00e9aient des sites web \u00e0 l’\u00e9poque.<\/p>\n

HTML2 a \u00e9t\u00e9 publi\u00e9 en 1995 avec des fonctionnalit\u00e9s suppl\u00e9mentaires, ce qui en a fait le langage de balisage standard pour la conception de sites web jusqu’en 1997.<\/p>\n

C’est alors que le HTML3 a \u00e9t\u00e9 d\u00e9velopp\u00e9 par Dave Raggett. Il offrait aux webmasters des caract\u00e9ristiques plus puissantes \u00e0 utiliser lors de la conception des pages. Malheureusement, il \u00e9tait en avance sur son temps. Les caract\u00e9ristiques de HTML3 ont en fait ralenti les navigateurs, car ils n’\u00e9taient pas encore \u00e9quip\u00e9s pour les appliquer.<\/p>\n

HTML4.01 a \u00e9t\u00e9 d\u00e9velopp\u00e9 en 1999, et il est venu avec le support des options multim\u00e9dia. Cette mise \u00e0 niveau comprenait \u00e9galement des feuilles de style, des facilit\u00e9s d’impression et des langages de script suppl\u00e9mentaires.<\/p>\n

\"Les
Les diff\u00e9rences entre la structure HTML4 et la structure HTML5 (Source :<\/b> JavatPoint)<\/figcaption><\/figure>\n

Plus r\u00e9cemment, HTML5<\/a> a \u00e9t\u00e9 publi\u00e9 en 2015. Le d\u00e9ploiement de HTML5 a ajout\u00e9 plus de support pour le stockage des m\u00e9dias et des \u00e9l\u00e9ments de contenu sp\u00e9cifiques. Le doctype en ligne, l’int\u00e9gration d’audio et de vid\u00e9o ont \u00e9galement \u00e9t\u00e9 simplifi\u00e9s.<\/p>\n

Le monde travaille avec HTML5.2 en 2022, qui am\u00e9liore la politique de s\u00e9curit\u00e9 du contenu \u00e0 un moment o\u00f9 nous en avons le plus besoin.<\/p>\n

Elle met \u00e9galement l’accent sur le commerce \u00e9lectronique, en ajoutant une API de demande de paiement. Cette mise \u00e0 niveau a \u00e9galement ajout\u00e9 des applications Internet riches en accessibilit\u00e9 pour les personnes handicap\u00e9es.<\/p>\n

\u00c0 quoi sert le HTML ?<\/h2>\n

La r\u00e9ponse simple \u00e0 cette question est que le HTML est utilis\u00e9 pour cr\u00e9er des sites web \u00e0 usage personnel et professionnel dans le monde entier.<\/p>\n

La r\u00e9ponse r\u00e9elle est beaucoup plus d\u00e9taill\u00e9e que cela.<\/p>\n

Le HTML est le langage par d\u00e9faut utilis\u00e9 pour les documents et les sites web depuis les ann\u00e9es 1990. Il fonctionne avec les navigateurs<\/a> pour les aider \u00e0 comprendre la structure d’un site web et le style qui y est associ\u00e9.<\/p>\n

Essentiellement, le HTML est un plan qui indique au navigateur web comment assembler votre site web pour le visiteur. Lorsqu’un utilisateur saisi votre URL, le navigateur assemble la page sur la base des blocs de construction \u00e9tablis dans le code HTML.<\/p>\n

\"Un
Un graphique qui montre tout ce que le HTML5 peut faire (Source :<\/b> SCF)<\/figcaption><\/figure>\n

Ceci, \u00e0 son tour, aide la page \u00e0 avoir l’apparence voulue lorsqu’elle est vue par un utilisateur lorsqu’elle est combin\u00e9e \u00e0 une feuille de style CSS<\/a> qui donne un style aux \u00e9l\u00e9ments dispos\u00e9s dans votre document HTML.<\/p>\n

La version actuelle du HTML permet \u00e9galement d’ex\u00e9cuter des vid\u00e9os, des fichiers audio, des feuilles de calcul et d’autres applications directement sur les sites web. Si vous vous \u00eates d\u00e9j\u00e0 \u00e9merveill\u00e9 devant ces \u00e9l\u00e9ments sur un site web, vous devez remercier HTML5.<\/p>\n

Ce langage de balisage assure \u00e9galement une navigation interne fluide d’un site web, gr\u00e2ce aux hyperliens.<\/p>\n

Les concepteurs de sites web peuvent \u00e9galement utiliser le HTML pour cr\u00e9er des formulaires de g\u00e9n\u00e9ration de prospects<\/a> afin de recueillir des e-mails et des noms (\u00e0 condition d’alimenter l’action avec un fichier cod\u00e9 dans un autre langage).<\/p>\n

Si vous utilisez des extensions externes, vous pouvez \u00e9galement utiliser le HTML pour cr\u00e9er des syst\u00e8mes de r\u00e9servation ou des formulaires de recherche au sein d’un site, ce qui permet de faciliter la r\u00e9servation et la navigation.<\/p>\n

Le HTML est la fa\u00e7on dont vous incluez le contenu non dynamique sur un site web – le contenu que vous voulez que chaque visiteur voit de la m\u00eame fa\u00e7on. Si vous voulez du contenu dynamique, vous devez utiliser JavaScript<\/a>, PHP<\/a> ou d’autres langages de programmation.<\/p>\n

Comment fonctionne le HTML ?<\/h2>\n

En mai 2022, il y a plus de 3,56 milliards<\/a> de pages web sur Internet. La plupart de ces pages sont de simples fichiers HTML. (Notez que nous ne parlons pas ici de sites web, mais de pages web)<\/p>\n

Traditionnellement, si votre site comptait 150 pages, vous aviez probablement 150 fichiers HTML distincts. Mais aujourd’hui, les choses ont chang\u00e9. Si vous utilisez un syst\u00e8me de gestion de contenu (Content Management System ou CMS)<\/a>, et c’est le cas de la plupart des gens, ce ne sera pas le cas, car il g\u00e9n\u00e8re g\u00e9n\u00e9ralement des pages de fa\u00e7on dynamique \u00e0 partir de donn\u00e9es stock\u00e9es dans une base de donn\u00e9es.<\/p>\n

\"Un
Un graphique montrant le nombre de pages sur Internet<\/figcaption><\/figure>\n

Ces fichiers sont \u00e9galement appel\u00e9s documents HTML, et ils sont les \u00e9l\u00e9ments constitutifs de votre site web. Chaque page comporte divers \u00e9l\u00e9ments on-page et off-page qui ont tous leur place dans les documents HTML. Il s’agit notamment d’\u00e9l\u00e9ments backend<\/a> comme les balises m\u00e9ta, les balises de titre et les balises alt, mais aussi d’\u00e9l\u00e9ments physiques comme les vid\u00e9os, les images, les blocs de texte et d’autres \u00e9l\u00e9ments destin\u00e9s \u00e0 l’utilisateur.<\/p>\n

Comment se compose un document HTML ?<\/h3>\n

Tous les documents HTML se terminent par l’extension .html ou .htm. Ces documents contiennent tout le texte et les balises qui fournissent des informations statiques \u00e0 un navigateur web.<\/p>\n

Le document HTML est le manuel d’instructions utilis\u00e9 par le navigateur web de l’utilisateur pour construire le site. Tous les fichiers auxquels il fait r\u00e9f\u00e9rence (feuilles de style CSS, fichiers JavaScript qui alimentent les \u00e9l\u00e9ments dynamiques, etc.) sont lus par le navigateur, qui rend ensuite la page en cons\u00e9quence, permettant aux internautes de la voir comme pr\u00e9vu. Le rendu est la construction r\u00e9elle, et il a lieu chaque fois que quelqu’un navigue vers une page sp\u00e9cifique de votre site.<\/p>\n

S’il y a des probl\u00e8mes avec votre document HTML ou l’un des fichiers qu’il inclut, le site ne sera pas rendu correctement. Ce serait comme essayer d’assembler un bureau IKEA sans une pi\u00e8ce ou un outil essentiel.<\/p>\n

Les sites web modernes contiennent divers \u00e9l\u00e9ments HTML compos\u00e9s de balises et d’attributs. Ces \u00e9l\u00e9ments cr\u00e9ent la structure d’une page. Les balises associ\u00e9es \u00e0 chaque \u00e9l\u00e9ment indiquent o\u00f9 ils commencent et se terminent. Sans une balise qui ferme un \u00e9l\u00e9ment, le navigateur placera tout le contenu suivant dans cette colonne ou cette ligne, m\u00eame si ce n’est pas ce que vous aviez pr\u00e9vu.<\/p>\n

Les attributs associ\u00e9s \u00e0 chaque \u00e9l\u00e9ment d’une page illustrent les diff\u00e9rentes caract\u00e9ristiques qui les composent.<\/p>\n

Tous les documents HTML commencent par une d\u00e9claration <!DOCTYPE>. Cette d\u00e9finition de type de document, \u00e9galement appel\u00e9e DTD, d\u00e9termine la structure et les \u00e9l\u00e9ments d’un document XML<\/a>.<\/p>\n

Alors que <div> \u00e9tait autrefois le principal choix pour cr\u00e9er des blocs de contenu, en HTML5<\/a>, vous disposez \u00e9galement de blocs sp\u00e9cifiques comme <main> qui indiquent aux crawlers le type de contenu qui se trouvera dans un bloc – dans ce cas, le contenu principal du blog\/article.<\/p>\n

Les bases du HTML<\/h2>\n

Si vous voulez devenir un concepteur de sites web ou au moins participer \u00e0 la cr\u00e9ation du site web de votre entreprise, vous devez apprendre le langage HTML<\/a>. Comme pour tout ce qu’il y a \u00e0 apprendre dans ce monde, vous devez commencer par les bases pour avoir une bonne compr\u00e9hension des \u00e9l\u00e9ments plus avanc\u00e9s \u00e0 venir.<\/p>\n

Vous pouvez, bien s\u00fbr, utiliser un \u00e9diteur HTML gratuit<\/a> ou Sublime Text<\/a>, mais le fait de bien comprendre le fonctionnement du HTML vous aidera \u00e0 mieux personnaliser les sites web que vous cr\u00e9ez.<\/p>\n

Nous allons d\u00e9composer certains \u00e9l\u00e9ments de base du HTML dans les sections ci-dessous pour vous permettre de vous lancer sur la voie de la ma\u00eetrise du HTML.<\/p>\n

\u00c9l\u00e9ments du langage HTML<\/h3>\n

Tous les \u00e9l\u00e9ments HTML, ind\u00e9pendamment de ce qu’ils cr\u00e9ent, ont les trois m\u00eames composants. Vous avez une balise d’ouverture, le contenu lui-m\u00eame, et une balise de fermeture.<\/p>\n

\"Les
Les trois composants d’un \u00e9l\u00e9ment HTML<\/figcaption><\/figure>\n

Vos balises d’ouverture montrent au navigateur web o\u00f9 commencent les \u00e9l\u00e9ments de votre page. Par exemple, elles peuvent montrer o\u00f9 un lecteur vid\u00e9o ou un paragraphe de texte commence sur la page. Toutes les balises d’ouverture utilisent des crochets d’ouverture et de fermeture pour se marquer. Par exemple, la balise ouvrante <em> met l’accent sur le contenu, comme l’italique. Vous placeriez cette balise avant le texte que vous voulez mettre en valeur.<\/p>\n

Le contenu lui-m\u00eame est l’information r\u00e9elle que l’utilisateur voit. Il peut s’agir d’un texte \u00e9crit, comme un article de blog. Il peut \u00e9galement s’agir d’une image ou d’un code d’int\u00e9gration pour une vid\u00e9o. Lorsqu’il est plac\u00e9 apr\u00e8s la balise d’ouverture, le contenu commence \u00e0 l’endroit indiqu\u00e9.<\/p>\n

La balise de fermeture est identique \u00e0 la balise d’ouverture, mais elle ajoute une barre oblique ( \/ ) avant le nom de l’\u00e9l\u00e9ment. Pour revenir \u00e0 notre exemple de balise d’accentuation de tout \u00e0 l’heure, vous placeriez la balise <\/em> \u00e0 la fin du texte que vous essayez d’accentuer.<\/p>\n

Ainsi, par exemple, si vous voulez mettre en italique le mot \u00ab exactement \u00bb, vous le coderez comme ceci :<\/p>\n

<em>Exactement.<\/em><\/p>\n

Sur la page r\u00e9elle destin\u00e9e \u00e0 l’utilisateur, cela ressemblerait \u00e0 ceci :<\/p>\n

Exactement.<\/em><\/p>\n

Les \u00e9l\u00e9ments HTML comprennent \u00e9galement des attributs, qui contiennent un nom et une valeur d’attribut. Le nom de l’attribut indique ce que l’utilisateur ajoute, tandis que la valeur fournit des informations suppl\u00e9mentaires.<\/p>\n

Pour les balises d’image, vous devez \u00e9videmment pr\u00e9ciser quelle image vous souhaitez afficher, ce qui ressemble \u00e0 ceci :<\/p>\n

<img src=\u00a0\u00bbimg_girl.jpg\u00a0\u00bb><\/strong><\/p>\n

Si vous voulez rendre un paragraphe de votre page rouge tout en utilisant la police Arial, vous pouvez utiliser l’attribut style :<\/p>\n

<p style=\u00a0\u00bbcolor:red;font-family:arial\u00a0\u00bb>
\n<\/strong>
\nDans cet exemple, nous utilisons la balise ouvrante <p> pour un nouveau paragraphe. Avec ces attributs attach\u00e9s, tout dans ce paragraphe serait rouge dans la police Arial, jusqu’\u00e0 la balise de fermeture <\/p>.<\/p>\n

Mais dans le d\u00e9veloppement web moderne, il est d’usage de ne pas utiliser l’attribut de style HTML pour ajuster la conception des \u00e9l\u00e9ments individuels, mais plut\u00f4t de styliser la page enti\u00e8re avec une feuille de style CSS s\u00e9par\u00e9e.<\/p>\n

La classe et l’ID HTML sont deux attributs d’un \u00e9l\u00e9ment HTML qui les \u00ab nomment \u00bb et vous aident \u00e0 cibler ces \u00e9l\u00e9ments avec CSS ou JavaScript par la suite. Cela facilite le d\u00e9veloppement<\/a> et le rend plus efficace. En utilisant l’ID ou la classe d’un \u00e9l\u00e9ment, vous pouvez ins\u00e9rer des informations de style dans des \u00e9l\u00e9ments comme la couleur d’arri\u00e8re-plan, les bordures, la couleur de la police<\/a>, etc.<\/p>\n

Par exemple, au lieu de donner un style rouge au texte dans le document HTML, vous pourriez faire ceci :<\/p>\n

<p class=\u201dredtext\u201d>\n\nAnd in the CSS stylesheet, target the class like this:\n\n.redtext {\n\ncolor:red;\n\nfont-family:arial;\n\n}>\/code><\/code><\/pre>\n
Balises HTML et \u00e9l\u00e9ments HTML les plus utilis\u00e9s<\/h3>\n
Il existe 142 balises HTML diff\u00e9rentes qui vous permettent de cr\u00e9er des \u00e9l\u00e9ments. Ceux-ci sont compos\u00e9s d’\u00e9l\u00e9ments de niveau bloc et d’\u00e9l\u00e9ments en ligne.<\/p>\n
Les \u00e9l\u00e9ments de niveau bloc couvrent toute la largeur d’une page, commen\u00e7ant une nouvelle ligne dans un document.<\/p>\n
Voici quelques balises de niveau bloc courantes que vous pourriez utiliser sur votre site web :<\/p>\n