← Tous les outils

HTML

Gratuit

Les fondations du web. Structure, sémantique, accessibilité : tout commence par l'HTML. Même généré par IA, le comprendre permet de corriger et d'optimiser.

HTML, c'est la fondation du web. Sans lui, il n'y a pas de page web.

La bonne nouvelle, c'est que HTML est probablement le langage le plus simple à apprendre. Parce qu'il n'y a pas de logique. Pas de conditions, pas de boucles, pas de variables, pas d'algorithmes. HTML, c'est un langage de présentation : tu décris la structure de ta page, point barre.

L'anatomie d'une page HTML

Une page HTML, ça ressemble à ça :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ma première page</title>
</head>
<body>
  <header>
    <h1>Mon site</h1>
    <nav>
      <a href="/">Accueil</a>
      <a href="/a-propos">À propos</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Titre de l'article</h2>
      <p>Un paragraphe de contenu.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 - Mon site</p>
  </footer>
</body>
</html>

Chaque balise a un rôle précis, comme tu viens de le voir.

Les balises essentielles

Il existe des centaines de balises HTML, mais dans la pratique, tu en utilises une vingtaine.

La structure :

  • <!DOCTYPE html> : déclaration du type de document
  • <html> : la racine de la page
  • <head> : les métadonnées (invisibles à l'écran)
  • <body> : tout ce qui s'affiche

Dans le <head> :

  • <title> : le titre dans l'onglet du navigateur
  • <meta charset="UTF-8"> : l'encodage des caractères
  • <meta name="viewport"> : l'affichage sur mobile
  • <link> : pour charger CSS, polices, favicon

Le texte :

  • <h1> à <h6> : titres (du plus important au moins important)
  • <p> : paragraphe
  • <strong> : texte important (gras)
  • <em> : texte emphatique (italique)
  • <br> : saut de ligne

Les liens et images :

  • <a href="..."> : un lien hypertexte
  • <img src="..." alt="..."> : une image (le alt est essentiel pour l'accessibilité)

Les listes :

  • <ul> : liste non ordonnée (à puces)
  • <ol> : liste ordonnée (numérotée)
  • <li> : élément de liste

Les conteneurs :

  • <div> : bloc générique
  • <span> : élément en ligne générique
  • <header>, <footer>, <main>, <nav>, <section>, <article> : balises sémantiques HTML5

La sémantique, c'est important

Une des forces de HTML, c'est la sémantique. Chaque balise a une signification. <h1> n'est pas juste « un gros titre » : c'est le titre principal de la page, celui qui décrit son contenu. <nav> n'est pas juste « une zone de navigation » : c'est le bloc qui contient les liens de navigation principaux.

Utiliser les bonnes balises au bon endroit, c'est ce qu'on appelle un HTML sémantique. Ça aide :

  • Les moteurs de recherche à comprendre ta page (SEO)
  • Les lecteurs d'écran à naviguer (accessibilité)
  • Toi-même à t'y retrouver dans ton code

HTML et le vibe coding

L'IA génère du HTML très correct, souvent même meilleur que ce qu'un débutant écrirait. Mais comprendre ce qu'elle produit te permet de :

  • Correction rapide : une balise fermée au mauvais endroit, un attribut manquant
  • Ajustement de structure : déplacer une section, ajouter un conteneur
  • Accessibilité : vérifier que les alt sont présents, que la hiérarchie des titres est logique
  • Intégration : savoir où coller le code généré par un autre outil

Le HTML, c'est comme les fondations d'une maison : tu n'as pas besoin de les poser toi-même à chaque projet, mais savoir à quoi elles ressemblent t'évite de construire de travers.

Ressources