Exercices HTML

Exercice 1 — Ajoute les balises manquantes

Ce code HTML est incomplet. Pour chaque ligne, choisis la balise qui manque. Clique sur la bonne réponse !

Ligne 1 — il manque la balise fermante du titre :

<h1>Bonjour le monde ! ???

Ligne 2 — il manque la balise ouvrante du lien :

??? href="https://google.com">Clique ici</a>

Ligne 3 — il manque la balise fermante de la liste :

<ul>
  <li>Pomme</li>
  <li>Banane</li>
???

Ligne 4 — il manque la balise fermante du paragraphe :

<p>J'apprends le HTML ! ???

Ligne 5 — il manque la balise ouvrante de l'image :

??? src="chien.jpg" alt="Un chien">

Ligne 6 — il manque la balise fermante du footer :

<footer>
  <p>© 2024</p>
???

Exercice 2 — Indente ce code

Le code ci-dessous est mal indenté : tout est collé à gauche. Utilise Tab pour décaler les lignes à droite et Shift+Tab pour revenir à gauche. Dans un vrai éditeur, tu peux aussi appuyer sur Shift+Alt+F pour tout formater d'un coup !

Objectif : faire ressembler ton code à la version bien indentée juste en dessous.

Ton code à indenter — clique dedans et utilise Tab :

<body>
<header>
<h1>Mon site</h1>
<nav>
<a href="accueil.html">Accueil</a>
</nav>
</header>
<main>
<p>Bienvenue !</p>
</main>
<footer>
<p>© 2024</p>
</footer>
</body>

Version bien indentée (objectif à atteindre) :

<body>
  <header>
    <h1>Mon site</h1>
    <nav>
      <a href="accueil.html">Accueil</a>
    </nav>
  </header>
  <main>
    <p>Bienvenue !</p>
  </main>
  <footer>
    <p>© 2024</p>
  </footer>
</body>

💡 Regarder l'indentation, c'est la façon la plus rapide de savoir quelle balise est à l'intérieur de quelle autre. Plus une ligne est décalée à droite, plus elle est profondément imbriquée !