Quand on est débutant en HTML, on a souvent envie d’aller vite. Ajouter du texte, afficher une image, voir quelque chose apparaître à l’écran… et c’est normal. Pourtant, derrière chaque page web bien faite, il y a une structure HTML claire, logique et presque invisible pour l’utilisateur, mais essentielle pour le navigateur, le référencement et la maintenabilité du site.
- Comprendre enfin comment une page web est réellement construite, pour écrire du HTML propre, logique et lisible sans coder au hasard.
- Poser des bases solides dès le départ afin d’éviter les erreurs classiques qui bloquent la progression, le référencement ou la compréhension du code plus tard.
- Gagner en confiance en sachant structurer une page HTML complète, avec une vision claire de ce que le navigateur et les moteurs de recherche attendent.
Comprendre la structure HTML, c’est un peu comme apprendre à poser les fondations d’une maison avant de décorer les murs. Sans ces bases, tout tient plus ou moins… jusqu’au jour où ça s’effondre ou devient impossible à modifier proprement. La bonne nouvelle, c’est que cette structure est simple à comprendre, même en partant de zéro.
Dans ce chapitre, vous allez découvrir pas à pas comment est construite une page HTML complète, pourquoi chaque élément existe, et surtout comment les utiliser intelligemment dès vos premiers fichiers. Prenez votre temps, l’objectif ici n’est pas d’aller vite, mais de comprendre durablement.
- Qu’est-ce que la structure HTML, exactement ?
- Le point de départ : le fichier HTML
- Le doctype : dire au navigateur ce que vous écrivez
- La balise : la racine du document
- La séparation essentielle : et
- Le : les informations invisibles mais cruciales
- Le : le contenu visible de la page
- Les titres : structurer le contenu avec du sens
- Le paragraphe : le texte du quotidien
- Une structure HTML complète, simple et propre
Qu’est-ce que la structure HTML, exactement ?
La structure HTML représente le squelette d’une page web. Avant même de parler de design, de couleurs ou d’animations, une page HTML est avant tout un document structuré, organisé, lisible par un navigateur… mais aussi par un humain.
HTML signifie HyperText Markup Language. Ce n’est pas un langage de programmation, mais un langage de balisage. Concrètement, vous allez entourer votre contenu avec des balises pour donner du sens à chaque partie de la page. Une balise ne sert pas seulement à afficher quelque chose, elle sert surtout à dire ce que c’est.
Une page HTML bien structurée permet :
- au navigateur de comprendre comment afficher le contenu,
- aux moteurs de recherche de comprendre le sujet de la page,
- aux lecteurs d’écran de rendre le contenu accessible,
- et à vous-même de vous y retrouver quand vous reviendrez sur votre code dans six mois.
Et croyez-moi, on revient toujours sur son code.
Le point de départ : le fichier HTML
Avant même de parler de balises, commençons par le tout début. Une page HTML est un simple fichier texte avec l’extension .html.
Par exemple :
index.htmlCe fichier peut être créé avec n’importe quel éditeur de texte. Un éditeur de code comme VS Code, Sublime Text ou même le bloc-notes suffit largement pour commencer.
À l’intérieur de ce fichier, vous allez écrire du HTML, toujours sous la même forme : des balises ouvrantes, des balises fermantes, et du contenu entre les deux.
Le doctype : dire au navigateur ce que vous écrivez
La toute première ligne d’une page HTML moderne est presque toujours la même :
<!DOCTYPE html>Cette ligne s’appelle le doctype. Elle ne sert pas à afficher quoi que ce soit à l’écran. Son rôle est simplement d’indiquer au navigateur que le document est écrit en HTML5, la version actuelle du HTML.
Sans ce doctype, certains navigateurs peuvent basculer en mode “compatibilité”, ce qui entraîne parfois des comportements étranges. Autrement dit, ce n’est pas optionnel. C’est une habitude à prendre dès le départ.
La balise <html> : la racine du document
Juste après le doctype, on trouve la balise <html>. Elle englobe absolument tout le contenu de la page.
<!DOCTYPE html>
<html>
</html>Tout ce qui sera affiché, interprété ou analysé par le navigateur se trouvera à l’intérieur de cette balise. On parle souvent de balise racine, car elle contient toutes les autres.
On y ajoute généralement un attribut important :
<html lang="fr">L’attribut lang indique la langue principale du contenu. Cela aide les moteurs de recherche, les outils d’accessibilité et même certains navigateurs. Ici, on précise que la page est en français.
La séparation essentielle : <head> et <body>
À l’intérieur de la balise <html>, la page est toujours divisée en deux grandes parties : le <head> et le <body>.
<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body>
</body>
</html>Cette séparation est fondamentale. Elle revient dans absolument tous les projets web.
Le <head> : les informations invisibles mais cruciales
La balise <head> contient tout ce qui ne s’affiche pas directement sur la page, mais qui est indispensable à son bon fonctionnement.
On y trouve notamment :
- le titre de la page,
- l’encodage des caractères,
- les informations pour le référencement,
- les liens vers les fichiers CSS,
- parfois des scripts JavaScript.
Un exemple de <head> minimal et propre :
<head>
<meta charset="UTF-8">
<title>Ma première page HTML</title>
</head>Prenons le temps de comprendre chaque élément.
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 ?L’encodage avec <meta charset="UTF-8">
Cette balise indique comment les caractères sont encodés. En UTF-8, ce qui est aujourd’hui la norme, vous pouvez utiliser sans problème les accents, les caractères spéciaux et la plupart des alphabets.
Sans cette ligne, vous risquez un jour de voir apparaître des symboles étranges à la place des accents. Ce n’est pas une erreur grave, mais c’est frustrant… surtout quand on débute et qu’on ne comprend pas pourquoi “é” devient “é”.
Le titre de la page avec <title>
La balise <title> définit le titre de la page. C’est ce texte qui apparaît :
- dans l’onglet du navigateur,
- dans les favoris,
- et dans les résultats des moteurs de recherche.
<title>Structure HTML pour débutants</title>Ce titre est extrêmement important pour le SEO. Il doit être clair, précis, et refléter le contenu de la page. On ne le voit pas dans le contenu affiché, mais il joue un rôle majeur dans la visibilité du site.
Le <body> : le contenu visible de la page
La balise <body> contient tout ce que l’utilisateur voit à l’écran : textes, images, liens, boutons, formulaires, etc.
<body>
<h1>Bienvenue sur ma page</h1>
<p>Ceci est ma première page HTML.</p>
</body>Si quelque chose doit apparaître dans le navigateur, alors il doit être dans le <body>. Rien d’autre.
Les titres : structurer le contenu avec du sens
Dans le <body>, l’une des premières choses que l’on utilise sont les titres HTML. Ils vont de <h1> à <h6>.
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Titre de section</h3>Ces balises ne servent pas seulement à afficher du texte en gros. Elles donnent une hiérarchie logique au contenu.
Une règle simple à retenir : une page doit généralement contenir un seul <h1>, qui représente le sujet principal. Les <h2>structurent les grandes sections, les <h3> les sous-sections, et ainsi de suite.
C’est un point essentiel pour la structure HTML et pour le référencement naturel.
Le paragraphe <p> : le texte du quotidien
La balise <p> sert à écrire des paragraphes de texte.
<p>
Le HTML est la base de toutes les pages web.
</p>Chaque paragraphe est indépendant. Le navigateur ajoute automatiquement un espace avant et après, ce qui rend le texte plus lisible.
Évitez absolument d’écrire de longs blocs de texte sans balises. Même si le navigateur les affiche, vous perdez toute la structure sémantique du document.
Une structure HTML complète, simple et propre
À ce stade, vous êtes déjà capable de comprendre une page HTML complète et minimale :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Structure HTML de base</title>
</head>
<body>
<h1>Apprendre la structure HTML</h1>
<p>
Cette page explique les bases de la structure HTML pour débutants.
</p>
</body>
</html>Ce code est simple, lisible, et respecte toutes les bonnes pratiques de base.
Lorsqu’on débute, on a souvent tendance à copier-coller du code trouvé sur internet sans trop se poser de questions. C’est humain. Mais comprendre, c’est mieux !
Pourquoi cette structure HTML est indispensable
La structure HTML n’est pas un détail technique réservé aux développeurs avancés. Elle conditionne :
- la clarté du code,
- la facilité d’évolution du site,
- l’accessibilité,
- et le référencement.
En comprenant cette structure dès maintenant, vous évitez de mauvaises habitudes et vous construisez des bases solides pour la suite du tutoriel HTML.
Maîtriser la structure HTML, ce n’est pas apprendre par cœur une liste de balises. C’est comprendre la logique d’un document web, la manière dont le navigateur lit votre page, et la façon dont chaque élément s’emboîte naturellement dans un ensemble cohérent.
Ce chapitre marque souvent un déclic chez les débutants. On ne voit plus le HTML comme une suite de balises mystérieuses, mais comme une architecture claire, presque rassurante. Une fois cette base acquise, tout le reste devient plus simple, plus fluide, et surtout plus agréable à apprendre.
Dans le prochain chapitre, nous irons encore plus loin en explorant les balises sémantiques modernes, celles qui donnent encore plus de sens à votre structure HTML et qui transforment une simple page en véritable document web professionnel. Prenez le temps de pratiquer, ouvrez un éditeur, testez, cassez, recommencez. C’est ainsi que le HTML devient vraiment votre allié.
Chapitre suivant : La sémantique d’une page web
Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi