Comprendre le HTML en 10′ : les bases pour créer une page web

Vous avez déjà regardé le code source d’une page web en vous demandant ce que signifiaient toutes ces lignes étranges entourées de chevrons ? Rassurez-vous, vous êtes loin d’être seul. Le HTML donne souvent l’impression d’un langage mystérieux, réservé aux initiés, alors qu’en réalité, il est bien plus simple et logique qu’il n’y paraît.

• Comprendre enfin ce qu’est réellement le HTML et pourquoi il est indispensable pour créer des pages web claires, accessibles et bien comprises par les navigateurs comme par les moteurs de recherche.
• Acquérir une vision logique de la structure d’une page web, pour écrire un code plus propre, plus lisible et éviter les erreurs classiques quand on débute.
• Poser des bases solides pour la suite de l’apprentissage du web, afin d’aborder le CSS et les autres technologies avec confiance et cohérence.

Comprendre le HTML, c’est un peu comme apprendre à lire les plans d’une maison avant de la construire. On ne parle pas encore de décoration, de couleurs ou d’animations, mais de fondations solides. Et bonne nouvelle : ces fondations sont accessibles à tout le monde, même sans aucune base technique.

Dans ce premier chapitre, je vous propose une entrée en douceur pour comprendre le HTML en 10 minutes… Prenez votre temps, lisez tranquillement, testez les exemples, et surtout, ne cherchez pas à tout mémoriser. L’objectif est de comprendre la logique, pas de réciter du code par cœur.

Qu’est-ce que le HTML ?

Le HTML est le langage de base du web et du développement frontend. Chaque page que vous consultez sur Internet, sans exception, repose sur du HTML. Derrière un site vitrine, un blog, une boutique en ligne ou même un réseau social, il y a toujours une structure HTML qui organise le contenu.

HTML signifie HyperText Markup Language. Dit comme ça, c’est tout sauf rassurant. Pourtant, si l’on découpe calmement : HyperText fait référence aux liens qui permettent de naviguer d’une page à l’autre, et Markup Language signifie simplement « langage de balisage ». Le HTML n’est donc pas un langage de programmation au sens classique, mais un langage qui sert à baliser, structurer et organiser du contenu.

Concrètement, le HTML sert à dire : ceci est un titre, ceci est un paragraphe, ceci est une image, ceci est un lien. Il ne décide ni des couleurs, ni des animations, ni du comportement dynamique de la page. Son rôle est clair : donner du sens et une structure à l’information.

Imaginez un livre. Le HTML, ce sont les chapitres, les titres, les paragraphes et les images. Sans mise en page sophistiquée, mais avec une organisation logique qui permet à un navigateur, à un moteur de recherche ou à un lecteur d’écran de comprendre le contenu.

À quoi sert réellement le HTML sur une page web

Comprendre le HTML, c’est aussi comprendre son utilité concrète. Le navigateur, comme Chrome, Firefox ou Safari, lit le fichier HTML ligne par ligne. À partir de ces instructions, il sait quoi afficher et dans quel ordre.

Le HTML sert avant tout à structurer l’information. Un moteur de recherche comme Google s’appuie sur cette structure pour comprendre de quoi parle votre page. Un lecteur d’écran utilisé par une personne malvoyante s’en sert pour lire correctement le contenu. Même votre propre cerveau apprécie une page bien structurée, sans forcément s’en rendre compte.

Il joue également un rôle fondamental pour le référencement naturel. Une page bien structurée en HTML est plus lisible pour les moteurs de recherche. Autrement dit, comprendre le HTML, c’est déjà faire un pas vers un site plus visible.

Enfin, le HTML est la base indispensable avant d’apprendre le CSS ou le JavaScript. Sans HTML, ces deux langages n’ont rien à habiller ni à animer. C’est pourquoi tout apprentissage du web commence toujours par là.

Le principe fondamental des balises HTML

Entrons maintenant dans le cœur du sujet. Le HTML repose sur un principe simple : les balises. Une balise est un mot entouré de chevrons, comme <p> ou <h1>. Elle indique la nature du contenu qu’elle encadre.

