HTML — Introduction — Cours HTML

Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

HTML — Introduction — Cours HTML | SovranCode

<a href="/fr/courses/html">
  Continuer le cours HTML
</a>

<!-- balise ouvrante : <a href="..."> -->
<!-- contenu : Continuer le cours HTML -->
<!-- balise fermante : </a> -->

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ma première page HTML</title>
  </head>
  <body>
    <h1>Bonjour le web !</h1>
    <p>J’ai créé cette page avec HTML.</p>
  </body>
</html>

APPROFONDIR ET PRATIQUER · ENVIRON 25 MIN

Comprenez. Créez. Expliquez.

Explorez l’exemple, essayez de corriger le code avant de consulter la solution, puis créez votre propre version.

Les objectifs de cet atelier

Distinguer le sens du document de son apparence et de son comportement
Suivre le parcours d’un fichier HTML, du texte enregistré au DOM du navigateur
Créer une petite page d’information facile à lire

Une page web est d’abord un document

Imaginez une annonce pour un atelier de quartier. Avant de choisir les couleurs, précisez les informations utiles : le nom de l’événement, son objectif, la date et la façon de réserver. HTML décrit ces relations. Un titre annonce un sujet, un paragraphe l’explique et un lien indique une destination. Cette structure reste utile quand on agrandit le texte, désactive les styles ou navigue de titre en titre.

HTML ne calcule pas les places disponibles et ne conserve pas les réservations. CSS gère la présentation, JavaScript peut ajouter des comportements et un serveur peut traiter les données envoyées. Ces rôles se complètent sans se remplacer : donner à un paragraphe l’apparence d’un bouton ne lui donne pas le comportement d’un bouton au clavier.

Le code source, le DOM et l’affichage sont différents

Le fichier enregistré est du texte. Le navigateur l’analyse pour construire un arbre d’éléments, appelé DOM, puis calcule la mise en page et dessine le résultat. Ses styles par défaut expliquent pourquoi un titre paraît plus grand sans que vous ayez écrit de CSS. Cette apparence de départ ne définit pas le rôle du titre.

Le navigateur corrige de nombreuses erreurs de syntaxe au lieu d’afficher une erreur de compilation. Voir une page à l’écran prouve donc seulement qu’il a produit un résultat. Comparez le code source, l’arbre dans l’inspecteur et l’ordre de lecture souhaité : c’est plus instructif que de vérifier uniquement si la page semble correcte.

VOTRE ESPACE DE PRATIQUE

Transformez une annonce en document structuré

Créez une annonce qui précise le public, l’activité et l’horaire, même sans images ni styles.

Ouvrir dans un nouvel onglet

Code

<main lang="fr">
  <h1>Atelier web du quartier</h1>
  <p>Apprenez à créer une page utile avec HTML.</p>
  <h2>Quand venir</h2>
  <p>Samedi à 10 h. Apportez un ordinateur portable si vous en avez un.</p>
  <h2 id="booking">Réserver une place</h2>
  <p>Écrivez aux organisateurs pour connaître les places disponibles.</p>
</main>

<main lang="fr">
  <h1>Atelier web du quartier</h1>
  <p>Apprenez à créer une page utile avec HTML.</p>
  <h2>Quand venir</h2>
  <p>Samedi à 10 h. Apportez un ordinateur portable si vous en avez un.</p>
  <h2 id="booking">Réserver une place</h2>
  <p>Écrivez aux organisateurs pour connaître les places disponibles.</p>
</main>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Nom de la version

Vous pouvez conserver cinq versions nommées par exemple. Restaurer une version remplace le code dans l’éditeur sans modifier la version enregistrée. Connectez-vous avant de modifier le code pour enregistrer votre travail sur votre compte. Les brouillons invités restent sur cet appareil.

Chargement du travail enregistré…

Pourquoi cet exemple fonctionne

Main identifie le contenu principal de la page ; cet élément ne crée pas à lui seul une boîte visuelle.
Le h1 annonce le sujet principal. Les deux h2 présentent des parties de ce sujet, sans devenir des titres principaux concurrents.
L’identifiant booking désigne cet élément précis. Vous pourrez ensuite créer un lien vers #booking sans modifier le texte visible du titre.

À VOUS DE CORRIGER

Un texte important qui n’est pas encore un titre

Repérez le problème et proposez une correction. Expliquez ce qu’elle améliore dans le document, même si les deux versions se ressemblent à l’écran.

<p><strong>Les horaires de l’atelier</strong></p>
<p>Les portes ouvrent à 10 h.</p>

Afficher la correction et son explication

