Erreurs et Corrections – HTML et CSS (Niveau Intermédiaire)
Section HTML
HTML — Question 1
Code erroné :
<html><head><title>Page<title></head></html>
Erreur : La balise <title> n’est pas correctement fermée.
Code corrigé :
<html><head><title>Page</title></head></html>
Explication : Les balises <title> doivent toujours être fermées pour que le titre s’affiche
correctement.
HTML — Question 2
Code erroné :
<a href=[Link] le site</a>
Erreur : Les guillemets autour de l’attribut href sont manquants.
Code corrigé :
<a href="[Link] le site</a>
Explication : Les attributs HTML doivent toujours être entourés de guillemets.
HTML — Question 3
Code erroné :
<img src='[Link]' alt=Image>
Erreur : L’attribut alt n’est pas entouré de guillemets.
Code corrigé :
<img src='[Link]' alt='Image'>
Explication : Tous les attributs doivent être correctement délimités.
HTML — Question 4
Code erroné :
<ul><li>Item 1<li>Item 2</ul>
Erreur : Les balises <li> ne sont pas fermées.
Code corrigé :
<ul><li>Item 1</li><li>Item 2</li></ul>
Explication : Chaque élément de liste doit être correctement fermé.
HTML — Question 5
Code erroné :
<p><strong>Texte important</p></strong>
Erreur : Les balises sont mal imbriquées.
Code corrigé :
<p><strong>Texte important</strong></p>
Explication : L’ordre d’ouverture doit correspondre à l’ordre de fermeture.
HTML — Question 6
Code erroné :
<form><input type='text'><button>Envoyer</form>
Erreur : La balise <button> n’est pas fermée avant la fermeture du formulaire.
Code corrigé :
<form><input type='text'><button>Envoyer</button></form>
Explication : Toutes les balises doivent être correctement fermées avant la fin du
formulaire.
HTML — Question 7
Code erroné :
<div class='contenu><p>Texte</p></div>
Erreur : Les guillemets autour de l’attribut class sont mal fermés.
Code corrigé :
<div class='contenu'><p>Texte</p></div>
Explication : Une erreur de guillemet peut casser la structure HTML.
HTML — Question 8
Code erroné :
<input type='email' required='true'>
Erreur : L’attribut required n’a pas besoin de valeur.
Code corrigé :
<input type='email' required>
Explication : Les attributs booléens comme required n’ont pas besoin de valeur.
HTML — Question 9
Code erroné :
<link rel='stylesheet' href='[Link]'></link>
Erreur : La balise <link> est auto-fermante et ne doit pas avoir de balise de fermeture.
Code corrigé :
<link rel='stylesheet' href='[Link]' />
Explication : La balise <link> doit être auto-fermée.
HTML — Question 10
Code erroné :
<meta charset='utf8'>
Erreur : L’encodage doit être correctement indiqué.
Code corrigé :
<meta charset='utf-8'>
Explication : La norme correcte est utf-8 avec un tiret.
HTML — Question 11
Code erroné :
<table><tr><td>Nom</tr></td></table>
Erreur : Les balises <tr> et <td> sont mal fermées.
Code corrigé :
<table><tr><td>Nom</td></tr></table>
Explication : Chaque ligne (<tr>) doit contenir des cellules (<td>) bien fermées.
HTML — Question 12
Code erroné :
<video src='video.mp4'></video>
Erreur : Il manque l’attribut controls pour permettre la lecture.
Code corrigé :
<video src='video.mp4' controls></video>
Explication : L’attribut controls permet à l’utilisateur de lire la vidéo.
HTML — Question 13
Code erroné :
<h2>Section<h3>Sous-section</h2></h3>
Erreur : Les titres sont mal imbriqués.
Code corrigé :
<h2>Section</h2><h3>Sous-section</h3>
Explication : Chaque titre doit être bien séparé et dans le bon ordre.
HTML — Question 14
Code erroné :
<button onclick='alert('Salut')'>Clique</button>
Erreur : Les guillemets intérieurs causent une erreur de syntaxe.
Code corrigé :
<button onclick="alert('Salut')">Clique</button>
Explication : Les guillemets doivent être alternés ou échappés.
HTML — Question 15
Code erroné :
<p>Bonjour<br><br><br>Comment ça va?</p>
Erreur : Trop de sauts de ligne inutiles.
Code corrigé :
<p>Bonjour<br>Comment ça va?</p>
Explication : Il faut éviter la répétition de balises de mise en page.
HTML — Question 16
Code erroné :
<a href='#'>Clique ici<span>!</a></span>
Erreur : Les balises sont mal imbriquées.
Code corrigé :
<a href='#'>Clique ici<span>!</span></a>
Explication : L’ordre d’ouverture et fermeture doit être respecté.
HTML — Question 17
Code erroné :
<iframe src='[Link]'></iframe
Erreur : La balise n’est pas correctement fermée.
Code corrigé :
<iframe src='[Link]'></iframe>
Explication : Toujours fermer les balises correctement.
HTML — Question 18
Code erroné :
<html lang='fr'><head><meta charset='UTF8'></head>
Erreur : Le document HTML n’a pas de balise <body>.
Code corrigé :
<html lang='fr'><head><meta charset='UTF-8'></head><body></body></html>
Explication : Une structure HTML valide doit contenir <html>, <head> et <body>.
HTML — Question 19
Code erroné :
<header><h1>Titre<header>
Erreur : La balise de fermeture <header> est incorrecte.
Code corrigé :
<header><h1>Titre</h1></header>
Explication : Les balises d’en-tête doivent être correctement fermées.
HTML — Question 20
Code erroné :
<div><p>Texte<div>
Erreur : La dernière balise <div> n’est pas fermée.
Code corrigé :
<div><p>Texte</p></div>
Explication : Toujours fermer les balises imbriquées correctement.
Section CSS
CSS — Question 1
Code erroné :
body { color blue; }
Erreur : Il manque les deux-points après la propriété.
Code corrigé :
body { color: blue; }
Explication : Chaque propriété CSS doit être suivie de deux-points.
CSS — Question 2
Code erroné :
p { font-size = 16px; }
Erreur : Le signe égal est incorrect.
Code corrigé :
p { font-size: 16px; }
Explication : En CSS, on utilise : et non =.
CSS — Question 3
Code erroné :
h1 { color: red } p { color: blue }
Erreur : Il manque un point-virgule à la fin de la première déclaration.
Code corrigé :
h1 { color: red; } p { color: blue; }
Explication : Chaque déclaration doit être terminée par un point-virgule.
CSS — Question 4
Code erroné :
div { background-color: #ff0000; border 1px solid black; }
Erreur : Il manque les deux-points après border.
Code corrigé :
div { background-color: #ff0000; border: 1px solid black; }
Explication : Chaque propriété doit avoir un deux-points.
CSS — Question 5
Code erroné :
.menu li {list-style none;}
Erreur : Il manque les deux-points.
Code corrigé :
.menu li { list-style: none; }
Explication : Toujours écrire : après le nom de la propriété.
CSS — Question 6
Code erroné :
#titre { font-weigth: bold; }
Erreur : Erreur d’orthographe dans la propriété font-weight.
Code corrigé :
#titre { font-weight: bold; }
Explication : Vérifiez toujours l’orthographe des propriétés CSS.
CSS — Question 7
Code erroné :
section { margin: 10 20px; }
Erreur : La première valeur manque d’unité.
Code corrigé :
section { margin: 10px 20px; }
Explication : Toutes les valeurs numériques doivent avoir une unité.
CSS — Question 8
Code erroné :
p color: red;
Erreur : Les accolades sont manquantes.
Code corrigé :
p { color: red; }
Explication : Chaque règle CSS doit être contenue dans des accolades.
CSS — Question 9
Code erroné :
a { text-decoration none }
Erreur : Il manque les deux-points et le point-virgule.
Code corrigé :
a { text-decoration: none; }
Explication : Les propriétés nécessitent : et se terminent par ;.
CSS — Question 10
Code erroné :
img { width: 100; }
Erreur : Il manque l’unité (px, %, etc.).
Code corrigé :
img { width: 100px; }
Explication : Les valeurs numériques nécessitent une unité.
CSS — Question 11
Code erroné :
.contenu { padding: 10px, 20px; }
Erreur : Les valeurs sont séparées par des virgules au lieu d’espaces.
Code corrigé :
.contenu { padding: 10px 20px; }
Explication : En CSS, on sépare les valeurs par des espaces.
CSS — Question 12
Code erroné :
h2 { color: #12345; }
Erreur : Code hexadécimal invalide.
Code corrigé :
h2 { color: #123456; }
Explication : Le code hexadécimal doit avoir 3 ou 6 chiffres.
CSS — Question 13
Code erroné :
div { border: solid black; 1px; }
Erreur : L’ordre des valeurs est incorrect.
Code corrigé :
div { border: 1px solid black; }
Explication : L’ordre correct est largeur, style, couleur.
CSS — Question 14
Code erroné :
p { font-size: 1.5em font-weight: bold; }
Erreur : Il manque un point-virgule entre les propriétés.
Code corrigé :
p { font-size: 1.5em; font-weight: bold; }
Explication : Chaque propriété doit être séparée par un point-virgule.
CSS — Question 15
Code erroné :
body { background-color: rgb(255,0,0,0.5); }
Erreur : La fonction rgb() ne prend que trois valeurs.
Code corrigé :
body { background-color: rgba(255,0,0,0.5); }
Explication : rgba() permet d’ajouter la transparence.
CSS — Question 16
Code erroné :
main { display: block inline; }
Erreur : Valeur invalide pour display.
Code corrigé :
main { display: inline-block; }
Explication : Utilisez une valeur valide telle que inline-block.
CSS — Question 17
Code erroné :
#id { margin-top: 10px; margin-top: 5px; }
Erreur : Propriété dupliquée.
Code corrigé :
#id { margin-top: 5px; }
Explication : Évitez les doublons inutiles.
CSS — Question 18
Code erroné :
.menu { color: red; Color: blue; }
Erreur : Les noms de propriétés CSS sont sensibles à la casse.
Code corrigé :
.menu { color: blue; }
Explication : CSS ne reconnaît pas les majuscules dans les propriétés.
CSS — Question 19
Code erroné :
div { border-radius: 5; }
Erreur : Il manque l’unité px.
Code corrigé :
div { border-radius: 5px; }
Explication : Ajoutez toujours une unité aux valeurs numériques.
CSS — Question 20
Code erroné :
footer { positon: fixed; }
Erreur : Erreur de frappe dans position.
Code corrigé :
footer { position: fixed; }
Explication : Les fautes de frappe empêchent le CSS d’être appliqué.