La plupart des balises fonctionnent par paire. Une balise ouvrante annonce le début du contenu, et une balise fermante marque la fin. La balise fermante ressemble à la balise ouvrante, mais avec un slash en plus.

Prenons un exemple très simple :

<p>Ceci est un paragraphe.</p>

Ici, <p> signifie paragraphe. Le navigateur comprend que le texte situé entre les deux balises est un paragraphe de texte classique. C’est tout. Pas de magie, pas de calcul compliqué.

Certaines balises ont un rôle très explicite. <h1> indique un titre principal. <h2> un sous-titre. <a> sert à créer un lien. <img>permet d’afficher une image. À chaque fois, le navigateur interprète ces balises pour afficher le contenu correctement.

Il existe aussi des balises dites « auto-fermantes ». C’est le cas des images, par exemple :

<img src="photo.jpg" alt="Une photo descriptive">

Ici, il n’y a pas de balise de fermeture. L’image est un élément autonome.

Comprendre l’imbrication des balises

Un autre concept fondamental pour comprendre le HTML est l’imbrication. Les balises peuvent contenir d’autres balises. Un peu comme des boîtes dans des boîtes.

Prenons un exemple concret :

<p>Voici un <strong>mot important</strong> dans un paragraphe.</p>

La balise <strong> est imbriquée à l’intérieur de la balise <p>. Cela signifie que le mot « important » fait partie du paragraphe, mais avec une importance particulière. Le navigateur va donc l’afficher différemment, en gras.

L’imbrication doit toujours respecter une règle simple : ce qui est ouvert en dernier doit être fermé en premier. Si vous ouvrez un paragraphe, puis un élément à l’intérieur, vous devez fermer cet élément avant de fermer le paragraphe. Cette logique est essentielle, sous peine d’obtenir un code incorrect ou imprévisible.

Une erreur fréquente chez les débutants est de mal fermer les balises. Heureusement, les navigateurs sont souvent indulgents, mais il vaut mieux prendre de bonnes habitudes dès le départ.

La structure minimale d’une page HTML

Pour comprendre le HTML en profondeur, il faut aussi savoir à quoi ressemble une page HTML complète. Un fichier HTML est un simple fichier texte, généralement avec l’extension .html.

Voici la structure de base d’une page HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma première page HTML</title>
</head>
<body>
    <h1>Bonjour le monde</h1>
    <p>Ceci est ma première page web.</p>
</body>
</html>

Chaque partie a un rôle précis. La ligne <!DOCTYPE html> indique au navigateur qu’il s’agit d’un document HTML moderne. La balise <html> englobe tout le contenu de la page.

La partie <head> contient des informations invisibles pour l’utilisateur, mais essentielles pour le navigateur. On y trouve le titre de la page, l’encodage des caractères, et plus tard des liens vers le CSS ou des scripts.

La balise <body> contient tout ce qui sera visible à l’écran : textes, images, liens, formulaires. C’est là que vit le contenu réel de votre page.

Structurer correctement le contenu d’une page

Structurer une page web ne consiste pas à empiler du texte au hasard. Le HTML propose des balises sémantiques, c’est-à-dire des balises qui ont un sens précis.

Un titre principal se place dans une balise <h1>. Les sous-titres utilisent <h2>, <h3>, et ainsi de suite. Les paragraphes vont dans <p>. Cette hiérarchie n’est pas décorative, elle est logique.

Imaginez un article sans titres. Il serait pénible à lire. Pour un moteur de recherche ou un lecteur d’écran, c’est encore pire. Une bonne structure HTML rend la page plus claire pour tout le monde.

C’est souvent à ce moment-là que les débutants ont un déclic. Le HTML n’est pas là pour faire joli, mais pour organiser le sens du contenu. Le design viendra plus tard.

Lors de mes débuts, j’ai passé une bonne demi-heure à chercher pourquoi une page restait désespérément blanche. J’avais tout vérifié, sauf un détail : j’avais oublié de fermer une balise <body>. Le navigateur essayait de deviner, mais n’y arrivait pas correctement. Ce jour-là, j’ai compris que le HTML, comme une phrase mal ponctuée, peut perdre tout son sens à cause d’un simple oubli.

