{
  "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.",
    "parties": [
      {
        "id": "balises",
        "title": "Balises et structure du document"
      },
      {
        "id": "contenu",
        "title": "Contenu : texte, images, liens, tableaux"
      }
    ],
    "prerequisites": [],
    "references": []
  },
  "questions": [
    {
      "id": "q01",
      "difficulty": 1,
      "skills": [
        "definition"
      ],
      "title": "Que signifie HTML ?",
      "partie": "balises",
      "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",
      "partie": "balises",
      "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": "`<balise>contenu</balise>`",
          "correct": true,
          "feedback": "Bonne réponse : balise ouvrante, contenu,\nbalise fermante. Certaines balises sont\nauto-fermantes comme `<img />` ou `<br />`.\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",
      "partie": "balises",
      "statement": "Que doit contenir la **première ligne** d'un\ndocument HTML moderne ?",
      "options": [
        {
          "text": "`<html lang=\"fr\">`",
          "correct": false,
          "feedback": "Erreur : la balise `<html>` (avec ou sans\nattribut `lang`) vient **après** la\ndéclaration de doctype, qui doit être la\ntoute première ligne.\n"
        },
        {
          "text": "`<meta charset=\"utf-8\">`",
          "correct": false,
          "feedback": "Erreur : la déclaration d'encodage se place\ntrès tôt, mais à l'intérieur de `<head>`,\npas en première ligne du fichier.\n"
        },
        {
          "text": "`<!DOCTYPE html>`",
          "correct": true,
          "feedback": "Bonne réponse : cette ligne déclare au\nnavigateur que la page suit le standard\nHTML actuel. Sans elle, le rendu de la page\npeut devenir imprévisible.\n"
        },
        {
          "text": "`<head>`",
          "correct": false,
          "feedback": "Erreur : `<head>` vient à l'intérieur de\n`<html>`.\n"
        }
      ],
      "explanation": "`<!DOCTYPE html>` 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",
      "partie": "balises",
      "statement": "Quelle est la **structure minimale** d'une page\nHTML5 ?",
      "options": [
        {
          "text": "```html\n<!DOCTYPE html>\n<html>\n  <head>...</head>\n  <body>...</body>\n</html>\n```\n",
          "correct": true,
          "feedback": "Bonne réponse : `<head>` (méta-données :\ntitre, encodage, styles), `<body>` (contenu\nvisible). Tous deux dans `<html>`.\n"
        },
        {
          "text": "```html\n<html>\n  <head>...</head>\n  <body>...</body>\n</html>\n```\n",
          "correct": false,
          "feedback": "Erreur : il manque la première ligne\n`<!DOCTYPE html>`, qui déclare le type de\ndocument et garantit un rendu conforme au\nstandard.\n"
        },
        {
          "text": "```html\n<!DOCTYPE html>\n  <head>...</head>\n  <body>...</body>\n```\n",
          "correct": false,
          "feedback": "Erreur : il manque l'élément racine `<html>`,\nqui doit englober `<head>` et `<body>`.\n"
        },
        {
          "text": "```html\n<html>\n  <!DOCTYPE html>\n  <head>...</head>\n  <body>...</body>\n</html>\n```\n",
          "correct": false,
          "feedback": "Erreur : la déclaration `<!DOCTYPE html>`\ndoit être la **première ligne** du fichier,\navant `<html>` ; placée à l'intérieur, elle\nn'est plus reconnue et le navigateur bascule\nen mode de compatibilité.\n"
        }
      ],
      "explanation": "`<head>` contient titre (`<title>`), 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",
      "partie": "contenu",
      "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",
      "partie": "contenu",
      "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",
      "partie": "contenu",
      "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",
      "partie": "contenu",
      "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": "Erreur : `<picture>` ne s'utilise pas ainsi\npour afficher une image ; la balise attendue\nest `<img>`, avec l'attribut `src`.\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",
      "partie": "contenu",
      "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",
      "partie": "balises",
      "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",
      "partie": "balises",
      "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",
      "partie": "balises",
      "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",
      "partie": "balises",
      "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",
      "partie": "contenu",
      "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 ; ils sont réservés aux\ndonnées réellement tabulaires. La mise en\npage relève du CSS."
    },
    {
      "id": "q16",
      "difficulty": 2,
      "skills": [
        "imbriquation"
      ],
      "title": "Imbrication correcte",
      "partie": "balises",
      "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",
      "partie": "balises",
      "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\nvides : 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</title>`).\n"
        },
        {
          "text": "Les balises `<head>` et `<body>` du squelette",
          "correct": false,
          "feedback": "Erreur : ces balises **doivent** être\nfermées (elles contiennent du contenu).\n"
        }
      ],
      "explanation": "Une balise vide n'encadre aucun contenu :\nl'information utile passe par ses attributs,\ncomme `src` et `alt` pour `<img>`."
    },
    {
      "id": "q18",
      "difficulty": 2,
      "skills": [
        "emphasis"
      ],
      "title": "Mise en valeur",
      "partie": "contenu",
      "statement": "Quelle balise utilise-t-on pour mettre un mot\n**important** en valeur ?",
      "options": [
        {
          "text": "`<important>`",
          "correct": false,
          "feedback": "Erreur : balise inexistante.\n"
        },
        {
          "text": "`<text-bold>`",
          "correct": false,
          "feedback": "Erreur : balise inexistante.\n"
        },
        {
          "text": "`<bold>`",
          "correct": false,
          "feedback": "Erreur : balise inexistante.\n"
        },
        {
          "text": "`<strong>`",
          "correct": true,
          "feedback": "Bonne réponse : `<strong>` exprime\nl'**importance** sémantique (et est\nrendue en gras par défaut). La balise\n`<b>` existe aussi mais est purement\nvisuelle (à éviter en pratique). Pour\nl'italique : `<em>` (sémantique) ou `<i>`.\n"
        }
      ],
      "explanation": "`<strong>` vs `<b>` : la première a un sens\n(lecteur d'écran insiste), la seconde est\nuniquement présentation. HTML moderne\nprivilégie le sémantique, le style étant géré\npar CSS."
    },
    {
      "id": "q19",
      "difficulty": 2,
      "skills": [
        "chemin-relatif"
      ],
      "title": "Chemins relatifs",
      "partie": "contenu",
      "statement": "Si la page est `/site/index.html` et l'image\nest `/site/img/photo.jpg`, quel `src` utiliser\npour le chemin **relatif** ?",
      "options": [
        {
          "text": "`../img/photo.jpg`",
          "correct": false,
          "feedback": "Erreur : `..` remonte d'un dossier, ici\non aboutirait à `/img/photo.jpg`.\n"
        },
        {
          "text": "`https://./img/photo.jpg`",
          "correct": false,
          "feedback": "Erreur : syntaxe d'URL invalide.\n"
        },
        {
          "text": "`img/photo.jpg`",
          "correct": true,
          "feedback": "Bonne réponse : sans `/` initial, c'est\nrelatif au document courant. Depuis\n`/site/index.html`, `img/photo.jpg`\npointe sur `/site/img/photo.jpg`.\n"
        },
        {
          "text": "`/img/photo.jpg`",
          "correct": false,
          "feedback": "Erreur : ce serait un chemin **absolu** à\npartir de la racine du site (qui pourrait\nfonctionner ou pas selon la racine).\n"
        }
      ],
      "explanation": "Trois types de chemins : **relatif**\n(`img/photo.jpg`), **absolu** par rapport au\nsite (`/img/photo.jpg`), **absolu** complet\n(`https://...`). Les chemins relatifs sont\nportables."
    },
    {
      "id": "q21",
      "difficulty": 3,
      "skills": [
        "trace-rendu"
      ],
      "title": "Validité d'une liste imbriquée",
      "partie": "contenu",
      "statement": "Que peut-on dire de ce code du point de vue de la\nvalidité HTML, et comment le corriger ?\n```html\n<ul>\n  <li>Pomme</li>\n  <li>Banane</li>\n  <ol>\n    <li>Cerise</li>\n  </ol>\n</ul>\n```",
      "options": [
        {
          "text": "Une liste à puces avec « Pomme », « Banane » et une sous-liste numérotée contenant « Cerise »",
          "correct": false,
          "feedback": "Presque, mais le code est techniquement\n**invalide** : `<ol>` ne peut pas être un\nenfant direct de `<ul>`. Il devrait être\ndans un `<li>`. Le rendu peut varier selon\nle navigateur.\n"
        },
        {
          "text": "Une erreur empêche tout affichage",
          "correct": false,
          "feedback": "Erreur : HTML est tolérant, le navigateur\nrend ce qu'il peut. Mais la structure\nest invalide selon le standard.\n"
        },
        {
          "text": "Le code est mal structuré : `<ol>` doit être imbriqué dans un `<li>`",
          "correct": true,
          "feedback": "Bonne réponse : la structure correcte est\n`<ul><li>Banane<ol><li>Cerise</li></ol></li></ul>`.\nLes listes ne peuvent contenir que des\n`<li>` directement.\n"
        },
        {
          "text": "Une seule liste fusionnée",
          "correct": false,
          "feedback": "Le navigateur ne fusionne\npas deux listes en une\nseule. Il rend chaque\nbalise telle quelle, mais\nla structure produite\nn'est pas conforme au\nstandard.\n"
        }
      ],
      "explanation": "Pour un sous-niveau de liste : imbriquer la\nsous-liste **dans** un `<li>` du parent.\nBonnes pratiques : valider avec validator.w3.org."
    },
    {
      "id": "q22",
      "difficulty": 3,
      "skills": [
        "structure-document"
      ],
      "title": "Document complet",
      "partie": "balises",
      "statement": "Quel élément est manquant dans cette structure\npour un document HTML5 conforme ?\n```html\n<!DOCTYPE html>\n<html>\n  <head></head>\n  <body></body>\n</html>\n```",
      "options": [
        {
          "text": "Un `<title>` dans `<head>`",
          "correct": true,
          "feedback": "Bonne réponse : `<title>` est obligatoire.\nIl définit le titre de l'onglet et est\naffiché dans les résultats de recherche.\n"
        },
        {
          "text": "Un attribut `lang` sur `<html>`",
          "correct": false,
          "feedback": "Recommandé pour l'accessibilité (par\nexemple `<html lang=\"fr\">`), mais\ntechniquement pas obligatoire.\n"
        },
        {
          "text": "Un `<script>`",
          "correct": false,
          "feedback": "Erreur : facultatif.\n"
        },
        {
          "text": "Une balise `<style>`",
          "correct": false,
          "feedback": "Erreur : facultatif.\n"
        }
      ],
      "explanation": "Document minimal vraiment conforme :\n`<!DOCTYPE html><html lang=\"fr\"><head><meta\ncharset=\"utf-8\"><title>Titre</title></head>\n<body></body></html>`."
    },
    {
      "id": "q23",
      "difficulty": 3,
      "skills": [
        "tableau-pieges"
      ],
      "title": "Mise en page interdite",
      "partie": "contenu",
      "statement": "Pourquoi utiliser un `<table>` pour la **mise en page** d'une page web (en dehors de présenter\ndes données tabulaires) est-il fortement\ndéconseillé ?",
      "options": [
        {
          "text": "Aucune raison, c'est même une bonne pratique recommandée",
          "correct": false,
          "feedback": "Erreur : c'est exactement l'inverse, la\npratique est aujourd'hui proscrite.\n"
        },
        {
          "text": "Mauvaise sémantique, accessibilité dégradée, code rigide",
          "correct": true,
          "feedback": "Bonne réponse : le tableau de mise en page\ntrompe les lecteurs d'écran, qui annoncent\ndes lignes et des colonnes inexistantes, et\nil se prête mal à un affichage sur des\nécrans de tailles différentes.\n"
        },
        {
          "text": "La balise `<table>` a été supprimée de HTML5",
          "correct": false,
          "feedback": "Erreur : `<table>` existe toujours, mais\nréservé aux données tabulaires.\n"
        },
        {
          "text": "Cela ralentit fortement le navigateur lors du rendu de la page",
          "correct": false,
          "feedback": "Erreur : la performance n'est pas l'argument\nprincipal.\n"
        }
      ],
      "explanation": "Pour la mise en page : utiliser le CSS. Pour\nles données : `<table>`, avec des cellules\nd'en-tête `<th>` qui décrivent chaque\ncolonne."
    },
    {
      "id": "q24",
      "difficulty": 3,
      "skills": [
        "validation"
      ],
      "title": "Validation HTML",
      "partie": "balises",
      "statement": "Comment **vérifier** que son code HTML est\nconforme au standard ?",
      "options": [
        {
          "text": "En utilisant le validateur du W3C (validator.w3.org)",
          "correct": true,
          "feedback": "Bonne réponse : outil officiel et gratuit.\nSoumettre l'URL ou le fichier HTML, on\nobtient une liste d'erreurs et\nd'avertissements à corriger.\n"
        },
        {
          "text": "En lançant un programme Python de vérification dédié",
          "correct": false,
          "feedback": "Erreur : un programme de vérification\nmaison ne fait pas référence ; c'est le\nvalidateur du W3C, qui applique le\nstandard, qui fait foi.\n"
        },
        {
          "text": "En relisant le code visuellement",
          "correct": false,
          "feedback": "Pratique, mais incomplet, la validation\nautomatique est plus exhaustive.\n"
        },
        {
          "text": "En ouvrant la page dans un navigateur : si elle s'affiche, elle est conforme",
          "correct": false,
          "feedback": "Erreur : les navigateurs sont volontairement\ntolérants et affichent la plupart des pages\ninvalides. Un affichage correct ne prouve\ndonc pas la conformité au standard.\n"
        }
      ],
      "explanation": "Le W3C (World Wide Web Consortium) maintient\nles standards web. La validation est un bon\nréflexe avant de mettre un site en\nproduction."
    },
    {
      "id": "q25",
      "difficulty": 3,
      "skills": [
        "synthese"
      ],
      "title": "Synthèse",
      "partie": "contenu",
      "statement": "Parmi les affirmations suivantes sur HTML,\nlaquelle est **fausse** ?",
      "options": [
        {
          "text": "Les balises sémantiques (`<header>`, `<nav>`, etc.) améliorent l'accessibilité et le référencement",
          "correct": false,
          "feedback": "Vrai : sens et structure compréhensibles\npar les machines.\n"
        },
        {
          "text": "La structure d'une page comprend toujours `<head>` et `<body>` dans `<html>`",
          "correct": false,
          "feedback": "Vrai : structure standard HTML5.\n"
        },
        {
          "text": "HTML est un langage de balisage (pas un langage de programmation)",
          "correct": false,
          "feedback": "Vrai : pas de variables ni de boucles. Le\ndynamisme vient de JavaScript.\n"
        },
        {
          "text": "Un même `id` peut être utilisé pour plusieurs éléments dans la même page",
          "correct": true,
          "feedback": "Faux (donc bonne réponse) : `id` doit être\n**unique**. Pour grouper plusieurs\néléments, utiliser `class`.\n"
        }
      ],
      "explanation": "Mnémonique : `id` désigne un identifiant\n**unique** (comme une carte d'identité) ;\n`class` désigne une catégorie (comme une\nclasse d'élèves)."
    },
    {
      "id": "q26",
      "difficulty": 2,
      "skills": [
        "meta",
        "head"
      ],
      "title": "Métadonnées d'une page",
      "partie": "balises",
      "statement": "Dans la balise `<head>` d'une page HTML, à quoi sert\nla balise suivante ?\n\n```html\n<meta name=\"description\" content=\"Cours de NSI en ligne\">\n```",
      "options": [
        {
          "text": "À fournir une description de la page pour les moteurs de recherche",
          "correct": true,
          "feedback": "Bonne réponse : les moteurs de recherche peuvent\nafficher cette description sous le titre dans\nleurs résultats. Une bonne description\n(concise, informative) aide au référencement et\nau taux de clic.\n"
        },
        {
          "text": "À définir le titre affiché dans l'onglet du navigateur",
          "correct": false,
          "feedback": "Erreur : le titre de l'onglet est défini par la\nbalise `<title>`, distincte de\n`<meta name=\"description\">`.\n"
        },
        {
          "text": "À empêcher l'indexation de la page",
          "correct": false,
          "feedback": "Erreur : pour empêcher l'indexation, on utilise\n`<meta name=\"robots\" content=\"noindex\">`. La\ndescription, elle, sert au contraire à\nprésenter la page aux moteurs.\n"
        },
        {
          "text": "À afficher la phrase « Cours de NSI en ligne » sur la page",
          "correct": false,
          "feedback": "Erreur : tout le contenu placé dans `<head>` est\ninvisible pour le visiteur. Cette balise ne\nproduit aucun affichage direct.\n"
        }
      ],
      "explanation": "Dans `<head>`, on regroupe toutes les informations\nqui décrivent la page sans s'afficher : `<title>`\n(titre de l'onglet), `<meta charset>` (encodage),\n`<meta name=\"description\">` (résumé pour les\nmoteurs), `<meta name=\"viewport\">` (adaptation\nmobile), liens vers les feuilles de style et\nscripts."
    },
    {
      "id": "q27",
      "difficulty": 2,
      "skills": [
        "formulaire",
        "composants-graphiques"
      ],
      "title": "Une seule réponse cochée dans un sondage",
      "partie": "contenu",
      "statement": "Un formulaire de sondage demande « Quel est ton\nniveau ? » et propose trois réponses : Seconde,\nPremière et Terminale. L'utilisateur ne doit\npouvoir en cocher qu'une seule. Quelle balise\nfaut-il écrire pour chacune des trois réponses ?",
      "options": [
        {
          "text": "`<input type=\"checkbox\" name=\"niveau\">`",
          "correct": false,
          "feedback": "Erreur : les cases à cocher sont\nindépendantes les unes des autres ;\nl'utilisateur pourrait cocher Première et\nTerminale en même temps.\n"
        },
        {
          "text": "`<input type=\"radio\" name=\"niveau\">`",
          "correct": true,
          "feedback": "Bonne réponse : des boutons radio qui\npartagent le même `name` forment un groupe\ndans lequel une seule réponse peut être\nchoisie ; en cocher une décoche les autres.\n"
        },
        {
          "text": "`<input type=\"text\" name=\"niveau\">`",
          "correct": false,
          "feedback": "Erreur : un champ texte laisse\nl'utilisateur écrire ce qu'il veut, par\nexemple « 1re », au lieu de choisir parmi\ntrois réponses.\n"
        },
        {
          "text": "`<button name=\"niveau\">`",
          "correct": false,
          "feedback": "Erreur : un bouton sert à déclencher une\naction, comme l'envoi du formulaire ; il\nne garde pas trace d'une réponse cochée.\n"
        }
      ],
      "explanation": "Chaque composant d'un formulaire répond à un\nbesoin : `radio` pour un choix unique parmi\nquelques réponses, `checkbox` pour des choix\nmultiples, `text` pour une saisie libre, et un\nbouton pour déclencher une action."
    },
    {
      "id": "q28",
      "difficulty": 2,
      "skills": [
        "block",
        "inline",
        "affichage"
      ],
      "title": "Élément en ligne et élément en bloc",
      "partie": "balises",
      "statement": "Parmi les balises suivantes, laquelle est par défaut\nun **élément en bloc** (qui occupe toute la largeur\ndisponible et provoque un retour à la ligne) ?",
      "options": [
        {
          "text": "`<em>`",
          "correct": false,
          "feedback": "Erreur : la balise `<em>` (emphase, rendue\nen italique) est un élément en ligne, qui\ns'applique autour d'un fragment de texte sans\nprovoquer de saut de ligne.\n"
        },
        {
          "text": "`<img>`",
          "correct": false,
          "feedback": "Erreur : même si une image peut être grande à\nl'écran, `<img>` est un élément **en ligne** :\nelle s'insère dans le flux du texte sans\nimposer de retour à la ligne.\n"
        },
        {
          "text": "`<h1>`",
          "correct": true,
          "feedback": "Bonne réponse : `<h1>` est un élément en bloc,\ncomme tous les titres `<h1>` à `<h6>`. Par\ndéfaut, il occupe toute la largeur disponible\net place les éléments suivants à la ligne\nsuivante.\n"
        },
        {
          "text": "`<a>`",
          "correct": false,
          "feedback": "Erreur : un lien `<a>` est par défaut un\nélément en ligne, ce qui permet de l'inclure\nau milieu d'un paragraphe sans casser la mise\nen page.\n"
        }
      ],
      "explanation": "Distinction essentielle pour la mise en page :\nles éléments en bloc (`<div>`, `<p>`, `<h1>`,\n`<ul>`, `<section>`...) prennent toute la largeur\net passent à la ligne ; les éléments en ligne\n(`<span>`, `<a>`, `<strong>`, `<em>`,\n`<img>`...) restent au sein de la ligne courante.\nCSS permet de modifier ce comportement avec la\npropriété `display`."
    },
    {
      "id": "q29",
      "difficulty": 2,
      "skills": [
        "formulaire",
        "liste-deroulante"
      ],
      "title": "Une liste déroulante de spécialités",
      "partie": "contenu",
      "statement": "Dans un formulaire, l'utilisateur doit choisir sa\nspécialité dans une liste déroulante qui propose\nNSI, Mathématiques et Physique-chimie. Quel code\nHTML produit ce composant ?",
      "options": [
        {
          "text": "```html\n<ul name=\"specialite\">\n  <li>NSI</li>\n  <li>Mathématiques</li>\n  <li>Physique-chimie</li>\n</ul>\n```\n",
          "correct": false,
          "feedback": "Erreur : `<ul>` affiche une liste à puces,\ndu simple texte que l'utilisateur ne peut\npas sélectionner ; ce n'est pas un\ncomposant de formulaire.\n"
        },
        {
          "text": "```html\n<option name=\"specialite\">\n  <select>NSI</select>\n  <select>Mathématiques</select>\n  <select>Physique-chimie</select>\n</option>\n```\n",
          "correct": false,
          "feedback": "Erreur : l'imbrication est inversée. C'est\n`<select>` qui délimite la liste et\ncontient une balise `<option>` par choix.\n"
        },
        {
          "text": "```html\n<select name=\"specialite\">\n  <option>NSI</option>\n  <option>Mathématiques</option>\n  <option>Physique-chimie</option>\n</select>\n```\n",
          "correct": true,
          "feedback": "Bonne réponse : `<select>` crée la liste\ndéroulante et porte le `name` transmis avec\nle formulaire ; chaque `<option>` ajoute un\nchoix.\n"
        },
        {
          "text": "```html\n<input type=\"select\" name=\"specialite\"\n       value=\"NSI, Mathématiques, Physique-chimie\">\n```\n",
          "correct": false,
          "feedback": "Erreur : le type `select` n'existe pas pour\n`<input>`. Le navigateur affiche un simple\nchamp de texte, prérempli avec les trois\nmots.\n"
        }
      ],
      "explanation": "Une liste déroulante se décrit avec\n`<select>`, qui contient une balise `<option>`\npar choix proposé. Elle convient quand les\nréponses possibles sont nombreuses ou\nconnues d'avance."
    },
    {
      "id": "q30",
      "difficulty": 2,
      "skills": [
        "lien",
        "attribut",
        "target"
      ],
      "title": "Un lien ouvert dans un nouvel onglet",
      "partie": "contenu",
      "statement": "Quel attribut ajouter à une balise `<a>` pour que le lien s'ouvre\ndans un nouvel onglet ?",
      "options": [
        {
          "text": "`target=\"_blank\"`",
          "correct": true,
          "feedback": "Bonne réponse : `target` indique où afficher la page liée ;\n`_blank` demande un nouvel onglet ou une nouvelle fenêtre.\n"
        },
        {
          "text": "`href=\"_blank\"`",
          "correct": false,
          "feedback": "Erreur : `href` contient l'adresse de destination, pas le mode\nd'ouverture.\n"
        },
        {
          "text": "`new=\"tab\"`",
          "correct": false,
          "feedback": "Erreur : cet attribut n'existe pas en HTML.\n"
        },
        {
          "text": "`class=\"blank\"`",
          "correct": false,
          "feedback": "Erreur : `class` sert à la mise en forme CSS, pas au\ncomportement du lien.\n"
        }
      ],
      "explanation": "`<a href=\"...\" target=\"_blank\">` ouvre un nouvel onglet ; sans\n`target`, la page liée remplace la page courante."
    },
    {
      "id": "q31",
      "difficulty": 1,
      "skills": [
        "liste-ordonnee",
        "ol"
      ],
      "title": "Une liste numérotée",
      "partie": "contenu",
      "statement": "Quelle balise crée une liste dont les éléments sont numérotés\nautomatiquement ?",
      "options": [
        {
          "text": "`<ol>`, avec un `<li>` par élément",
          "correct": true,
          "feedback": "Bonne réponse : `ol` signifie *ordered list* ; le navigateur\nnumérote les `li` qu'elle contient.\n"
        },
        {
          "text": "`<ul>`, avec un `<li>` par élément",
          "correct": false,
          "feedback": "Erreur : `ul` crée une liste à puces, sans numéros.\n"
        },
        {
          "text": "`<nl>`, avec un `<num>` par élément",
          "correct": false,
          "feedback": "Erreur : ces balises n'existent pas.\n"
        },
        {
          "text": "`<table>`, avec une ligne par élément",
          "correct": false,
          "feedback": "Erreur : un tableau ne numérote rien et n'est pas fait pour une\nliste.\n"
        }
      ],
      "explanation": "`ul` et `ol` partagent la même structure, des `li`, et diffèrent par\nla numérotation."
    },
    {
      "id": "q32",
      "difficulty": 2,
      "skills": [
        "image",
        "alt",
        "accessibilite"
      ],
      "title": "Le rôle de l'attribut alt",
      "partie": "contenu",
      "statement": "Dans `<img src=\"plan.png\" alt=\"Plan du lycée\">`, à quoi sert\nl'attribut `alt` ?",
      "options": [
        {
          "text": "À fournir un texte de remplacement pour l'image",
          "correct": true,
          "feedback": "Bonne réponse : ce texte rend l'image accessible aux personnes\nqui ne la voient pas et prend sa place si le fichier est\nintrouvable.\n"
        },
        {
          "text": "À afficher une légende sous l'image, visible par tous",
          "correct": false,
          "feedback": "Erreur : `alt` n'est pas visible quand l'image se charge ; une\nlégende s'écrit dans le contenu de la page.\n"
        },
        {
          "text": "À indiquer le chemin du fichier image",
          "correct": false,
          "feedback": "Erreur : le chemin est donné par `src`.\n"
        },
        {
          "text": "À fixer la taille de l'image à l'écran",
          "correct": false,
          "feedback": "Erreur : la taille se règle par `width` et `height`, ou en CSS.\n"
        }
      ],
      "explanation": "Un `alt` pertinent fait partie d'une page accessible ; le validateur\nsignale les images qui n'en ont pas."
    },
    {
      "id": "q33",
      "difficulty": 2,
      "skills": [
        "tableau",
        "th",
        "td"
      ],
      "title": "Cellule d'en-tête ou cellule ordinaire",
      "partie": "contenu",
      "statement": "Dans un tableau HTML, quelle différence entre `<th>` et `<td>` ?",
      "options": [
        {
          "text": "`th` est une cellule d'en-tête, `td` une cellule de données",
          "correct": true,
          "feedback": "Bonne réponse : `th` désigne un titre de colonne ou de ligne,\naffiché en gras par défaut et annoncé comme tel par les lecteurs\nd'écran ; `td` contient les données.\n"
        },
        {
          "text": "`th` est une ligne, `td` une colonne du tableau",
          "correct": false,
          "feedback": "Erreur : la ligne s'écrit `tr` ; `th` et `td` sont deux sortes\nde cellules.\n"
        },
        {
          "text": "`th` est le tableau entier, `td` une cellule de ce tableau",
          "correct": false,
          "feedback": "Erreur : le tableau entier s'écrit `table`.\n"
        },
        {
          "text": "Aucune, les deux balises étant interchangeables",
          "correct": false,
          "feedback": "Erreur : leur sens diffère, même si l'apparence peut être\nrapprochée par CSS.\n"
        }
      ],
      "explanation": "Un tableau se structure avec `table`, `tr` pour les lignes, `th`\npour les en-têtes et `td` pour les données."
    },
    {
      "id": "q34",
      "difficulty": 3,
      "skills": [
        "lien",
        "ancre",
        "id"
      ],
      "title": "Un lien vers une section de la même page",
      "partie": "contenu",
      "statement": "Une page contient `<h2 id=\"horaires\">Horaires</h2>`. Quel lien\namène directement à cette section ?",
      "options": [
        {
          "text": "`<a href=\"#horaires\">Voir les horaires</a>`",
          "correct": true,
          "feedback": "Bonne réponse : un `href` commençant par `#` suivi d'un `id`\nfait défiler la page jusqu'à l'élément portant cet `id`.\n"
        },
        {
          "text": "`<a href=\"horaires\">Voir les horaires</a>`",
          "correct": false,
          "feedback": "Erreur : sans `#`, le navigateur chercherait une page nommée\n`horaires`.\n"
        },
        {
          "text": "`<a id=\"horaires\">Voir les horaires</a>`",
          "correct": false,
          "feedback": "Erreur : ce lien n'a pas de destination ; `id` nomme l'élément,\nil ne le relie à rien.\n"
        },
        {
          "text": "`<a href=\"h2\">Voir les horaires</a>`",
          "correct": false,
          "feedback": "Erreur : le nom de la balise ne sert pas de cible ; c'est l'`id`\nqui est visé.\n"
        }
      ],
      "explanation": "Les ancres internes combinent un `id` sur la cible et un `href` en\n`#id` sur le lien ; elles servent aussi d'une page à l'autre, avec\n`page.html#horaires`."
    },
    {
      "id": "q35",
      "difficulty": 1,
      "skills": [
        "balise",
        "br",
        "saut-de-ligne"
      ],
      "title": "Un saut de ligne dans un paragraphe",
      "partie": "balises",
      "statement": "Dans un paragraphe, comment forcer un passage à la ligne sans\ncommencer un nouveau paragraphe ?",
      "options": [
        {
          "text": "Avec la balise `<br>`",
          "correct": true,
          "feedback": "Bonne réponse : `br` insère un saut de ligne à l'endroit où elle\nse trouve, sans fermer le paragraphe.\n"
        },
        {
          "text": "En appuyant sur Entrée dans le code HTML",
          "correct": false,
          "feedback": "Erreur : les retours à la ligne du code sont traités comme de\nsimples espaces par le navigateur.\n"
        },
        {
          "text": "Avec la balise `<p>`",
          "correct": false,
          "feedback": "Erreur : `p` ouvre un nouveau paragraphe, avec un espacement\nvertical.\n"
        },
        {
          "text": "Avec la balise `<hr>`",
          "correct": false,
          "feedback": "Erreur : `hr` trace une ligne horizontale de séparation.\n"
        }
      ],
      "explanation": "Le HTML ignore la mise en page du code source : les sauts de ligne\nvisibles viennent des balises, `br` ou `p`."
    },
    {
      "id": "q36",
      "difficulty": 2,
      "skills": [
        "commentaire",
        "syntaxe"
      ],
      "title": "Un commentaire dans le code HTML",
      "partie": "balises",
      "statement": "Comment écrire, dans un fichier HTML, une note invisible pour le\nvisiteur ?",
      "options": [
        {
          "text": "`<!-- Note pour plus tard -->`",
          "correct": true,
          "feedback": "Bonne réponse : tout ce qui se trouve entre `<!--` et `-->` est\nignoré par le navigateur, mais reste lisible dans le code\nsource.\n"
        },
        {
          "text": "`# Note pour plus tard`",
          "correct": false,
          "feedback": "Erreur : c'est la syntaxe des commentaires Python ; en HTML, ce\ntexte s'afficherait.\n"
        },
        {
          "text": "`// Note pour plus tard`",
          "correct": false,
          "feedback": "Erreur : c'est la syntaxe des commentaires JavaScript.\n"
        },
        {
          "text": "`<comment>Note pour plus tard</comment>`",
          "correct": false,
          "feedback": "Erreur : cette balise n'existe pas, et son contenu serait\naffiché.\n"
        }
      ],
      "explanation": "Un commentaire HTML est invisible à l'écran mais visible dans le\ncode : il ne faut rien y écrire de confidentiel."
    },
    {
      "id": "q37",
      "difficulty": 2,
      "skills": [
        "head",
        "title",
        "structure"
      ],
      "title": "Où apparaît le contenu de title",
      "partie": "balises",
      "statement": "Une page contient `<title>Club de robotique</title>` dans sa partie\n`head`. Où ce texte apparaît-il ?",
      "options": [
        {
          "text": "Dans l'onglet du navigateur, pas dans la page",
          "correct": true,
          "feedback": "Bonne réponse : `title` décrit la page pour le navigateur et les\nmoteurs de recherche. Pour un titre visible dans la page, on\nutilise `h1`.\n"
        },
        {
          "text": "En haut de la page, en gros caractères",
          "correct": false,
          "feedback": "Erreur : c'est le rôle de `h1`, placé dans `body`.\n"
        },
        {
          "text": "Nulle part, `head` n'étant jamais affiché",
          "correct": false,
          "feedback": "Erreur : `head` ne s'affiche pas dans la page, mais `title` est\nbien utilisé par le navigateur pour nommer l'onglet.\n"
        },
        {
          "text": "Dans le pied de page, en petits caractères",
          "correct": false,
          "feedback": "Erreur : rien ne place automatiquement `title` dans la page.\n"
        }
      ],
      "explanation": "`head` contient ce qui décrit la page, `body` ce qui s'affiche :\n`title` appartient au premier."
    },
    {
      "id": "q38",
      "difficulty": 3,
      "skills": [
        "entites",
        "caracteres-speciaux"
      ],
      "title": "Afficher un signe inférieur",
      "partie": "balises",
      "statement": "Théo veut afficher le texte « 3 < 5 » dans un paragraphe. Pourquoi\nécrit-il `3 &lt; 5` dans le code HTML ?",
      "options": [
        {
          "text": "Parce que `<` ouvrirait une balise ; `&lt;` l'affiche comme texte",
          "correct": true,
          "feedback": "Bonne réponse : le navigateur interpréterait `< 5` comme le\ndébut d'une balise. L'entité `&lt;` représente le caractère sans\nle faire interpréter.\n"
        },
        {
          "text": "Parce que les chiffres ne peuvent pas être suivis d'un symbole",
          "correct": false,
          "feedback": "Erreur : les chiffres n'ont rien à voir ; c'est le `<` qui pose\nproblème.\n"
        },
        {
          "text": "Parce que `&lt;` affiche le signe en plus grand et en gras",
          "correct": false,
          "feedback": "Erreur : l'entité affiche exactement le caractère `<`.\n"
        },
        {
          "text": "Parce que `<` est interdit dans un fichier HTML, même dans les balises",
          "correct": false,
          "feedback": "Erreur : `<` est partout dans un fichier HTML, pour les balises ;\nc'est son affichage comme texte qui demande une entité.\n"
        }
      ],
      "explanation": "Les caractères qui ont un sens en HTML, `<`, `>` et `&`, s'affichent\ngrâce aux entités `&lt;`, `&gt;` et `&amp;`."
    }
  ]
}