<h1>Les horaires de l’atelier</h1>
<p>Les portes ouvrent à 10 h.</p>

Strong indique l’importance d’un contenu, mais ne crée pas un titre. La correction ajoute une structure dans laquelle on peut naviguer. Vous pourrez ensuite réduire la taille du h1 avec CSS sans perdre son rôle de titre.

À VOUS DE CRÉER

Créez une page d’annonce utile

Rédigez une page d’information complète pour un événement local imaginaire. Utilisez des coordonnées fictives plutôt que vos informations personnelles.

Votre plan de réalisation

Rédigez les informations sur l’événement en langage clair avant de choisir les balises.
Créez index.html avec un doctype, une langue, head, title et body.
Utilisez une zone main, un titre principal et au moins deux sections avec un titre.
Enregistrez, rouvrez le fichier et modifiez une information. Comparez le code source avec l’inspecteur du navigateur.

Vérifiez votre travail

Cette grille vous aide à évaluer votre travail ; elle ne donne pas de note automatique. Enregistrez vos fichiers et vérifiez chaque critère avant de marquer la leçon comme terminée.

L’onglet du navigateur et le titre visible permettent tous deux d’identifier l’événement.
Toutes les informations restent lisibles sans CSS et sans image.
Vous savez expliquer le rôle de chaque élément sans parler de sa couleur ni de sa taille.

Pour aller plus loin : Demandez à une autre personne de retrouver l’horaire et les consignes de réservation en parcourant uniquement les titres.

Savez-vous expliquer votre choix ?

Répondez d’abord avec vos propres mots, puis comparez votre raisonnement.

Pourquoi un code HTML invalide peut-il sembler fonctionner ?

L’analyseur du navigateur dispose de règles de récupération des erreurs. Il peut construire un DOM utilisable à partir d’un code incorrect, mais ce DOM peut différer de la structure que vous aviez prévue.

Une page simple sans JavaScript peut-elle faire partie d’un site web ?

Oui. Des documents HTML reliés entre eux permettent déjà de naviguer et de s’informer. JavaScript devient utile lorsque le comportement demandé l’exige ; une page peut être utile sans lui.

VOTRE ESPACE DE PRATIQUE

Créez une petite page de présentation

Utilisez des éléments adaptés au contenu pour vous présenter. Essayez d’ajouter un élément de liste ou un lien.

Ouvrir dans un nouvel onglet

Code

<main lang="fr">
  <header>
    <p>APPRENDRE HTML</p>
    <h1>Bonjour, je m’appelle Alex.</h1>
  </header>

  <section>
    <h2>À propos de moi</h2>
    <p>J’apprends à créer des pages web utiles.</p>
  </section>

  <section>
    <h2>Mes prochaines étapes</h2>
    <ul>
      <li>Découvrir les titres et les paragraphes</li>
      <li>Créer des liens utiles</li>
      <li>Présenter un projet</li>
    </ul>
  </section>
</main>

<main lang="fr">
  <header>
    <p>APPRENDRE HTML</p>
    <h1>Bonjour, je m’appelle Alex.</h1>
  </header>

  <section>
    <h2>À propos de moi</h2>
    <p>J’apprends à créer des pages web utiles.</p>
  </section>

  <section>
    <h2>Mes prochaines étapes</h2>
    <ul>
      <li>Découvrir les titres et les paragraphes</li>
      <li>Créer des liens utiles</li>
      <li>Présenter un projet</li>
    </ul>
  </section>
</main>

Résultat

Nom de la version

Chargement du travail enregistré…

Vos choix de confidentialité

Les bases de HTML

Organiser le texte et le contenu

Ajouter des liens et des médias

Présenter des listes et des tableaux

Créer des formulaires

Donner du sens à vos pages

Accessibilité et bonnes pratiques

Références et mise en pratique

HTML — Introduction

À quoi sert HTML ?

Éléments, balises et attributs

La structure d’un document HTML

Head et body : deux rôles différents

Créez, enregistrez et inspectez votre première page

Choisissez les éléments pour leur sens

À retenir

Comprenez. Créez. Expliquez.

Les objectifs de cet atelier

Une page web est d’abord un document

Le code source, le DOM et l’affichage sont différents

Transformez une annonce en document structuré

Code

Résultat

Pourquoi cet exemple fonctionne

Un texte important qui n’est pas encore un titre

Créez une page d’annonce utile

Votre plan de réalisation

Vérifiez votre travail

Savez-vous expliquer votre choix ?

Expérimentez avec la structure du document

Code

Résultat

Créez une petite page de présentation

Code

Résultat

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris

Vérifiez vos acquis