Une fois que vous commencez à comprendre le HTML, une question arrive naturellement : pourquoi ma page est-elle si moche ? C’est normal. Le HTML n’est pas responsable de l’apparence.

C’est là qu’intervient le CSS. Le CSS va permettre de mettre des couleurs, des tailles, des marges, des mises en page modernes. Mais sans une structure HTML propre, le CSS devient vite un cauchemar. C’est pour cela que prendre le temps de comprendre le HTML est un investissement précieux.

Comprendre le HTML, ce n’est pas apprendre par cœur une liste de balises, mais saisir une logique : structurer le contenu pour qu’il ait du sens, aussi bien pour l’humain que pour la machine.

Aller plus loin dans la structuration d’une page HTML

Maintenant que vous avez compris le rôle des balises et la structure minimale d’une page HTML, il est temps d’aller un peu plus loin. Pas pour compliquer les choses, mais au contraire pour les rendre plus claires et plus logiques.

Une page web moderne n’est pas un simple bloc de texte. Elle est organisée en grandes zones, un peu comme un journal ou un magazine. On retrouve souvent un en-tête, un contenu principal, parfois une colonne secondaire, puis un pied de page. Le HTML propose justement des balises prévues pour représenter ces grandes zones.

Lorsque vous utilisez ces balises, vous ne changez pas l’apparence de la page. En revanche, vous donnez du sens à chaque partie du contenu. Et ce sens est extrêmement précieux.

Les balises sémantiques : donner du sens au contenu

Pendant longtemps, les développeurs utilisaient presque uniquement des balises génériques comme <div>. Aujourd’hui, le HTML moderne encourage l’utilisation de balises dites sémantiques, c’est-à-dire des balises qui décrivent clairement leur rôle.

Par exemple, la balise <header> représente l’en-tête de la page ou d’une section. Elle contient souvent le titre principal, un logo ou un menu de navigation. La balise <main> englobe le contenu principal de la page, celui qui est unique et central. La balise <footer> correspond au pied de page, avec des informations complémentaires.

Voici un exemple simple de structure logique :

<body>
    <header>
        <h1>Comprendre le HTML</h1>
    </header>

    <main>
        <p>Bienvenue sur cette page dédiée aux bases du HTML.</p>
    </main>

    <footer>
        <p>© 2026 - Créa Blog</p>
    </footer>
</body>

Encore une fois, rien de visuel ici. Mais beaucoup de sens. Un moteur de recherche comprend immédiatement où se situe le contenu principal. Un lecteur d’écran sait où commence et où se termine chaque zone.

Comprendre le HTML, c’est aussi comprendre cette notion de sens caché derrière les balises.

Les titres : une hiérarchie à respecter

Les balises de titre jouent un rôle essentiel dans la structure d’une page HTML. Elles vont de <h1> à <h6>, du plus important au moins important.

Le <h1> doit représenter le sujet principal de la page. En général, il ne doit y en avoir qu’un seul. Les <h2> servent à structurer les grandes parties, les <h3> les sous-parties, et ainsi de suite.

Un bon réflexe consiste à imaginer le plan d’un exposé ou d’un livre. Si vous ne mettriez pas un sous-chapitre avant un chapitre, alors ne le faites pas en HTML.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Exemple d’une structure cohérente :

<h1>Comprendre le HTML</h1>
  <h2>Les bases du langage</h2>
    <h3>Les balises</h3>
    <h3>L’imbrication</h3>
  <h2>Structurer une page web</h2>

Cette hiérarchie est l’un des éléments clés pour le référencement naturel et pour l’accessibilité. C’est aussi une habitude simple à prendre dès le début.

Les paragraphes et le texte

En HTML, un paragraphe se place toujours dans une balise <p>. Il est tentant, au début, d’écrire du texte sans balise ou de multiplier les retours à la ligne. Pourtant, le HTML ne fonctionne pas comme un traitement de texte.

Chaque paragraphe doit être clairement identifié. Cela rend le code plus lisible, plus propre et plus facile à maintenir.

Par exemple :

<p>Le HTML est le langage de base du web.</p>
<p>Il permet de structurer le contenu d’une page.</p>

