En bref
Les bases du HTML tiennent en huit briques. Le document d’abord : toute page commence par le doctype, puis une balise html contenant head (les coulisses : titre d’onglet, encodage) et body (le contenu visible). Les balises s’ouvrent et se ferment autour du contenu, et se précisent avec des attributs (href pour la destination d’un lien, src pour la source d’une image, alt pour son texte alternatif). Viennent ensuite les titres hiérarchisés (h1 à h6), les paragraphes, les liens — l’ADN du web —, les images, les listes à puces et numérotées, les tableaux pour les données, les formulaires pour la saisie, et les balises sémantiques (header, nav, main, footer) qui donnent du sens à la structure. Un éditeur et un navigateur suffisent : chaque essai s’affiche instantanément.
Le HTML a une qualité rare : tout ce que tu écris s’affiche immédiatement dans ton navigateur, sans installation ni compilation. Ce guide des bases du HTML parcourt les huit briques du langage dans l’ordre où les apprendre, exemples à l’appui. C’est le compagnon détaillé de la première étape de notre guide complet pour apprendre le HTML.
Le document HTML : squelette, balises et attributs
Crée un fichier index.html dans VS Code, ouvre-le dans ton navigateur : te voilà développeur web. Toute page respecte le même squelette : la déclaration doctype en première ligne (elle annonce du HTML moderne), puis une balise html englobant deux zones — head, les coulisses (titre affiché dans l’onglet, encodage des caractères, futurs liens vers le CSS), et body, tout ce qui s’affiche à l’écran. Retiens cette image : head parle au navigateur, body parle au visiteur.
La grammaire du langage tient en deux notions. Les balises s’ouvrent et se ferment autour du contenu — une balise d’ouverture, le contenu, la même balise avec une barre oblique pour fermer — et s’emboîtent comme des poupées russes : une liste contient des éléments, un paragraphe contient du texte et des liens. Les attributs précisent chaque balise depuis sa balise d’ouverture : href indique la destination d’un lien, src la source d’une image, alt son texte alternatif, class son étiquette de style pour le futur CSS. Balises + attributs : tu connais déjà 80 % de la mécanique — le reste du vocabulaire viendra en pratiquant.
Le contenu essentiel : textes, liens, images, listes
Quatre familles de balises couvrent l’immense majorité du contenu web. Les titres, hiérarchisés de h1 (le titre principal, unique par page) à h6, dessinent le plan du document — respecte l’ordre des niveaux, comme dans une dissertation. Les paragraphes (balise p) portent le texte courant, avec strong pour l’importance et em pour l’emphase. Les liens (balise a et son attribut href) sont l’invention fondatrice du web : vers une autre page de ton site, vers un site externe, ou vers une section de la même page via une ancre — c’est ce maillage qui fait la toile.
Les images s’insèrent avec img, ses attributs src (le fichier) et alt (la description textuelle, essentielle pour l’accessibilité et affichée si l’image ne charge pas — ne la néglige jamais). Les listes, enfin : ul pour les puces, ol pour la numérotation, li pour chaque élément — et elles s’imbriquent pour créer des sous-listes, la structure de tous les menus de navigation du web. Avec ces quatre familles, tu construis déjà de vraies pages : c’est exactement le programme des premiers de nos 10 exercices de HTML.
Structurer et donner du sens : tableaux, formulaires, sémantique
Trois briques complètent le socle. Les tableaux (table, tr pour les lignes, th pour les en-têtes, td pour les cellules) présentent des données tabulaires — horaires, tarifs, comparatifs — et uniquement cela : on ne fait plus de mise en page avec des tableaux depuis vingt ans, c’est le rôle du CSS. Les formulaires (form, input et ses types texte/email/mot de passe, textarea pour les zones longues, button pour valider, et surtout label associé à chaque champ) recueillent la saisie de l’utilisateur : c’est la porte d’entrée de toute interaction, que tu rendras vivante plus tard en créant un formulaire de contact fonctionnel.
Reste la touche qui distingue les pages propres : la sémantique. Plutôt que d’empiler des blocs anonymes, HTML offre des balises qui déclarent le rôle de chaque zone — header pour l’en-tête, nav pour la navigation, main pour le contenu principal, article et section pour le découper, footer pour le pied de page. Le navigateur, les lecteurs d’écran et les moteurs de recherche comprennent alors ta page au lieu de la deviner. Ton socle est complet : situe-le dans la grande mécanique avec comment fonctionne un site web, puis passe à l’étape qui s’impose — habiller tout cela avec les bases du CSS, puis assembler le tout en créant ton premier site.
Trois compléments pratiques pour finir d’équiper ta boîte à outils. Les commentaires, d’abord : tout ce qui est placé entre les délimiteurs de commentaire HTML est ignoré par le navigateur — utilise-les pour annoter tes sections (« début du menu », « fin de l’article ») et retrouver ton chemin dans les pages longues. Les caractères spéciaux, ensuite : certains symboles ont un sens réservé en HTML (les chevrons, l’esperluette) ; pour les afficher comme du texte, on passe par leurs entités dédiées — un détail qui t’évitera un jour une page mystérieusement cassée par un simple signe « inférieur à » dans une phrase. L’erreur numéro un, enfin : la balise non fermée. Un paragraphe ou une liste laissés ouverts, et tout le reste de la page hérite du problème en cascade — l’inspecteur des DevTools te montre alors une structure différente de celle que tu as écrite, le symptôme qui doit immédiatement te faire chercher la fermeture manquante. Petit bonus de productivité dans VS Code : tape simplement un point d’exclamation puis tabulation dans un fichier .html, et l’éditeur génère le squelette complet du document — l’abréviation Emmet la plus utile du web, qui t’économisera des centaines de frappes.
Questions fréquentes
Quelles sont les balises HTML à connaître en premier ?
Le squelette (doctype, html, head, body), les titres h1 à h3, le paragraphe p, le lien a avec href, l’image img avec src et alt, et les listes ul/ol/li. Cette douzaine de balises suffit pour construire de vraies pages de contenu dès le premier jour.
Quelle différence entre une balise et un attribut ?
La balise définit la nature de l’élément (un lien, une image, un titre) ; l’attribut, placé dans la balise d’ouverture, en précise les caractéristiques : href donne la destination du lien, src le fichier de l’image, alt sa description, class son étiquette pour le CSS.
À quoi sert l’attribut alt sur les images ?
Il fournit une description textuelle de l’image, lue par les lecteurs d’écran des personnes malvoyantes, affichée si l’image ne charge pas et utilisée par les moteurs de recherche. Le renseigner systématiquement est une bonne pratique d’accessibilité fondamentale.
Pourquoi utiliser les balises sémantiques comme header ou main ?
Parce qu’elles déclarent le rôle de chaque zone de la page : navigateurs, lecteurs d’écran et moteurs de recherche comprennent la structure au lieu de la deviner. À affichage égal, une page sémantique est plus accessible, plus maintenable et mieux référencée.
Sources
Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.