Débuter en HTML

HTML, c’est quoi exactement ?

HTML est le langage qui sert à structurer le contenu d’une page web. Il ne sert pas à faire le design. Il sert à dire au navigateur : ceci est un titre, ceci est un paragraphe, ceci est une image, ceci est un lien, ceci est un formulaire.

Une bonne page HTML, c’est comme une maison bien construite : les fondations sont propres, les pièces sont bien organisées, et chaque élément a un vrai rôle.

À retenir

HTML sert à structurer. CSS servira à rendre joli. JavaScript servira à rendre interactif.

Créer son premier fichier HTML

Pour commencer, créez un dossier de projet, puis ajoutez un fichier index.html. C’est souvent le fichier principal d’un site.

Le navigateur sait lire directement un fichier HTML. Vous pouvez donc ouvrir index.html avec Chrome, Firefox, Edge ou Safari.

Comprendre la structure d’une page HTML

Une page HTML complète commence toujours par une structure de base. Cette structure permet au navigateur de comprendre le document.

Explication simple

<head> contient les informations invisibles utiles au navigateur et aux moteurs de recherche. <body> contient ce que l’utilisateur voit sur la page.

Le head : les informations importantes de la page

Le head ne sert pas à afficher du contenu directement. Il sert à donner des informations au navigateur, à Google et aux réseaux sociaux.

Les balises indispensables

charset évite les problèmes d’accents. viewport rend la page adaptée au mobile. title donne le titre affiché dans l’onglet et dans Google. description résume la page.

Les titres H1 à H6

Les titres servent à organiser une page. Ils aident les visiteurs, Google et les lecteurs d’écran à comprendre la hiérarchie du contenu.

La règle simple

Une page doit généralement avoir un seul h1. Les h2 découpent les grandes sections. Les h3 découpent les sous-parties.

Paragraphes et mise en valeur du texte

Le HTML permet de créer des paragraphes et de donner du sens à certains mots. Il ne faut pas choisir une balise uniquement pour son apparence.

strong, em, b et i

strong indique une importance forte. em indique une emphase. b met en gras sans signification particulière. i met en italique sans signification particulière.

Les listes : ul, ol et li

Les listes servent à afficher plusieurs éléments de manière claire. Une liste non ordonnée utilise ul. Une liste ordonnée utilise ol.

Erreur fréquente

Les liens avec la balise a

Un lien permet d’envoyer l’utilisateur vers une autre page, un autre site, une adresse email, un numéro de téléphone ou une section de la même page.

Lien vers une section

Lien qui ouvre un nouvel onglet

Les images avec img

Une image HTML se crée avec la balise img. Elle doit toujours avoir un attribut src et idéalement un attribut alt.

Le rôle du alt

Le alt décrit l’image pour les lecteurs d’écran et pour Google. Il s’affiche aussi si l’image ne charge pas.

Image importante en haut de page

Utilisez loading="lazy" pour les images plus bas dans la page, mais pas forcément pour l’image principale visible dès l’arrivée.

Figure et figcaption

figure sert à regrouper une image, une illustration ou un extrait avec sa légende.

C’est plus propre qu’une image seule suivie d’un paragraphe sans relation claire.

Structurer une page avec les balises HTML5

Le HTML moderne propose des balises sémantiques. Elles donnent du sens à la page.

Quand utiliser section, article et div ?

section sert à créer une zone importante avec un titre. article sert à créer un contenu indépendant. div sert surtout à regrouper pour le design, sans signification particulière.

div et span : les boîtes neutres

div et span n’ont pas de sens particulier. Ils servent surtout à regrouper du contenu pour le CSS ou le JavaScript.

Bonne pratique

N’utilisez pas div partout par réflexe. Si une balise plus précise existe, utilisez-la.

Les tableaux HTML

Les tableaux servent à afficher des données structurées, pas à faire une mise en page.

À éviter

Ne faites pas toute une page en tableau. Avant, c’était courant. Aujourd’hui, on utilise CSS pour la mise en page.

Les formulaires HTML

Un formulaire permet de récupérer des informations : nom, email, message, téléphone, choix, fichier, date, etc.

Le duo label + input

Le label doit être relié au champ avec for et id. C’est important pour l’accessibilité.

Les types d’input les plus utiles

HTML propose plusieurs types de champs. Le bon type améliore l’expérience mobile, la validation et l’accessibilité.

Cases à cocher et boutons radio

Select, fieldset et legend

select permet de proposer une liste déroulante. fieldset et legend permettent de regrouper des champs.

Validation HTML des formulaires

HTML peut déjà vérifier certains champs avant l’envoi du formulaire. Cela ne remplace pas la sécurité côté serveur, mais améliore l’expérience utilisateur.

Attributs utiles

required, minlength, maxlength, min, max, pattern permettent de poser des règles.

Balises modernes : details, summary et dialog

Certaines balises HTML permettent d’ajouter des comportements utiles sans JavaScript complexe.

Audio, vidéo et iframe

HTML permet d’intégrer des médias directement dans une page.

Accessibilité : rendre une page utilisable par tous

Une page accessible est plus claire pour tout le monde : visiteurs, Google, lecteurs d’écran et personnes naviguant au clavier.

Règles simples

Un bouton doit être un vrai button. Un lien doit être un vrai a. Une image informative doit avoir un alt clair. Une image purement décorative peut avoir un alt="".

HTML et SEO : aider Google à comprendre la page

Le SEO ne dépend pas uniquement du texte. La structure HTML aide Google à comprendre le sujet de la page.

Données structurées : expliquer la page aux moteurs

Les données structurées sont du code que Google peut lire pour mieux comprendre une entreprise, un article, une FAQ, un produit ou une formation.

Ce code se place généralement dans le head ou en bas du body.

Performance : écrire un HTML plus léger

Un HTML propre aide la page à charger plus vite. Les images trop lourdes, les iframes inutiles et les ressources mal chargées peuvent ralentir fortement un site.

À retenir

Plus une page est claire et légère, plus elle est agréable pour l’utilisateur et plus elle a de chances d’être bien comprise par les moteurs.

Les erreurs HTML fréquentes

Voici les erreurs que l’on retrouve très souvent chez les débutants.

Mini-projet 1 : créer une page CV

Objectif : créer une page simple avec un titre, une présentation, une liste de compétences, une expérience et un lien de contact.

Mini-projet 2 : page restaurant

Objectif : créer une page de restaurant avec menu, horaires et formulaire de réservation.

Mini-projet 3 : landing page simple

Objectif : créer une page de vente claire avec une accroche, des bénéfices, des avis, une FAQ et un appel à l’action.

Exercices rapides pour progresser

Essayez de refaire ces exercices sans regarder la correction, puis comparez.

Exercice 1 : créer une section service

Exercice 2 : créer une carte produit

Exercice 3 : créer une FAQ

Quiz de validation

Répondez mentalement avant de regarder la correction.

Question 1

Quelle balise contient le contenu principal visible d’une page ?

Question 2

Quelle balise utiliser pour le titre principal de la page ?

Question 3

Pourquoi l’attribut alt est-il important sur une image ?

Récapitulatif HTML

Vous avez maintenant les bases solides pour lire, écrire et structurer une page HTML. Le plus important est de garder une structure claire, logique et accessible.

La suite logique

Après HTML, la suite naturelle est CSS pour apprendre à mettre en page, créer des grilles, gérer le responsive et donner une vraie identité visuelle au site.