Apprendre HTML5 : créer, structurer et publier vos premières pages web pas à pas
- Thématique
- Développement web & mobile
- Mis à jour
- Lecture
- 14 min
- Formation
- Maitriser HTML5 - Créer vos premières pages web
L'essentiel en 30 secondes
- Pour apprendre HTML, il suffit d'un navigateur et d'un éditeur de code gratuit comme VS Code : aucune installation serveur n'est nécessaire pour débuter.
- Toute page HTML5 repose sur le même squelette : la déclaration DOCTYPE, puis les éléments html, head et body.
- Le HTML sémantique (header, nav, main, article, footer) décrit le rôle de chaque zone et aide à la fois l'accessibilité et le référencement.
- HTML structure le contenu, CSS le met en forme et JavaScript le rend interactif : on apprend HTML en premier parce que les deux autres s'appuient dessus.
- Une page HTML statique peut être mise en ligne gratuitement avec GitHub Pages, ou envoyée par FTP chez un hébergeur.
Sommaire de l'article
- Qu’est-ce que HTML et que change HTML5 ?
- Pourquoi apprendre HTML en premier ?
- Les outils pour apprendre HTML : navigateur, VS Code et DevTools
- Comment créer une page web en HTML : les étapes
- Mettre en ligne un site HTML : quelle solution choisir ?
- Bonnes pratiques : accessibilité, SEO et code propre
- Les erreurs fréquentes quand on débute en HTML
- HTML, CSS et JavaScript : quel rôle pour chaque langage ?
- Comment apprendre HTML efficacement ?
- En résumé
Apprendre HTML, c’est apprendre le langage qui structure toutes les pages web : titres, paragraphes, liens, images, tableaux et formulaires. Avec un éditeur de code gratuit et votre navigateur, vous pouvez écrire une première page en quelques minutes, puis la publier en ligne le jour même.
Ce guide s’adresse aux débutants complets comme aux autodidactes qui veulent consolider leurs bases. Vous y trouverez la méthode que nous suivons en formation : installer un environnement propre, écrire le squelette HTML5, structurer une page avec le HTML sémantique, ajouter liens, images et formulaires, vérifier votre code, puis mettre votre site en ligne.
Qu’est-ce que HTML et que change HTML5 ?
HTML (HyperText Markup Language) est le langage de balisage qui décrit la structure d’une page web. Chaque morceau de contenu est entouré de balises qui indiquent sa nature : un titre, un paragraphe, une liste, un lien. Le navigateur lit ce code et l’affiche. HTML5 désigne la version actuelle du langage, maintenue en continu.
HTML n’est pas un langage de programmation : il n’y a ni variable ni condition. Il se contente de dire « ceci est un titre de niveau 2 », « ceci est un lien vers telle page », « ceci est un champ e-mail obligatoire ». C’est précisément ce qui le rend accessible en premier.
HTML5 a apporté plusieurs changements concrets par rapport aux anciennes versions :
- un doctype simplifié (
<!DOCTYPE html>), à la place des longues déclarations d’autrefois ; - des balises sémantiques comme
<header>,<nav>,<main>,<article>ou<footer>; - l’audio et la vidéo natifs avec
<audio>et<video>, sans plugin ; - de nouveaux champs de formulaire (
email,date,number,tel,url) et une validation intégrée au navigateur.
Pourquoi apprendre HTML en premier ?
Toute page web, qu’elle soit générée par WordPress, React ou un constructeur de site, finit en HTML dans le navigateur. Connaître ce langage vous donne donc la main sur ce qui est réellement affiché.
Concrètement, savoir écrire du HTML permet de :
- créer une page web de présentation, un CV en ligne ou un portfolio sans dépendre d’un outil ;
- comprendre et corriger le code produit par un CMS ou un éditeur visuel ;
- structurer correctement vos titres et vos liens, ce qui a un effet direct sur le référencement naturel et l’accessibilité ;
- intégrer du contenu dans un e-mail, une newsletter ou un bloc personnalisé ;
- poser les bases avant d’aborder CSS, JavaScript puis un framework.
En formation, nous constatons que les personnes qui sautent l’étape HTML pour aller directement vers un framework bloquent plus tard sur des problèmes simples : un formulaire qui ne s’envoie pas, une image qui ne s’affiche pas, une mise en page qui casse. Quelques heures sur les fondamentaux évitent des semaines de confusion.
Les outils pour apprendre HTML : navigateur, VS Code et DevTools
Vous n’avez besoin que de trois outils, tous gratuits.
- Un navigateur récent (Firefox, Chrome, Edge ou Safari). Il affiche vos pages et contient les outils de développement.
- Visual Studio Code, l’éditeur de code le plus répandu. Il reconnaît le HTML, complète les balises et intègre Emmet : tapez
!puis Tab dans un fichier.htmlvide, et le squelette complet s’écrit tout seul. - Les DevTools du navigateur, accessibles avec F12 ou clic droit > Inspecter. L’onglet Éléments (ou Inspecteur dans Firefox) montre l’arbre du document tel que le navigateur l’a compris, ce qui permet de repérer une balise mal fermée en quelques secondes.
Dans VS Code, deux extensions suffisent pour démarrer : Live Server, qui ouvre votre page dans le navigateur et la recharge à chaque enregistrement, et Prettier, qui indente automatiquement votre code. Activez aussi l’option Format On Save dans les paramètres.
Pour vérifier la syntaxe d’une balise ou d’un attribut, la documentation de référence en français est celle de MDN Web Docs.
Comment créer une page web en HTML : les étapes
Construisons ensemble une petite page de présentation, avec un en-tête, un menu, un article, une image, une liste et un formulaire de contact.
Étape 1 — Organiser les fichiers du projet
Créez un dossier mon-site et ouvrez-le dans VS Code (Fichier > Ouvrir le dossier). Organisez-le dès le départ :
mon-site/
├── index.html
├── contact.html
├── css/
│ └── style.css
└── images/
└── portrait.webpTrois règles de nommage évitent la plupart des soucis de mise en ligne : tout en minuscules, aucun espace ni accent (utilisez des tirets), et une page d’accueil nommée index.html. Les serveurs web la chargent automatiquement quand on visite la racine d’un dossier.
Étape 2 — Écrire le squelette HTML5
Ouvrez index.html et saisissez ce squelette. C’est le point de départ de toutes vos pages.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio – Graphiste indépendante</title>
<meta name="description" content="Portfolio et contact d'une graphiste indépendante.">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Bonjour, je suis graphiste</h1>
<p>Bienvenue sur mon site.</p>
</body>
</html>Chaque ligne a un rôle précis :
<!DOCTYPE html>indique au navigateur d’utiliser le mode standard ;lang="fr"déclare la langue, utile aux lecteurs d’écran et aux moteurs de recherche ;<meta charset="UTF-8">garantit l’affichage correct des accents. Sans lui, vous verrez apparaître des caractères du type « é » à la place de « é » ;- la balise
viewportrend la page lisible sur mobile ; <title>est le texte affiché dans l’onglet et, le plus souvent, dans les résultats Google.
Tout ce qui est visible se place dans <body>. Le <head> ne contient que des informations pour le navigateur et les moteurs.
Étape 3 — Comprendre l’anatomie d’une balise
Une balise ouvrante, un contenu et une balise fermante forment un élément. Les attributs se placent dans la balise ouvrante et précisent son comportement.
<a href="contact.html" title="Me contacter">Écrivez-moi</a>Ici, a est le nom de l’élément, href et title sont des attributs, et « Écrivez-moi » est le contenu cliquable. Certains éléments n’ont pas de contenu ni de balise fermante, comme <img>, <br> ou <meta>.
Les éléments s’imbriquent comme des poupées russes : on ferme toujours en premier la dernière balise ouverte. <p><strong>Important</strong></p> est correct, <p><strong>Important</p></strong> ne l’est pas.
Il existe une centaine de balises, mais une trentaine suffisent au quotidien. Pour la liste détaillée avec leurs attributs et leurs usages, consultez notre référence des balises HTML essentielles.
Étape 4 — Structurer la page avec le HTML sémantique
Le HTML sémantique consiste à choisir la balise qui décrit le rôle du contenu, et non son apparence. Remplacez le contenu du <body> par cette structure :
<body>
<header>
<p class="logo">Mon portfolio</p>
<nav aria-label="Navigation principale">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="#projets">Projets</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Graphiste indépendante à Lyon</h1>
<section id="projets">
<h2>Projets récents</h2>
<article>
<h3>Identité visuelle d'une librairie</h3>
<p>Logo, charte graphique et signalétique.</p>
</article>
</section>
</main>
<footer>
<p>© 2026 Mon portfolio</p>
</footer>
</body>Quelques repères pour choisir :
<header>: l’en-tête (logo, navigation) ;<nav>: un bloc de liens de navigation principaux ;<main>: le contenu principal, une seule fois par page ;<section>: un regroupement thématique, qui a normalement son propre titre ;<article>: un contenu autonome qui aurait du sens seul (billet, fiche produit, carte de projet) ;<footer>: le pied de page ou de section.
Respectez aussi la hiérarchie des titres : un seul <h1> décrivant le sujet de la page, puis des <h2> pour les grandes parties et des <h3> à l’intérieur, sans sauter de niveau. Les lecteurs d’écran s’en servent pour naviguer, et Google pour comprendre le plan de votre page.
Le lien href="#projets" est une ancre : il fait défiler la page jusqu’à l’élément qui porte id="projets".
Étape 5 — Ajouter images, listes et liens
Déposez une image dans le dossier images/, puis ajoutez-la dans l’article :
<img src="images/portrait.webp" alt="Portrait de la graphiste dans son atelier"
width="600" height="400" loading="lazy">L’attribut alt est obligatoire : il décrit l’image pour les personnes aveugles et s’affiche si le fichier ne charge pas. Pour une image purement décorative, écrivez alt="". Les attributs width et height évitent que le texte « saute » pendant le chargement, et loading="lazy" diffère le chargement des images situées plus bas dans la page.
Pour proposer des formats modernes plus légers avec une solution de secours, utilisez <picture> :
<picture>
<source srcset="images/atelier.avif" type="image/avif">
<source srcset="images/atelier.webp" type="image/webp">
<img src="images/atelier.jpg" alt="L'atelier et sa table lumineuse" width="800" height="533">
</picture>Le navigateur prend le premier format qu’il sait lire. Côté listes, choisissez selon la nature des données : <ul> pour une liste sans ordre, <ol> pour des étapes, <dl> avec <dt> et <dd> pour des paires terme-définition, comme un glossaire ou une fiche technique.
Pour les liens, retenez la différence entre chemins :
| Type de chemin | Exemple | Quand l’utiliser |
|---|---|---|
| Relatif au fichier | images/logo.png | Ressources de votre propre site |
| Remonter d’un dossier | ../index.html | Depuis un sous-dossier vers la racine |
| Relatif à la racine | /css/style.css | Sur un serveur, quand le site est à la racine du domaine |
| Absolu | https://developer.mozilla.org/fr/ | Liens vers un autre site |
Pour un lien externe ouvert dans un nouvel onglet, ajoutez target="_blank" rel="noopener", et prévenez l’utilisateur dans le texte du lien.
Étape 6 — Créer un formulaire avec validation native
Dans contact.html, reprenez le squelette puis ajoutez ce formulaire :
<form action="https://exemple.com/traitement" method="post">
<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom" required autocomplete="name">
<label for="email">Votre e-mail</label>
<input type="email" id="email" name="email" required autocomplete="email">
<label for="sujet">Sujet</label>
<select id="sujet" name="sujet">
<option value="devis">Demande de devis</option>
<option value="info">Renseignement</option>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" rows="6" minlength="20" required></textarea>
<button type="submit">Envoyer</button>
</form>Trois points à retenir. Chaque champ a un <label> relié par for et id : cliquer sur le libellé active le champ, et les lecteurs d’écran l’annoncent. L’attribut name est indispensable, car c’est lui qui transmet la valeur. Enfin, required, type="email" et minlength déclenchent une validation native : le navigateur bloque l’envoi et affiche un message si la saisie est incorrecte.
Attention, HTML ne sait pas traiter les données reçues. L’adresse indiquée dans action doit pointer vers un script serveur ou un service de formulaires. La validation côté navigateur améliore l’expérience, mais ne remplace jamais une vérification côté serveur.
Étape 7 — Vérifier son code avec les DevTools et le validateur W3C
Avant toute publication, faites deux contrôles :
- Inspectez la page (F12). Si un élément apparaît imbriqué au mauvais endroit dans l’arbre, c’est souvent qu’une balise n’a pas été fermée plus haut.
- Passez le code dans le validateur du W3C, en indiquant l’URL ou en collant le code. Il signale les balises mal imbriquées, les attributs inconnus, les
iden double ou les images sansalt.
Traitez les erreurs dans l’ordre : une seule balise oubliée en haut du fichier peut en générer une dizaine plus bas.
Mettre en ligne un site HTML : quelle solution choisir ?
Une page HTML, avec ses fichiers CSS et ses images, est un site statique : il suffit de copier les fichiers sur un serveur web. Trois options s’offrent à vous.
| Solution | Coût | Nom de domaine | Idéal pour |
|---|---|---|---|
| GitHub Pages | Gratuit | Adresse en github.io, domaine personnalisé possible | Portfolio, projet d’apprentissage, documentation |
| Hébergeur mutualisé + FTP | Abonnement payant | Inclus ou à ajouter | Site professionnel, besoin d’une adresse e-mail associée |
| Plateformes d’hébergement statique | Offres gratuites et payantes | Domaine personnalisé possible | Projets déployés automatiquement depuis Git |
Publier sur GitHub Pages
C’est la méthode la plus simple pour publier un premier site gratuitement :
- Créez un compte GitHub, puis un nouveau dépôt public (par exemple
mon-site). - Envoyez vos fichiers dans le dépôt, avec Add file > Upload files ou avec Git en ligne de commande. Le fichier
index.htmldoit être à la racine. - Dans le dépôt, ouvrez Settings > Pages, choisissez Deploy from a branch, sélectionnez la branche
mainet le dossier/ (root), puis enregistrez. - Après quelques instants, votre site est accessible à l’adresse
https://votre-identifiant.github.io/mon-site/.
Si vous voulez versionner votre travail proprement et publier chaque modification avec une simple commande, prenez le temps d’apprendre Git et GitHub : c’est aussi la compétence qui vous servira dans tous vos futurs projets de développement.
Publier par FTP chez un hébergeur
Votre hébergeur vous fournit un hôte, un identifiant et un mot de passe FTP (ou mieux, SFTP). Avec un client comme FileZilla, connectez-vous puis glissez le contenu de votre dossier dans le répertoire public du serveur, souvent nommé www ou public_html. Vérifiez ensuite que les chemins fonctionnent en ligne : un site qui marche en local mais pas sur le serveur a presque toujours un problème de majuscules ou de chemin absolu pointant vers votre disque dur.
Bonnes pratiques : accessibilité, SEO et code propre
Un code HTML de qualité se reconnaît à quelques habitudes simples, à prendre dès vos premières lignes.
- Indentez votre code de deux espaces par niveau d’imbrication. Prettier le fait pour vous à l’enregistrement.
- Commentez les grandes zones avec
<!-- Section projets -->, sans commenter chaque ligne. - Utilisez des noms de classes explicites et cohérents, par exemple
carte-projetplutôt quebloc2. - Pensez clavier : un visiteur doit pouvoir tout atteindre avec la touche Tab. Utilisez
<button>pour une action et<a>pour une navigation, jamais une<div>cliquable. - Soignez les textes de liens : « Voir nos tarifs » plutôt que « cliquez ici ». Google et les lecteurs d’écran s’appuient sur ce texte.
- Distinguez blocs et éléments en ligne :
<p>,<section>ou<ul>occupent toute la largeur, tandis que<a>,<strong>ou<span>s’insèrent dans le texte. On ne place pas un paragraphe à l’intérieur d’un<span>. - Structurez vos tableaux :
<caption>pour le titre,<th>avec l’attributscopepour les en-têtes. Un tableau sert à présenter des données, jamais à faire de la mise en page. - Intégrez les iframes avec prudence (vidéo YouTube, carte) : ajoutez un attribut
titledescriptif etloading="lazy".
Les erreurs fréquentes quand on débute en HTML
En formation, ce sont presque toujours les mêmes blocages qui reviennent.
| Erreur | Conséquence | Solution |
|---|---|---|
Oublier <meta charset="UTF-8"> | Accents remplacés par des caractères bizarres | Placer la balise en première ligne du <head> |
| Balise non fermée ou mal imbriquée | Mise en page cassée à partir d’un point précis | Inspecter l’arbre dans les DevTools, passer le validateur |
Choisir un titre pour sa taille (<h4> parce qu’il est petit) | Plan de page incohérent pour Google et les lecteurs d’écran | Choisir selon la hiérarchie, régler la taille en CSS |
| Image qui ne s’affiche pas en ligne | Nom de fichier avec majuscule ou accent, chemin erroné | Noms en minuscules sans accent, chemins relatifs |
Oublier l’attribut alt | Image invisible pour les lecteurs d’écran | Décrire l’image, ou alt="" si elle est décorative |
Champs de formulaire sans name | Données non transmises | Donner un name unique à chaque champ |
Utiliser <br> pour espacer les blocs | Code fragile et difficile à maintenir | Gérer les marges en CSS |
Mettre du style dans le HTML (style="..." partout) | Modifications longues et incohérentes | Centraliser la présentation dans une feuille CSS |
HTML, CSS et JavaScript : quel rôle pour chaque langage ?
Le HTML ne travaille jamais seul. Les trois langages du front-end se répartissent les rôles :
| Langage | Rôle | Exemple |
|---|---|---|
| HTML | Structure et sens du contenu | Ce texte est un titre, cette zone est un menu |
| CSS | Présentation et mise en page | Le titre est bleu, le menu est horizontal sur ordinateur |
| JavaScript | Comportement et interactivité | Le menu s’ouvre au clic sur mobile |
Dès que votre structure HTML tient la route, la suite logique consiste à apprendre CSS pour maîtriser couleurs, typographie, Flexbox et Grid. Viendra ensuite le moment d’apprendre JavaScript pour ajouter de l’interactivité.
Si votre objectif est avant tout d’avoir un site vitrine ou un blog que vous mettrez à jour vous-même, sans coder chaque page, un CMS peut être plus adapté : notre guide pour créer un site WordPress détaille cette voie. Vos connaissances en HTML vous y seront utiles pour structurer vos contenus.
Comment apprendre HTML efficacement ?
Le HTML s’apprend vite, à condition d’écrire du code dès le premier jour plutôt que de lire des listes de balises. Voici le parcours que nous recommandons :
- Jours 1 à 3 : installation de VS Code, squelette HTML5, titres, paragraphes, liens et images. Objectif : une page de présentation personnelle.
- Jours 4 à 7 : listes, tableaux, chemins relatifs, balises sémantiques. Objectif : un petit site de trois pages reliées par un menu.
- Deuxième semaine : formulaires, médias audio et vidéo, iframes, validation W3C, puis mise en ligne sur GitHub Pages.
- Ensuite : les bases de CSS pour habiller votre site, et un projet personnel concret (portfolio, page d’événement, CV en ligne).
Notre conseil : reproduisez la structure d’une page que vous aimez, en HTML seul, sans regarder son code. Puis comparez avec l’inspecteur. C’est l’exercice qui fait le plus progresser sur la sémantique.
Pour suivre ce parcours de façon guidée, la formation vidéo pour apprendre HTML5 de zéro d’EspritAcadémique vous mène en sept heures de la page blanche à la mise en ligne. Elle ne demande aucun prérequis, propose des quiz et des travaux pratiques à chaque module, et couvre notamment :
- le fonctionnement du navigateur, les DevTools et la configuration de VS Code ;
- le squelette HTML5, l’anatomie des balises, l’encodage UTF-8 et l’organisation des fichiers ;
- les images aux formats modernes, les listes, les liens accessibles et les tableaux lisibles par les lecteurs d’écran ;
- la mise en page sémantique, les formulaires avec validation, l’audio, la vidéo et les iframes ;
- la validation W3C et la publication via FTP ou GitHub Pages ;
- une initiation à CSS3 pour soigner l’apparence de votre premier site.
En résumé
Pour apprendre HTML, partez d’un squelette HTML5 correct, structurez vos pages avec des balises sémantiques, soignez les attributs alt, les labels de formulaire et la hiérarchie des titres, puis vérifiez votre code avec les DevTools et le validateur W3C. Publiez tôt, sur GitHub Pages par exemple : voir sa page en ligne est la meilleure motivation. Une à deux semaines de pratique régulière suffisent pour être autonome, avant de passer au CSS.
Questions fréquentes
Combien de temps faut-il pour apprendre le HTML ?
Les bases du HTML s'acquièrent en une à deux semaines, à raison d'une heure de pratique par jour : squelette de page, titres, paragraphes, liens, images, listes et formulaires. Comptez ensuite quelques semaines de projets personnels pour écrire un code sémantique et accessible sans hésiter. Le HTML est le langage le plus rapide à prendre en main du développement web, car il ne comporte ni variables ni logique.
Est-ce que HTML est un langage de programmation ?
Non. HTML est un langage de balisage : il décrit la structure et le sens d'un contenu (titre, paragraphe, lien, formulaire), mais il ne contient ni conditions, ni boucles, ni calculs. La logique d'une page relève de JavaScript. Cette distinction n'enlève rien à son importance : sans HTML, aucune page web ne peut s'afficher dans un navigateur.
Peut-on apprendre HTML gratuitement et seul ?
Oui. Un navigateur, un éditeur gratuit comme VS Code et la documentation de référence MDN suffisent pour débuter. La difficulté de l'autoformation n'est pas l'accès à l'information, mais l'ordre dans lequel l'aborder et les mauvaises habitudes prises sans correction. Un cours structuré avec exercices corrigés fait gagner du temps sur ces deux points.
Faut-il apprendre HTML avant WordPress ?
Ce n'est pas obligatoire, car WordPress permet de créer un site sans écrire de code. Mais connaître les bases du HTML aide beaucoup : vous comprenez ce que produit l'éditeur, vous corrigez un affichage étrange, vous structurez vos titres correctement pour le référencement et vous pouvez modifier un bloc HTML personnalisé sans risque.
Quelle est la différence entre HTML et HTML5 ?
HTML5 est la version actuelle du langage, aujourd'hui maintenue comme un standard évolutif appelé HTML Living Standard. Par rapport aux anciennes versions, elle a apporté un doctype simplifié, des balises sémantiques (header, nav, main, article, footer), la vidéo et l'audio natifs, de nouveaux types de champs de formulaire et la validation intégrée.
Quel logiciel utiliser pour écrire du HTML ?
Un simple éditeur de texte suffit en théorie, mais un éditeur de code est bien plus confortable. Visual Studio Code est le choix le plus courant : gratuit, disponible sur Windows, macOS et Linux, il propose l'autocomplétion des balises, les raccourcis Emmet et des extensions comme Live Server pour voir la page se recharger à chaque enregistrement.