Même si visuellement cela ressemble à deux phrases séparées par un saut de ligne, pour le navigateur et pour les outils automatiques, la différence est énorme.

Les liens : le cœur du web

Le web repose sur un principe fondamental : la navigation entre les pages. C’est là qu’intervient la balise <a>, qui permet de créer des liens.

Un lien se compose d’un texte cliquable et d’une destination :

<a href="https://example.com">Visiter le site</a>

Le texte entre les balises est ce que l’utilisateur voit. L’attribut href indique vers où mène le lien. Cela peut être une autre page du site, un site externe, ou même une autre section de la même page.

Les liens sont essentiels pour comprendre le HTML, car ils incarnent la notion même d’hypertexte. Sans liens, Internet serait une suite de pages isolées.

Les images : enrichir le contenu

Pour afficher une image en HTML, on utilise la balise <img>. Cette balise possède toujours au moins deux informations importantes : l’adresse de l’image et un texte alternatif.

<img src="image.jpg" alt="Description de l’image">

Le texte alternatif est souvent négligé par les débutants. Pourtant, il est crucial. Il permet de décrire l’image pour les personnes qui ne peuvent pas la voir, et il aide aussi les moteurs de recherche à comprendre le contenu visuel.

Une image n’est pas là uniquement pour décorer. En HTML, elle fait partie intégrante du contenu.

Comprendre le HTML, ce n’est pas tout retenir

À ce stade, vous avez déjà vu beaucoup de notions. Et il est normal de ne pas tout retenir. Comprendre le HTML ne signifie pas connaître chaque balise par cœur, mais savoir où chercher et comprendre la logique générale.

Avec la pratique, certaines balises deviendront naturelles. D’autres resteront occasionnelles. C’est parfaitement normal.

Ce qui compte, c’est de garder cette idée en tête : le HTML sert à structurer le contenu, pas à le styliser, ni à le rendre interactif.

Pourquoi le HTML est une base solide pour la suite

Lorsque vous aurez envie d’aller plus loin, le CSS viendra naturellement. Il permettra de transformer cette structure brute en une page agréable, moderne et responsive. Mais un CSS efficace repose toujours sur un HTML propre et bien pensé.

Plus tard encore, le JavaScript ajoutera de l’interaction. Là aussi, sans une structure HTML claire, le code devient vite compliqué et fragile.

C’est pour cela que prendre le temps de comprendre le HTML dès maintenant est l’un des meilleurs choix que vous puissiez faire.

Vous commencez à voir que le HTML n’est pas un obstacle, mais un allié. Il ne cherche pas à impressionner, mais à organiser. Il ne fait pas rêver visuellement, mais il rend tout le reste possible.

Écrire un HTML propre et lisible dès le début

Lorsque l’on débute, on a souvent tendance à se concentrer uniquement sur le résultat visible à l’écran. Pourtant, un bon HTML ne se juge pas seulement à ce qu’il affiche, mais aussi à la manière dont il est écrit. Un code clair et bien structuré vous fera gagner un temps précieux, aujourd’hui comme dans plusieurs mois.

La lisibilité commence par l’indentation. Chaque balise imbriquée doit être légèrement décalée vers la droite. Cela permet de visualiser immédiatement la structure de la page. Le navigateur n’en a pas besoin, mais votre cerveau, lui, vous remerciera.

Regardez la différence entre ces deux exemples. Le premier fonctionne, mais il est difficile à lire :

<body><header><h1>Mon site</h1></header><main><p>Bienvenue</p></main></body>

Le second est strictement identique pour le navigateur, mais infiniment plus compréhensible pour un humain :

<body>
    <header>
        <h1>Mon site</h1>
    </header>

    <main>
        <p>Bienvenue</p>
    </main>
</body>

Comprendre le HTML, c’est aussi comprendre que vous écrivez du code pour vous-même et pour les autres, pas seulement pour la machine.

Les commentaires HTML : expliquer son code

Le HTML permet d’ajouter des commentaires. Ils ne sont pas visibles à l’écran, mais ils servent à expliquer le code, à laisser des indications ou à se souvenir de certaines décisions.

Un commentaire HTML s’écrit ainsi :

<!-- Ceci est un commentaire -->

Vous pouvez l’utiliser pour décrire une section de la page ou pour désactiver temporairement un morceau de code. C’est un outil simple, mais extrêmement utile, surtout quand un fichier commence à s’allonger.

Un bon commentaire n’explique pas ce qui est évident, mais pourquoi vous avez fait un choix. C’est une nuance importante que l’on apprend avec le temps.

Les erreurs classiques quand on débute en HTML

Apprendre le HTML, c’est aussi faire des erreurs. Et c’est parfaitement normal. Certaines reviennent très souvent chez les débutants, autant les connaître dès maintenant.

La première consiste à oublier de fermer une balise. Une balise ouverte sans être fermée peut perturber toute la structure de la page. Les navigateurs essaient de corriger, mais le résultat peut être imprévisible.

Une autre erreur fréquente est d’utiliser des balises uniquement pour leur apparence supposée. Par exemple, utiliser un titre <h2> parce qu’il est plus gros, sans se soucier de la hiérarchie. C’est compréhensible au début, mais il faut rapidement changer ce réflexe.

Enfin, beaucoup de débutants mélangent structure et style. Ils cherchent à centrer du texte ou à changer une couleur directement en HTML. Ce n’est pas le rôle du HTML. Cette séparation des responsabilités est l’un des concepts clés du web moderne.

Le HTML et l’accessibilité : un aspect souvent oublié

Même si vous débutez, il est important de savoir que le HTML joue un rôle majeur dans l’accessibilité. Une page bien structurée permet à des personnes utilisant des lecteurs d’écran de naviguer efficacement.

Par exemple, une hiérarchie correcte de titres permet de parcourir une page comme on feuillette un sommaire. Des textes alternatifs bien rédigés pour les images permettent de comprendre leur contenu sans les voir.

Comprendre le HTML, ce n’est donc pas seulement apprendre à créer une page web, c’est aussi apprendre à rendre le web plus accessible à tous. Et cette dimension donne souvent encore plus de sens à l’apprentissage.

Du simple fichier HTML à une vraie page web

À ce stade, vous êtes capable de créer un fichier HTML simple, de le structurer et d’y insérer du contenu. Il suffit d’un éditeur de texte et d’un navigateur pour voir le résultat.

Vous pouvez créer un fichier nommé index.html, y coller votre code, puis double-cliquer dessus. Instantanément, votre page s’ouvre dans le navigateur. Ce moment-là est souvent marquant. Voir son premier contenu s’afficher, même très simple, procure une vraie satisfaction.

Petit à petit, vous ajouterez des sections, des liens, des images. Vous commencerez à comprendre comment tout s’articule. Et surtout, vous aurez une base solide pour la suite.

Pourquoi le HTML est toujours d’actualité

Il est tentant de penser que le HTML est dépassé face aux frameworks modernes et aux outils complexes. En réalité, c’est tout l’inverse. Plus les technologies évoluent, plus une bonne compréhension du HTML devient précieuse.

Les frameworks ne remplacent pas le HTML, ils s’appuient dessus. Un développeur qui comprend réellement le HTML écrit du code plus propre, plus accessible et plus durable.

Même après des années, le HTML reste une compétence fondamentale. Il évolue, s’enrichit, mais son principe de base reste le même : structurer le contenu.

Comprendre le HTML en 10 minutes, ce n’est pas devenir expert, ni connaître toutes les balises existantes. C’est surtout acquérir une vision claire de ce qu’est le web à sa racine. Une page web n’est pas un assemblage magique, mais un document structuré, logique et lisible.

En prenant le temps de comprendre ces bases, vous vous donnez une longueur d’avance. Vous construisez des fondations solides sur lesquelles tout le reste viendra naturellement. Le CSS n’aura plus l’air obscur, le JavaScript paraîtra plus cohérent, et même les outils avancés deviendront plus accessibles.

Si vous avez ressenti cette impression rassurante de “finalement, ce n’est pas si compliqué”, alors l’objectif est atteint. Le HTML n’est pas une barrière. C’est une porte d’entrée. Et derrière cette porte, il y a tout un monde à explorer.

Chapitre suivant : Structure d’une page web

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr