{
"chapter": {
"id": "html-structure",
"level": "premiere",
"theme": "IHM Web",
"title": "Structure HTML",
"description": "Langage HTML : balises, attributs, structure d'une page\n(doctype, html, head, body), balises sémantiques, en-têtes,\nparagraphes, listes, liens, images, tableaux.",
"prerequisites": [],
"references": []
},
"questions": [
{
"id": "q01",
"difficulty": 1,
"skills": [
"definition"
],
"title": "Que signifie HTML ?",
"statement": "Que signifie l'acronyme **HTML** ?",
"options": [
{
"text": "High Tech Modern Language",
"correct": false,
"feedback": "Cette expression n'a\naucune signification\nhistorique. Le sigle HTML\ndécrit précisément la\nnature du langage : un\nbalisage hypertexte.\n"
},
{
"text": "Hypertext Modern Layout",
"correct": false,
"feedback": "Erreur : nom incorrect.\n"
},
{
"text": "Home Tool Markup Language",
"correct": false,
"feedback": "Erreur : nom incorrect.\n"
},
{
"text": "HyperText Markup Language",
"correct": true,
"feedback": "Bonne réponse : HTML est un **langage de\nbalisage** (markup) pour structurer des\ndocuments hypertexte (avec liens). Inventé\npar Tim Berners-Lee en 1991.\n"
}
],
"explanation": "« Hypertext » désigne les liens ; « markup »\nindique qu'on utilise des balises ; « language »\nqu'il s'agit d'un langage formel (mais pas un\nlangage de programmation au sens strict)."
},
{
"id": "q02",
"difficulty": 1,
"skills": [
"balise"
],
"title": "Balise HTML",
"statement": "Quelle est la **forme générale** d'une balise HTML ?",
"options": [
{
"text": "`balise(contenu)`",
"correct": false,
"feedback": "Erreur : pas de parenthèses.\n"
},
{
"text": "`contenu`",
"correct": true,
"feedback": "Bonne réponse : balise ouvrante, contenu,\nbalise fermante. Certaines balises sont\nauto-fermantes comme `` ou ` `.\n"
},
{
"text": "`{balise contenu}`",
"correct": false,
"feedback": "Erreur : pas d'accolades en HTML.\n"
},
{
"text": "`[balise: contenu]`",
"correct": false,
"feedback": "Erreur : pas de crochets.\n"
}
],
"explanation": "Les balises sont encadrées par `<` et `>`. La\nbalise fermante a un `/` en plus. Le HTML\ntolère certaines erreurs de fermeture, mais\nc'est une mauvaise pratique."
},
{
"id": "q03",
"difficulty": 1,
"skills": [
"doctype"
],
"title": "Doctype",
"statement": "Que doit contenir la **première ligne** d'un\ndocument HTML moderne ?",
"options": [
{
"text": "``",
"correct": false,
"feedback": "Erreur : pareil, vient plus loin dans le\ndocument.\n"
},
{
"text": "``",
"correct": false,
"feedback": "Erreur : `` vient **après** la\ndéclaration de doctype.\n"
},
{
"text": "``",
"correct": true,
"feedback": "Bonne réponse : déclare au navigateur que\nc'est du HTML5. Sans doctype, les\nnavigateurs basculent en mode « quirks »\n(compatibilité HTML4 ancien) avec un rendu\nimprévisible.\n"
},
{
"text": "``",
"correct": false,
"feedback": "Erreur : `` vient à l'intérieur de\n``.\n"
}
],
"explanation": "`` est la déclaration HTML5\nsimplifiée. Les anciennes versions (HTML4,\nXHTML) avaient des doctypes plus longs."
},
{
"id": "q04",
"difficulty": 1,
"skills": [
"structure-page"
],
"title": "Structure d'une page",
"statement": "Quelle est la **structure minimale** d'une page\nHTML5 ?",
"options": [
{
"text": "```html\n\n\n ...\n ...\n\n```\n",
"correct": true,
"feedback": "Bonne réponse : `` (méta-données :\ntitre, encodage, styles), `` (contenu\nvisible). Tous deux dans ``.\n"
},
{
"text": "```html\n...\n```\n",
"correct": false,
"feedback": "Erreur : il manque le doctype et ``.\n"
},
{
"text": "```html\n...\n```\n",
"correct": false,
"feedback": "Erreur : il manque le doctype, ``,\n``.\n"
},
{
"text": "```html\n...\n```\n",
"correct": false,
"feedback": "Erreur : `` est une balise sémantique\nà utiliser dans ``, pas comme\nstructure racine.\n"
}
],
"explanation": "`` contient titre (``), encodage\n(`<meta charset=\"utf-8\">`), feuilles de style\n(`<link>`), scripts (`<script>`). `<body>`\ncontient le contenu visible."
},
{
"id": "q05",
"difficulty": 1,
"skills": [
"titre"
],
"title": "Titres",
"statement": "Quelle balise produit un titre de **niveau 1**\n(le plus grand) ?",
"options": [
{
"text": "`<head>`",
"correct": false,
"feedback": "Erreur : `<head>` est la zone des\nméta-données.\n"
},
{
"text": "`<title1>`",
"correct": false,
"feedback": "Erreur : balise inexistante.\n"
},
{
"text": "`<title>`",
"correct": false,
"feedback": "Erreur : `<title>` est dans `<head>` et\ndéfinit le titre de l'onglet/de la page,\npas un titre visible.\n"
},
{
"text": "`<h1>`",
"correct": true,
"feedback": "Bonne réponse : `<h1>` (header level 1) à\n`<h6>` (level 6). Convention : un seul\n`<h1>` par page (le titre principal).\n"
}
],
"explanation": "Hiérarchie : `<h1>` à `<h6>`. Importante pour\nl'accessibilité et le référencement. Ne pas\nsauter de niveau (de `<h1>` à `<h3>`)."
},
{
"id": "q06",
"difficulty": 1,
"skills": [
"paragraphe"
],
"title": "Paragraphe",
"statement": "Quelle balise délimite un **paragraphe** de texte ?",
"options": [
{
"text": "`<para>`",
"correct": false,
"feedback": "Erreur : balise inexistante.\n"
},
{
"text": "`<paragraph>`",
"correct": false,
"feedback": "Erreur : balise inexistante. Le nom est\nabrégé en `<p>`.\n"
},
{
"text": "`<text>`",
"correct": false,
"feedback": "Erreur : balise inexistante en HTML standard.\n"
},
{
"text": "`<p>`",
"correct": true,
"feedback": "Bonne réponse : `<p>` (paragraph). Le\nnavigateur ajoute automatiquement un\nespacement avant et après.\n"
}
],
"explanation": "`<p>` est l'une des balises les plus utilisées.\nPour un saut de ligne simple sans nouveau\nparagraphe, utiliser `<br>`."
},
{
"id": "q07",
"difficulty": 1,
"skills": [
"lien"
],
"title": "Lien hypertexte",
"statement": "Quelle est la syntaxe d'un **lien** vers\n`https://example.com` ?",
"options": [
{
"text": "`<link href=\"https://example.com\">texte</link>`",
"correct": false,
"feedback": "Erreur : `<link>` est utilisée dans `<head>`\npour les feuilles de style, pas pour les\nliens visibles.\n"
},
{
"text": "`<href=\"https://example.com\">texte</href>`",
"correct": false,
"feedback": "Erreur : pas de balise `<href>`. C'est un\nattribut.\n"
},
{
"text": "`<url=\"https://example.com\">texte</url>`",
"correct": false,
"feedback": "Erreur : pas de balise `<url>` non plus.\n"
},
{
"text": "`<a href=\"https://example.com\">texte</a>`",
"correct": true,
"feedback": "Bonne réponse : `<a>` (anchor) avec\nl'attribut `href` (hypertext reference).\nLe texte entre les balises est le texte\ncliquable.\n"
}
],
"explanation": "Attribut `target=\"_blank\"` pour ouvrir dans un\nnouvel onglet. Pour un lien interne (vers une\nancre dans la page) : `<a href=\"#section1\">`."
},
{
"id": "q08",
"difficulty": 1,
"skills": [
"image"
],
"title": "Image",
"statement": "Quelle est la balise pour afficher une **image** ?",
"options": [
{
"text": "`<image src=\"...\">`",
"correct": false,
"feedback": "Erreur : balise inexistante en HTML. Le\nnom est abrégé.\n"
},
{
"text": "`<picture src=\"...\">`",
"correct": false,
"feedback": "`<picture>` existe (pour les images\nresponsives), mais c'est plus complexe et\ncontient plusieurs `<source>` et un\n`<img>`.\n"
},
{
"text": "`<src=\"...\">`",
"correct": false,
"feedback": "Erreur : `src` est un attribut, pas une\nbalise.\n"
},
{
"text": "`<img src=\"...\" alt=\"...\">`",
"correct": true,
"feedback": "Bonne réponse : `<img>` avec `src` (chemin)\net `alt` (texte alternatif pour\nl'accessibilité et si l'image ne charge\npas). Balise auto-fermante.\n"
}
],
"explanation": "L'attribut `alt` est **obligatoire** pour\nl'accessibilité (lecteurs d'écran). Sans `alt`,\nla page n'est pas accessible."
},
{
"id": "q09",
"difficulty": 1,
"skills": [
"liste-non-ordonnee"
],
"title": "Liste non ordonnée",
"statement": "Quelle balise crée une **liste à puces** ?",
"options": [
{
"text": "`<ol>` (ordered list)",
"correct": false,
"feedback": "Erreur : `<ol>` est une liste **ordonnée**\n(numérotée).\n"
},
{
"text": "`<list>`",
"correct": false,
"feedback": "Erreur : balise inexistante.\n"
},
{
"text": "`<ul>` (unordered list)",
"correct": true,
"feedback": "Bonne réponse : `<ul>` contient des\n`<li>` (list item). Affichage avec puces\npar défaut.\n"
},
{
"text": "`<bullet>`",
"correct": false,
"feedback": "Erreur : balise inexistante.\n"
}
],
"explanation": "Mnémotechnique : **u** = unordered (puces),\n**o** = ordered (numéros). Les deux contiennent\ndes `<li>`."
},
{
"id": "q10",
"difficulty": 1,
"skills": [
"attribut"
],
"title": "Attributs",
"statement": "Dans `<a href=\"page.html\">lien</a>`, qu'est-ce\nque `href` ?",
"options": [
{
"text": "Une variable JavaScript",
"correct": false,
"feedback": "Une variable JavaScript\nappartient au langage\nde programmation, pas\nau balisage HTML. Un\nattribut HTML décrit\nquant à lui la balise\ndans laquelle il figure.\n"
},
{
"text": "Une balise",
"correct": false,
"feedback": "Erreur : `href` est à l'intérieur d'une\nbalise.\n"
},
{
"text": "Une fonction",
"correct": false,
"feedback": "Une fonction est une\nconstruction propre aux\nlangages de programmation.\nEn HTML, on ne définit\npas de fonctions ; on\ndécrit la structure d'un\ndocument.\n"
},
{
"text": "Un attribut de la balise `<a>`",
"correct": true,
"feedback": "Bonne réponse : un attribut a la forme\n`nom=\"valeur\"` et complète l'information\nde la balise.\n"
}
],
"explanation": "Attributs courants : `id`, `class`, `style`,\n`href`, `src`, `alt`. La syntaxe est toujours\n`attribut=\"valeur\"` à l'intérieur de la balise\nouvrante."
},
{
"id": "q11",
"difficulty": 2,
"skills": [
"semantique"
],
"title": "Balises sémantiques",
"statement": "Pourquoi préfère-t-on les balises **sémantiques**\n(`<header>`, `<nav>`, `<article>`, `<footer>`)\nà des `<div>` génériques ?",
"options": [
{
"text": "Pour l'accessibilité (lecteurs d'écran), le référencement (SEO) et la lisibilité du code",
"correct": true,
"feedback": "Bonne réponse : les balises sémantiques\ndécrivent la fonction de la zone, pas son\napparence. Bénéfices techniques et\nmaintenabilité.\n"
},
{
"text": "Parce que `<div>` est obsolète",
"correct": false,
"feedback": "Erreur : `<div>` reste très utilisé pour\nregrouper du contenu sans signification\nsémantique particulière.\n"
},
{
"text": "Pour le rendu visuel",
"correct": false,
"feedback": "Erreur : par défaut, le rendu visuel est le\nmême qu'un `<div>`.\n"
},
{
"text": "Parce que ces balises sont plus rapides",
"correct": false,
"feedback": "Erreur : aucune différence de performance.\n"
}
],
"explanation": "Balises sémantiques HTML5 : `<header>`,\n`<nav>`, `<main>`, `<article>`, `<section>`,\n`<aside>`, `<footer>`. Apparues en 2014 pour\nremplacer les `<div class=\"header\">`\nomniprésents."
},
{
"id": "q12",
"difficulty": 2,
"skills": [
"div-span"
],
"title": "div vs span",
"statement": "Quelle est la différence entre `<div>` et\n`<span>` ?",
"options": [
{
"text": "`<div>` est obsolète",
"correct": false,
"feedback": "Erreur : très utilisé.\n"
},
{
"text": "`<div>` est un conteneur de bloc (prend toute la largeur, saut de ligne) ; `<span>` est un conteneur inline (intégré dans le flux du texte)",
"correct": true,
"feedback": "Bonne réponse : distinction fondamentale en\nHTML/CSS. `<div>` est utilisé pour\nstructurer des sections ; `<span>` pour\nmettre en forme une portion de texte au\nsein d'une phrase.\n"
},
{
"text": "Aucune",
"correct": false,
"feedback": "Erreur : différence importante de\ncomportement.\n"
},
{
"text": "`<span>` ne fonctionne que dans `<head>`",
"correct": false,
"feedback": "Erreur : `<span>` fonctionne dans `<body>`.\n"
}
],
"explanation": "Tous les éléments HTML ont une nature : **bloc**\n(par défaut sur une nouvelle ligne) ou **inline**\n(dans le flux). On peut changer cela en CSS\navec `display: block;` ou `display: inline;`."
},
{
"id": "q13",
"difficulty": 2,
"skills": [
"meta-charset"
],
"title": "Encodage",
"statement": "À quoi sert\n`<meta charset=\"utf-8\">` dans `<head>` ?",
"options": [
{
"text": "À définir la couleur de la page",
"correct": false,
"feedback": "Erreur : aucun rapport avec les couleurs\n(c'est CSS).\n"
},
{
"text": "À indiquer au navigateur l'encodage des caractères du document (ici UTF-8, qui supporte les caractères français, asiatiques, emojis...)",
"correct": true,
"feedback": "Bonne réponse : sans déclaration, le\nnavigateur peut interpréter les caractères\naccentués différemment (par exemple, voir\n« café » au lieu de « café »).\n"
},
{
"text": "À activer JavaScript",
"correct": false,
"feedback": "JavaScript s'active par\nla balise `<script>`. La\nbalise `<meta charset>`\nne joue aucun rôle dans\nl'exécution du code, elle\nprécise uniquement le jeu\nde caractères du document.\n"
},
{
"text": "À cacher la page aux moteurs de recherche",
"correct": false,
"feedback": "Erreur : c'est `<meta name=\"robots\"\ncontent=\"noindex\">`.\n"
}
],
"explanation": "UTF-8 est aujourd'hui le standard universel.\nToujours le déclarer en première ligne du\n`<head>` pour garantir un affichage correct\ndes caractères spéciaux."
},
{
"id": "q14",
"difficulty": 2,
"skills": [
"classe-id"
],
"title": "class et id",
"statement": "Quelle est la différence entre les attributs\n`class` et `id` ?",
"options": [
{
"text": "`class` est obsolète",
"correct": false,
"feedback": "Erreur : très utilisé.\n"
},
{
"text": "`id` doit être unique dans la page ; `class` peut être attribuée à plusieurs éléments",
"correct": true,
"feedback": "Bonne réponse : `id` identifie un seul\nélément (par exemple `id=\"header-principal\"`),\n`class` regroupe des éléments partageant un\nstyle (par exemple `class=\"bouton\"`).\n"
},
{
"text": "`id` ne fonctionne pas en HTML5",
"correct": false,
"feedback": "Erreur : fonctionne parfaitement.\n"
},
{
"text": "Aucune, ce sont des synonymes",
"correct": false,
"feedback": "Erreur : différence importante.\n"
}
],
"explanation": "Bonne pratique : utiliser surtout `class` pour\nle style ; `id` pour les ancres et les\néléments uniques nécessitant une référence\nJavaScript."
},
{
"id": "q15",
"difficulty": 2,
"skills": [
"tableau"
],
"title": "Tableau",
"statement": "Quelles balises HTML structurent un **tableau** ?",
"options": [
{
"text": "`<table>`, `<tr>` (table row), `<td>` (table data) et `<th>` (table header)",
"correct": true,
"feedback": "Bonne réponse : structure standard. `<th>`\npour les en-têtes (mis en gras et centré\npar défaut). `<thead>`, `<tbody>`, `<tfoot>`\npour les groupements.\n"
},
{
"text": "`<grid>`, `<row>`, `<cell>`",
"correct": false,
"feedback": "Erreur : balises inexistantes.\n"
},
{
"text": "`<table>` seul suffit",
"correct": false,
"feedback": "Erreur : il faut aussi `<tr>` et `<td>` (ou\n`<th>`) pour avoir un contenu.\n"
},
{
"text": "`<spreadsheet>`, `<line>`, `<column>`",
"correct": false,
"feedback": "Erreur : balises inexistantes.\n"
}
],
"explanation": "Aujourd'hui, on n'utilise plus les tableaux\npour la mise en page (grosse erreur d'antan) ;\nils sont réservés aux données réellement\ntabulaires. Pour la mise en page : Flexbox ou\nGrid CSS."
},
{
"id": "q16",
"difficulty": 2,
"skills": [
"imbriquation"
],
"title": "Imbrication correcte",
"statement": "Lequel des codes suivants est **incorrect** ?",
"options": [
{
"text": "```html\n<a href=\"x\"><strong>texte</strong></a>\n```\n",
"correct": false,
"feedback": "Correct : un inline dans un autre inline.\n"
},
{
"text": "```html\n<ul><li>élément</li></ul>\n```\n",
"correct": false,
"feedback": "Correct : `<li>` dans `<ul>`.\n"
},
{
"text": "```html\n<p>Voici un <strong>mot</strong> important.</p>\n```\n",
"correct": false,
"feedback": "Correct : un élément inline (`<strong>`)\ndans un bloc (`<p>`).\n"
},
{
"text": "```html\n<p>Texte <p>imbriqué</p>.</p>\n```\n",
"correct": true,
"feedback": "Incorrect (donc bonne réponse) : on ne\npeut pas imbriquer un `<p>` dans un autre\n`<p>`. Le navigateur fermera\nautomatiquement le premier au début du\nsecond.\n"
}
],
"explanation": "Règles d'imbrication HTML : un bloc peut\ncontenir des inlines, mais pas l'inverse en\ngénéral. `<p>` ne peut pas contenir de bloc\n(ni un autre `<p>`)."
},
{
"id": "q17",
"difficulty": 2,
"skills": [
"auto-fermante"
],
"title": "Balises auto-fermantes",
"statement": "Lesquelles de ces balises sont **auto-fermantes**\n(sans balise fermante) ?",
"options": [
{
"text": "`<img>`, `<br>`, `<hr>`, `<meta>`, `<link>`, `<input>`",
"correct": true,
"feedback": "Bonne réponse : ces balises sont dites\n« void » : elles n'ont pas de contenu donc\npas de fermeture. En HTML5 on peut écrire\n`<br>` ou `<br />`.\n"
},
{
"text": "`<p>`, `<div>`, `<span>`",
"correct": false,
"feedback": "Erreur : ces balises requièrent une fermeture.\n"
},
{
"text": "`<title>`",
"correct": false,
"feedback": "Erreur : `<title>` doit être fermée\n(`<title>Mon site`).\n"
},
{
"text": "``, ``",
"correct": false,
"feedback": "Erreur : ces balises **doivent** être\nfermées (elles contiennent du contenu).\n"
}
],
"explanation": "Liste des principales : ``, ``,\n` `, `