{
"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 balisage** (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 : la balise `` (avec ou sans\nattribut `lang`) vient **après** la\ndéclaration de doctype, qui doit être la\ntoute première ligne.\n"
},
{
"text": "``",
"correct": false,
"feedback": "Erreur : la déclaration d'encodage se place\ntrès tôt, mais à l'intérieur de ``,\npas en première ligne du fichier.\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 ...\n\n```\n",
"correct": false,
"feedback": "Erreur : il manque la première ligne\n``, qui déclare le type de\ndocument et garantit un rendu conforme au\nstandard.\n"
},
{
"text": "```html\n\n ...\n ...\n```\n",
"correct": false,
"feedback": "Erreur : il manque l'élément racine ``,\nqui doit englober `` et ``.\n"
},
{
"text": "```html\n\n \n ...\n ...\n\n```\n",
"correct": false,
"feedback": "Erreur : la déclaration ``\ndoit être la **première ligne** du fichier,\navant `` ; placée à l'intérieur, elle\nn'est plus reconnue et le navigateur bascule\nen mode de compatibilité.\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>` (heading level 1,\ntitre de niveau 1) à `<h6>` (level 6).\nConvention : un seul `<h1>` par page (le\ntitre 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, le nom est\nabrégé en `<img>`. Piège : le parseur HTML\ncorrige silencieusement `<image>` en\n`<img>`, l'image s'affiche donc quand même\nsi on teste dans un navigateur.\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>`",
"correct": false,
"feedback": "Erreur : `<ol>` (*ordered list*) est une\nliste **ordonnée** (numérotée).\n"
},
{
"text": "`<list>`",
"correct": false,
"feedback": "Erreur : balise inexistante.\n"
},
{
"text": "`<ul>`",
"correct": true,
"feedback": "Bonne réponse : `<ul>` (*unordered list*)\ncontient des `<li>` (*list item*).\nAffichage avec puces par 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 imbriquée dans `<a>`",
"correct": false,
"feedback": "Erreur : `href` figure à l'intérieur de la\nbalise ouvrante, ce n'est pas une balise\nen soi.\n"
},
{
"text": "Une fonction appelée au clic",
"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": "q12",
"difficulty": 2,
"skills": [
"div-span"
],
"title": "div vs span",
"statement": "Quelle est la différence entre `<div>` et\n`<span>` ?",
"options": [
{
"text": "La balise `<div>` est désormais totalement obsolète",
"correct": false,
"feedback": "Erreur : très utilisé.\n"
},
{
"text": "`<div>` est un conteneur de bloc, `<span>` un conteneur en ligne",
"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, dans le flux.\n"
},
{
"text": "Aucune, les deux balises sont interchangeables",
"correct": false,
"feedback": "Erreur : leur comportement d'affichage\ndiffère fondamentalement (bloc contre\nen ligne).\n"
},
{
"text": "`<span>` ne peut s'utiliser que dans l'en-tête `<head>`",
"correct": false,
"feedback": "Erreur : `<span>` s'utilise dans `<body>`,\nau cœur du contenu visible.\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 fond de la page entière",
"correct": false,
"feedback": "Erreur : aucun rapport avec les couleurs\n(c'est CSS).\n"
},
{
"text": "À indiquer l'encodage des caractères du document",
"correct": true,
"feedback": "Bonne réponse : ici l'encodage UTF-8. Sans\ncette déclaration, le navigateur peut\ninterpréter les caractères accentués\ndifféremment (par exemple, voir « café »\nau lieu de « café » : les deux octets UTF-8\ndu « é » sont lus comme deux caractères\nlatin-1).\n"
},
{
"text": "À activer l'exécution du JavaScript dans la page",
"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 et remplacé par `id` en HTML5",
"correct": false,
"feedback": "Erreur : `class` reste l'un des attributs\nles plus utilisés, notamment pour le style.\n"
},
{
"text": "`id` est unique, `class` peut viser 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": "L'attribut `id` ne fonctionne plus du tout en HTML5",
"correct": false,
"feedback": "Erreur : `id` fonctionne parfaitement en\nHTML5 (ancres, JavaScript, CSS).\n"
},
{
"text": "Aucune, ce sont rigoureusement deux synonymes",
"correct": false,
"feedback": "Erreur : la différence est importante,\nl'unicité de `id` dans la page.\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>`, `<td>` et `<th>`",
"correct": true,
"feedback": "Bonne réponse : structure standard, avec\n`<tr>` (*table row*) pour les lignes,\n`<td>` (*table data*) pour les cellules et\n`<th>` (*table header*) pour les en-têtes\n(gras et centré par défaut). `<thead>`,\n`<tbody>`, `<tfoot>` pour les groupements.\n"
},
{
"text": "`<grid>`, `<row>`, `<cell>`",
"correct": false,
"feedback": "Erreur : balises inexistantes.\n"
},
{
"text": "La balise `<table>` toute seule, sans balises internes",
"correct": false,
"feedback": "Erreur : il faut aussi `<tr>` et `<td>` (ou\n`<th>`) pour avoir un contenu.\n"
},
{
"text": "Les balises `<spreadsheet>`, `<line>` et `<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>`, `<script>`, `<style>`",
"correct": false,
"feedback": "Erreur : ces trois balises exigent une\nfermeture explicite, car elles contiennent\ndu contenu (`<title>Mon site`).\n"
},
{
"text": "Les balises `` et `` du squelette",
"correct": false,
"feedback": "Erreur : ces balises **doivent** être\nfermées (elles contiennent du contenu).\n"
}
],
"explanation": "Liste des principales : ``, ``,\n`
`, ``, `