$course$/QCM de NSI/Première/Structure HTML Langage HTML : balises, attributs, structure d'une page
(doctype, html, head, body), balises sémantiques, en-têtes,
paragraphes, listes, liens, images, tableaux.

]]> Structure HTML — Q01 : Que signifie HTML ? Que signifie l'acronyme HTML ?

]]> « Hypertext » désigne les liens ; « markup »
indique qu'on utilise des balises ; « language »
qu'il s'agit d'un langage formel (mais pas un
langage de programmation au sens strict).

]]> 1.0 0.0 0 true true abc HyperText Markup Language

]]> Bonne réponse : HTML est un langage de balisage (markup) pour structurer des
documents hypertexte (avec liens). Inventé
par Tim Berners-Lee en 1991.

]]> High Tech Modern Language

]]> Cette expression n'a
aucune signification
historique. Le sigle HTML
décrit précisément la
nature du langage : un
balisage hypertexte.

]]> Home Tool Markup Language

]]> Erreur : nom incorrect.

]]> Hypertext Modern Layout

]]> Erreur : nom incorrect.

]]> Structure HTML — Q02 : Balise HTML Quelle est la forme générale d'une balise HTML ?

]]> Les balises sont encadrées par < et >. La
balise fermante a un / en plus. Le HTML
tolère certaines erreurs de fermeture, mais
c'est une mauvaise pratique.

]]> 1.0 0.0 0 true true abc balise(contenu)

]]> Erreur : pas de parenthèses.

]]> {balise contenu}

]]> Erreur : pas d'accolades en HTML.

]]> [balise: contenu]

]]> Erreur : pas de crochets.

]]> <balise>contenu</balise>

]]> Bonne réponse : balise ouvrante, contenu,
balise fermante. Certaines balises sont
auto-fermantes comme <img /> ou <br />.

]]> Structure HTML — Q03 : Doctype Que doit contenir la première ligne d'un
document HTML moderne ?

]]> <!DOCTYPE html> est la déclaration HTML5
simplifiée. Les anciennes versions (HTML4,
XHTML) avaient des doctypes plus longs.

]]> 1.0 0.0 0 true true abc <meta charset="utf-8">

]]> Erreur : la déclaration d'encodage se place
très tôt, mais à l'intérieur de <head>,
pas en première ligne du fichier.

]]> <head>

]]> Erreur : <head> vient à l'intérieur de
<html>.

]]> <!DOCTYPE html>

]]> Bonne réponse : cette ligne déclare au
navigateur que la page suit le standard
HTML actuel. Sans elle, le rendu de la page
peut devenir imprévisible.

]]> <html lang="fr">

]]> Erreur : la balise <html> (avec ou sans
attribut lang) vient après la
déclaration de doctype, qui doit être la
toute première ligne.

]]> Structure HTML — Q04 : Structure d'une page Quelle est la structure minimale d'une page
HTML5 ?

]]> <head> contient titre (<title>), encodage
(<meta charset="utf-8">), feuilles de style
(<link>), scripts (<script>). <body>
contient le contenu visible.

]]> 1.0 0.0 0 true true abc `html
<html>
<!DOCTYPE html>
<head>...</head>
<body>...</body>
</html>
`

]]> Erreur : la déclaration <!DOCTYPE html>
doit être la première ligne du fichier,
avant <html> ; placée à l'intérieur, elle
n'est plus reconnue et le navigateur bascule
en mode de compatibilité.

]]> `html
<!DOCTYPE html>
<head>...</head>
<body>...</body>
`

]]> Erreur : il manque l'élément racine <html>,
qui doit englober <head> et <body>.

]]> `html
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
`

]]> Bonne réponse : <head> (méta-données :
titre, encodage, styles), <body> (contenu
visible). Tous deux dans <html>.

]]> `html
<html>
<head>...</head>
<body>...</body>
</html>
`

]]> Erreur : il manque la première ligne
<!DOCTYPE html>, qui déclare le type de
document et garantit un rendu conforme au
standard.

]]> Structure HTML — Q05 : Titres Quelle balise produit un titre de niveau 1
(le plus grand) ?

]]> Hiérarchie : <h1> à <h6>. Importante pour
l'accessibilité et le référencement. Ne pas
sauter de niveau (de <h1> à <h3>).

]]> 1.0 0.0 0 true true abc <title>

]]> Erreur : <title> est dans <head> et
définit le titre de l'onglet/de la page,
pas un titre visible.

]]> <title1>

]]> Erreur : balise inexistante.

]]> <head>

]]> Erreur : <head> est la zone des
méta-données.

]]> <h1>

]]> Bonne réponse : <h1> (heading level 1,
titre de niveau 1) à <h6> (level 6).
Convention : un seul <h1> par page (le
titre principal).

]]> Structure HTML — Q06 : Paragraphe Quelle balise délimite un paragraphe de texte ?

]]> <p> est l'une des balises les plus utilisées.
Pour un saut de ligne simple sans nouveau
paragraphe, utiliser <br>.

]]> 1.0 0.0 0 true true abc <text>

]]> Erreur : balise inexistante en HTML standard.

]]> <p>

]]> Bonne réponse : <p> (paragraph). Le
navigateur ajoute automatiquement un
espacement avant et après.

]]> <para>

]]> Erreur : balise inexistante.

]]> <paragraph>

]]> Erreur : balise inexistante. Le nom est
abrégé en <p>.

]]> Structure HTML — Q07 : Lien hypertexte Quelle est la syntaxe d'un lien vers
https://example.com ?

]]> Attribut target="_blank" pour ouvrir dans un
nouvel onglet. Pour un lien interne (vers une
ancre dans la page) : <a href="#section1">.

]]> 1.0 0.0 0 true true abc <href="https://example.com">texte</href>

]]> Erreur : pas de balise <href>. C'est un
attribut.

]]> <a href="https://example.com">texte</a>

]]> Bonne réponse : <a> (anchor) avec
l'attribut href (hypertext reference).
Le texte entre les balises est le texte
cliquable.

]]> <url="https://example.com">texte</url>

]]> Erreur : pas de balise <url> non plus.

]]> <link href="https://example.com">texte</link>

]]> Erreur : <link> est utilisée dans <head>
pour les feuilles de style, pas pour les
liens visibles.

]]> Structure HTML — Q08 : Image Quelle est la balise pour afficher une image ?

]]> L'attribut alt est obligatoire pour
l'accessibilité (lecteurs d'écran). Sans alt,
la page n'est pas accessible.

]]> 1.0 0.0 0 true true abc <img src="..." alt="...">

]]> Bonne réponse : <img> avec src (chemin)
et alt (texte alternatif pour
l'accessibilité et si l'image ne charge
pas). Balise auto-fermante.

]]> <picture src="...">

]]> Erreur : <picture> ne s'utilise pas ainsi
pour afficher une image ; la balise attendue
est <img>, avec l'attribut src.

]]> <image src="...">

]]> Erreur : balise inexistante, le nom est
abrégé en <img>. Piège : le parseur HTML
corrige silencieusement <image> en
<img>, l'image s'affiche donc quand même
si on teste dans un navigateur.

]]> <src="...">

]]> Erreur : src est un attribut, pas une
balise.

]]> Structure HTML — Q09 : Liste non ordonnée Quelle balise crée une liste à puces ?

]]> Mnémotechnique : u = unordered (puces),
o = ordered (numéros). Les deux contiennent
des <li>.

]]> 1.0 0.0 0 true true abc <list>

]]> Erreur : balise inexistante.

]]> <ul>

]]> Bonne réponse : <ul> (unordered list)
contient des <li> (list item).
Affichage avec puces par défaut.

]]> <ol>

]]> Erreur : <ol> (ordered list) est une
liste ordonnée (numérotée).

]]> <bullet>

]]> Erreur : balise inexistante.

]]> Structure HTML — Q10 : Attributs Dans <a href="page.html">lien</a>, qu'est-ce
que href ?

]]> Attributs courants : id, class, style,
href, src, alt. La syntaxe est toujours
attribut="valeur" à l'intérieur de la balise
ouvrante.

]]> 1.0 0.0 0 true true abc Une balise imbriquée dans <a>

]]> Erreur : href figure à l'intérieur de la
balise ouvrante, ce n'est pas une balise
en soi.

]]> Une fonction appelée au clic

]]> Une fonction est une
construction propre aux
langages de programmation.
En HTML, on ne définit
pas de fonctions ; on
décrit la structure d'un
document.

]]> Un attribut de la balise <a>

]]> Bonne réponse : un attribut a la forme
nom="valeur" et complète l'information
de la balise.

]]> Une variable JavaScript

]]> Une variable JavaScript
appartient au langage
de programmation, pas
au balisage HTML. Un
attribut HTML décrit
quant à lui la balise
dans laquelle il figure.

]]> Structure HTML — Q12 : div vs span Quelle est la différence entre <div> et
<span> ?

]]> Tous les éléments HTML ont une nature : bloc
(par défaut sur une nouvelle ligne) ou inline
(dans le flux). On peut changer cela en CSS
avec display: block; ou display: inline;.

]]> 1.0 0.0 0 true true abc <div> est un conteneur de bloc, <span> un conteneur en ligne

]]> Bonne réponse : distinction fondamentale en
HTML/CSS. <div> est utilisé pour
structurer des sections ; <span> pour
mettre en forme une portion de texte au
sein d'une phrase, dans le flux.

]]> La balise <div> est désormais totalement obsolète

]]> Erreur : très utilisé.

]]> <span> ne peut s'utiliser que dans l'en-tête <head>

]]> Erreur : <span> s'utilise dans <body>,
au cœur du contenu visible.

]]> Aucune, les deux balises sont interchangeables

]]> Erreur : leur comportement d'affichage
diffère fondamentalement (bloc contre
en ligne).

]]> Structure HTML — Q13 : Encodage À quoi sert
<meta charset="utf-8"> dans <head> ?

]]> UTF-8 est aujourd'hui le standard universel.
Toujours le déclarer en première ligne du
<head> pour garantir un affichage correct
des caractères spéciaux.

]]> 1.0 0.0 0 true true abc À indiquer l'encodage des caractères du document

]]> Bonne réponse : ici l'encodage UTF-8. Sans
cette déclaration, le navigateur peut
interpréter les caractères accentués
différemment (par exemple, voir « café »
au lieu de « café » : les deux octets UTF-8
du « é » sont lus comme deux caractères
latin-1).

]]> À définir la couleur de fond de la page entière

]]> Erreur : aucun rapport avec les couleurs
(c'est CSS).

]]> À activer l'exécution du JavaScript dans la page

]]> JavaScript s'active par
la balise <script>. La
balise <meta charset>
ne joue aucun rôle dans
l'exécution du code, elle
précise uniquement le jeu
de caractères du document.

]]> À cacher la page aux moteurs de recherche

]]> Erreur : c'est <meta name="robots"
content="noindex">.

]]> Structure HTML — Q14 : class et id Quelle est la différence entre les attributs
class et id ?

]]> Bonne pratique : utiliser surtout class pour
le style ; id pour les ancres et les
éléments uniques nécessitant une référence
JavaScript.

]]> 1.0 0.0 0 true true abc L'attribut id ne fonctionne plus du tout en HTML5

]]> Erreur : id fonctionne parfaitement en
HTML5 (ancres, JavaScript, CSS).

]]> id est unique, class peut viser plusieurs éléments

]]> Bonne réponse : id identifie un seul
élément (par exemple id="header-principal"),
class regroupe des éléments partageant un
style (par exemple class="bouton").

]]> Aucune, ce sont rigoureusement deux synonymes

]]> Erreur : la différence est importante,
l'unicité de id dans la page.

]]> class est obsolète et remplacé par id en HTML5

]]> Erreur : class reste l'un des attributs
les plus utilisés, notamment pour le style.

]]> Structure HTML — Q15 : Tableau Quelles balises HTML structurent un tableau ?

]]> Aujourd'hui, on n'utilise plus les tableaux
pour la mise en page ; ils sont réservés aux
données réellement tabulaires. La mise en
page relève du CSS.

]]> 1.0 0.0 0 true true abc Les balises <spreadsheet>, <line> et <column>

]]> Erreur : balises inexistantes.

]]> <grid>, <row>, <cell>

]]> Erreur : balises inexistantes.

]]> La balise <table> toute seule, sans balises internes

]]> Erreur : il faut aussi <tr> et <td> (ou
<th>) pour avoir un contenu.

]]> <table>, <tr>, <td> et <th>

]]> Bonne réponse : structure standard, avec
<tr> (table row) pour les lignes,
<td> (table data) pour les cellules et
<th> (table header) pour les en-têtes
(gras et centré par défaut). <thead>,
<tbody>, <tfoot> pour les groupements.

]]> Structure HTML — Q16 : Imbrication correcte Lequel des codes suivants est incorrect ?

]]> Règles d'imbrication HTML : un bloc peut
contenir des inlines, mais pas l'inverse en
général. <p> ne peut pas contenir de bloc
(ni un autre <p>).

]]> 1.0 0.0 0 true true abc `html
<ul><li>élément</li></ul>
`

]]> Correct : <li> dans <ul>.

]]> `html
<a href="x"><strong>texte</strong></a>
`

]]> Correct : un inline dans un autre inline.

]]> `html
<p>Voici un <strong>mot</strong> important.</p>
`

]]> Correct : un élément inline (<strong>)
dans un bloc (<p>).

]]> `html
<p>Texte <p>imbriqué</p>.</p>
`

]]> Incorrect (donc bonne réponse) : on ne
peut pas imbriquer un <p> dans un autre
<p>. Le navigateur fermera
automatiquement le premier au début du
second.

]]> Structure HTML — Q17 : Balises auto-fermantes Lesquelles de ces balises sont auto-fermantes
(sans balise fermante) ?

]]> Une balise vide n'encadre aucun contenu :
l'information utile passe par ses attributs,
comme src et alt pour <img>.

]]> 1.0 0.0 0 true true abc <title>, <script>, <style>

]]> Erreur : ces trois balises exigent une
fermeture explicite, car elles contiennent
du contenu (<title>Mon site</title>).

]]> <p>, <div>, <span>

]]> Erreur : ces balises requièrent une fermeture.

]]> Les balises <head> et <body> du squelette

]]> Erreur : ces balises doivent être
fermées (elles contiennent du contenu).

]]> <img>, <br>, <hr>, <meta>, <link>, <input>

]]> Bonne réponse : ces balises sont dites
vides : elles n'ont pas de contenu, donc
pas de fermeture. En HTML5 on peut écrire
<br> ou <br />.

]]> Structure HTML — Q18 : Mise en valeur Quelle balise utilise-t-on pour mettre un mot
important en valeur ?

]]> <strong> vs <b> : la première a un sens
(lecteur d'écran insiste), la seconde est
uniquement présentation. HTML moderne
privilégie le sémantique, le style étant géré
par CSS.

]]> 1.0 0.0 0 true true abc <bold>

]]> Erreur : balise inexistante.

]]> <important>

]]> Erreur : balise inexistante.

]]> <strong>

]]> Bonne réponse : <strong> exprime
l'importance sémantique (et est
rendue en gras par défaut). La balise
<b> existe aussi mais est purement
visuelle (à éviter en pratique). Pour
l'italique : <em> (sémantique) ou <i>.

]]> <text-bold>

]]> Erreur : balise inexistante.

]]> Structure HTML — Q19 : Chemins relatifs Si la page est /site/index.html et l'image
est /site/img/photo.jpg, quel src utiliser
pour le chemin relatif ?

]]> Trois types de chemins : relatif
(img/photo.jpg), absolu par rapport au
site (/img/photo.jpg), absolu complet
(https://...). Les chemins relatifs sont
portables.

]]> 1.0 0.0 0 true true abc ../img/photo.jpg

]]> Erreur : .. remonte d'un dossier, ici
on aboutirait à /img/photo.jpg.

]]> https://./img/photo.jpg

]]> Erreur : syntaxe d'URL invalide.

]]> /img/photo.jpg

]]> Erreur : ce serait un chemin absolu à
partir de la racine du site (qui pourrait
fonctionner ou pas selon la racine).

]]> img/photo.jpg

]]> Bonne réponse : sans / initial, c'est
relatif au document courant. Depuis
/site/index.html, img/photo.jpg
pointe sur /site/img/photo.jpg.

]]> Structure HTML — Q21 : Validité d'une liste imbriquée Que peut-on dire de ce code du point de vue de la
validité HTML, et comment le corriger ?
`html
<ul>
<li>Pomme</li>
<li>Banane</li>
<ol>
<li>Cerise</li>
</ol>
</ul>
`

]]> Pour un sous-niveau de liste : imbriquer la
sous-liste dans un <li> du parent.
Bonnes pratiques : valider avec validator.w3.org.

]]> 1.0 0.0 0 true true abc Une liste à puces avec « Pomme », « Banane » et une sous-liste numérotée contenant « Cerise »

]]> Presque, mais le code est techniquement
invalide : <ol> ne peut pas être un
enfant direct de <ul>. Il devrait être
dans un <li>. Le rendu peut varier selon
le navigateur.

]]> Le code est mal structuré : <ol> doit être imbriqué dans un <li>

]]> Bonne réponse : la structure correcte est
<ul><li>Banane<ol><li>Cerise</li></ol></li></ul>.
Les listes ne peuvent contenir que des
<li> directement.

]]> Une erreur empêche tout affichage

]]> Erreur : HTML est tolérant, le navigateur
rend ce qu'il peut. Mais la structure
est invalide selon le standard.

]]> Une seule liste fusionnée

]]> Le navigateur ne fusionne
pas deux listes en une
seule. Il rend chaque
balise telle quelle, mais
la structure produite
n'est pas conforme au
standard.

]]> Structure HTML — Q22 : Document complet Quel élément est manquant dans cette structure
pour un document HTML5 conforme ?
`html
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
`

]]> Document minimal vraiment conforme :
<!DOCTYPE html><html lang="fr"><head><meta
charset="utf-8"><title>Titre</title></head>
<body></body></html>.

]]> 1.0 0.0 0 true true abc Un attribut lang sur <html>

]]> Recommandé pour l'accessibilité (par
exemple <html lang="fr">), mais
techniquement pas obligatoire.

]]> Un <script>

]]> Erreur : facultatif.

]]> Un <title> dans <head>

]]> Bonne réponse : <title> est obligatoire.
Il définit le titre de l'onglet et est
affiché dans les résultats de recherche.

]]> Une balise <style>

]]> Erreur : facultatif.

]]> Structure HTML — Q23 : Mise en page interdite Pourquoi utiliser un <table> pour la mise en page d'une page web (en dehors de présenter
des données tabulaires) est-il fortement
déconseillé ?

]]> Pour la mise en page : utiliser le CSS. Pour
les données : <table>, avec des cellules
d'en-tête <th> qui décrivent chaque
colonne.

]]> 1.0 0.0 0 true true abc Aucune raison, c'est même une bonne pratique recommandée

]]> Erreur : c'est exactement l'inverse, la
pratique est aujourd'hui proscrite.

]]> Cela ralentit fortement le navigateur lors du rendu de la page

]]> Erreur : la performance n'est pas l'argument
principal.

]]> La balise <table> a été supprimée de HTML5

]]> Erreur : <table> existe toujours, mais
réservé aux données tabulaires.

]]> Mauvaise sémantique, accessibilité dégradée, code rigide

]]> Bonne réponse : le tableau de mise en page
trompe les lecteurs d'écran, qui annoncent
des lignes et des colonnes inexistantes, et
il se prête mal à un affichage sur des
écrans de tailles différentes.

]]> Structure HTML — Q24 : Validation HTML Comment vérifier que son code HTML est
conforme au standard ?

]]> Le W3C (World Wide Web Consortium) maintient
les standards web. La validation est un bon
réflexe avant de mettre un site en
production.

]]> 1.0 0.0 0 true true abc En lançant un programme Python de vérification dédié

]]> Erreur : un programme de vérification
maison ne fait pas référence ; c'est le
validateur du W3C, qui applique le
standard, qui fait foi.

]]> En utilisant le validateur du W3C (validator.w3.org)

]]> Bonne réponse : outil officiel et gratuit.
Soumettre l'URL ou le fichier HTML, on
obtient une liste d'erreurs et
d'avertissements à corriger.

]]> En ouvrant la page dans un navigateur : si elle s'affiche, elle est conforme

]]> Erreur : les navigateurs sont volontairement
tolérants et affichent la plupart des pages
invalides. Un affichage correct ne prouve
donc pas la conformité au standard.

]]> En relisant le code visuellement

]]> Pratique, mais incomplet, la validation
automatique est plus exhaustive.

]]> Structure HTML — Q25 : Synthèse Parmi les affirmations suivantes sur HTML,
laquelle est fausse ?

]]> Mnémonique : id désigne un identifiant
unique (comme une carte d'identité) ;
class désigne une catégorie (comme une
classe d'élèves).

]]> 1.0 0.0 0 true true abc HTML est un langage de balisage (pas un langage de programmation)

]]> Vrai : pas de variables ni de boucles. Le
dynamisme vient de JavaScript.

]]> Les balises sémantiques (<header>, <nav>, etc.) améliorent l'accessibilité et le référencement

]]> Vrai : sens et structure compréhensibles
par les machines.

]]> Un même id peut être utilisé pour plusieurs éléments dans la même page

]]> Faux (donc bonne réponse) : id doit être
unique. Pour grouper plusieurs
éléments, utiliser class.

]]> La structure d'une page comprend toujours <head> et <body> dans <html>

]]> Vrai : structure standard HTML5.

]]> Structure HTML — Q26 : Métadonnées d'une page Dans la balise <head> d'une page HTML, à quoi sert
la balise suivante ?

`html
<meta name="description" content="Cours de NSI en ligne">
`

]]> Dans <head>, on regroupe toutes les informations
qui décrivent la page sans s'afficher : <title>
(titre de l'onglet), <meta charset> (encodage),
<meta name="description"> (résumé pour les
moteurs), <meta name="viewport"> (adaptation
mobile), liens vers les feuilles de style et
scripts.

]]> 1.0 0.0 0 true true abc À empêcher l'indexation de la page

]]> Erreur : pour empêcher l'indexation, on utilise
<meta name="robots" content="noindex">. La
description, elle, sert au contraire à
présenter la page aux moteurs.

]]> À fournir une description de la page pour les moteurs de recherche

]]> Bonne réponse : les moteurs de recherche peuvent
afficher cette description sous le titre dans
leurs résultats. Une bonne description
(concise, informative) aide au référencement et
au taux de clic.

]]> À définir le titre affiché dans l'onglet du navigateur

]]> Erreur : le titre de l'onglet est défini par la
balise <title>, distincte de
<meta name="description">.

]]> À afficher la phrase « Cours de NSI en ligne » sur la page

]]> Erreur : tout le contenu placé dans <head> est
invisible pour le visiteur. Cette balise ne
produit aucun affichage direct.

]]> Structure HTML — Q27 : Une seule réponse cochée dans un sondage Un formulaire de sondage demande « Quel est ton
niveau ? » et propose trois réponses : Seconde,
Première et Terminale. L'utilisateur ne doit
pouvoir en cocher qu'une seule. Quelle balise
faut-il écrire pour chacune des trois réponses ?

]]> Chaque composant d'un formulaire répond à un
besoin : radio pour un choix unique parmi
quelques réponses, checkbox pour des choix
multiples, text pour une saisie libre, et un
bouton pour déclencher une action.

]]> 1.0 0.0 0 true true abc <input type="radio" name="niveau">

]]> Bonne réponse : des boutons radio qui
partagent le même name forment un groupe
dans lequel une seule réponse peut être
choisie ; en cocher une décoche les autres.

]]> <input type="checkbox" name="niveau">

]]> Erreur : les cases à cocher sont
indépendantes les unes des autres ;
l'utilisateur pourrait cocher Première et
Terminale en même temps.

]]> <input type="text" name="niveau">

]]> Erreur : un champ texte laisse
l'utilisateur écrire ce qu'il veut, par
exemple « 1re », au lieu de choisir parmi
trois réponses.

]]> <button name="niveau">

]]> Erreur : un bouton sert à déclencher une
action, comme l'envoi du formulaire ; il
ne garde pas trace d'une réponse cochée.

]]> Structure HTML — Q28 : Élément en ligne et élément en bloc Parmi les balises suivantes, laquelle est par défaut
un élément en bloc (qui occupe toute la largeur
disponible et provoque un retour à la ligne) ?

]]> Distinction essentielle pour la mise en page :
les éléments en bloc (<div>, <p>, <h1>,
<ul>, <section>...) prennent toute la largeur
et passent à la ligne ; les éléments en ligne
(<span>, <a>, <strong>, <em>,
<img>...) restent au sein de la ligne courante.
CSS permet de modifier ce comportement avec la
propriété display.

]]> 1.0 0.0 0 true true abc <h1>

]]> Bonne réponse : <h1> est un élément en bloc,
comme tous les titres <h1> à <h6>. Par
défaut, il occupe toute la largeur disponible
et place les éléments suivants à la ligne
suivante.

]]> <em>

]]> Erreur : la balise <em> (emphase, rendue
en italique) est un élément en ligne, qui
s'applique autour d'un fragment de texte sans
provoquer de saut de ligne.

]]> <a>

]]> Erreur : un lien <a> est par défaut un
élément en ligne, ce qui permet de l'inclure
au milieu d'un paragraphe sans casser la mise
en page.

]]> <img>

]]> Erreur : même si une image peut être grande à
l'écran, <img> est un élément en ligne :
elle s'insère dans le flux du texte sans
imposer de retour à la ligne.

]]> Structure HTML — Q29 : Une liste déroulante de spécialités Dans un formulaire, l'utilisateur doit choisir sa
spécialité dans une liste déroulante qui propose
NSI, Mathématiques et Physique-chimie. Quel code
HTML produit ce composant ?

]]> Une liste déroulante se décrit avec
<select>, qui contient une balise <option>
par choix proposé. Elle convient quand les
réponses possibles sont nombreuses ou
connues d'avance.

]]> 1.0 0.0 0 true true abc `html
<input type="select" name="specialite"
value="NSI, Mathématiques, Physique-chimie">
`

]]> Erreur : le type select n'existe pas pour
<input>. Le navigateur affiche un simple
champ de texte, prérempli avec les trois
mots.

]]> `html
<select name="specialite">
<option>NSI</option>
<option>Mathématiques</option>
<option>Physique-chimie</option>
</select>
`

]]> Bonne réponse : <select> crée la liste
déroulante et porte le name transmis avec
le formulaire ; chaque <option> ajoute un
choix.

]]> `html
<ul name="specialite">
<li>NSI</li>
<li>Mathématiques</li>
<li>Physique-chimie</li>
</ul>
`

]]> Erreur : <ul> affiche une liste à puces,
du simple texte que l'utilisateur ne peut
pas sélectionner ; ce n'est pas un
composant de formulaire.

]]> `html
<option name="specialite">
<select>NSI</select>
<select>Mathématiques</select>
<select>Physique-chimie</select>
</option>
`

]]> Erreur : l'imbrication est inversée. C'est
<select> qui délimite la liste et
contient une balise <option> par choix.

]]> Structure HTML — Q30 : Un lien ouvert dans un nouvel onglet Quel attribut ajouter à une balise <a> pour que le lien s'ouvre
dans un nouvel onglet ?

]]> <a href="..." target="_blank"> ouvre un nouvel onglet ; sans
target, la page liée remplace la page courante.

]]> 1.0 0.0 0 true true abc new="tab"

]]> Erreur : cet attribut n'existe pas en HTML.

]]> target="_blank"

]]> Bonne réponse : target indique où afficher la page liée ;
_blank demande un nouvel onglet ou une nouvelle fenêtre.

]]> href="_blank"

]]> Erreur : href contient l'adresse de destination, pas le mode
d'ouverture.

]]> class="blank"

]]> Erreur : class sert à la mise en forme CSS, pas au
comportement du lien.

]]> Structure HTML — Q31 : Une liste numérotée Quelle balise crée une liste dont les éléments sont numérotés
automatiquement ?

]]> ul et ol partagent la même structure, des li, et diffèrent par
la numérotation.

]]> 1.0 0.0 0 true true abc <ol>, avec un <li> par élément

]]> Bonne réponse : ol signifie ordered list ; le navigateur
numérote les li qu'elle contient.

]]> <table>, avec une ligne par élément

]]> Erreur : un tableau ne numérote rien et n'est pas fait pour une
liste.

]]> <ul>, avec un <li> par élément

]]> Erreur : ul crée une liste à puces, sans numéros.

]]> <nl>, avec un <num> par élément

]]> Erreur : ces balises n'existent pas.

]]> Structure HTML — Q32 : Le rôle de l'attribut alt Dans <img src="plan.png" alt="Plan du lycée">, à quoi sert
l'attribut alt ?

]]> Un alt pertinent fait partie d'une page accessible ; le validateur
signale les images qui n'en ont pas.

]]> 1.0 0.0 0 true true abc À indiquer le chemin du fichier image

]]> Erreur : le chemin est donné par src.

]]> À afficher une légende sous l'image, visible par tous

]]> Erreur : alt n'est pas visible quand l'image se charge ; une
légende s'écrit dans le contenu de la page.

]]> À fournir un texte de remplacement pour l'image

]]> Bonne réponse : ce texte rend l'image accessible aux personnes
qui ne la voient pas et prend sa place si le fichier est
introuvable.

]]> À fixer la taille de l'image à l'écran

]]> Erreur : la taille se règle par width et height, ou en CSS.

]]> Structure HTML — Q33 : Cellule d'en-tête ou cellule ordinaire Dans un tableau HTML, quelle différence entre <th> et <td> ?

]]> Un tableau se structure avec table, tr pour les lignes, th
pour les en-têtes et td pour les données.

]]> 1.0 0.0 0 true true abc Aucune, les deux balises étant interchangeables

]]> Erreur : leur sens diffère, même si l'apparence peut être
rapprochée par CSS.

]]> th est une cellule d'en-tête, td une cellule de données

]]> Bonne réponse : th désigne un titre de colonne ou de ligne,
affiché en gras par défaut et annoncé comme tel par les lecteurs
d'écran ; td contient les données.

]]> th est une ligne, td une colonne du tableau

]]> Erreur : la ligne s'écrit tr ; th et td sont deux sortes
de cellules.

]]> th est le tableau entier, td une cellule de ce tableau

]]> Erreur : le tableau entier s'écrit table.

]]> Structure HTML — Q34 : Un lien vers une section de la même page Une page contient <h2 id="horaires">Horaires</h2>. Quel lien
amène directement à cette section ?

]]> Les ancres internes combinent un id sur la cible et un href en
#id sur le lien ; elles servent aussi d'une page à l'autre, avec
page.html#horaires.

]]> 1.0 0.0 0 true true abc <a href="horaires">Voir les horaires</a>

]]> Erreur : sans #, le navigateur chercherait une page nommée
horaires.

]]> <a href="#horaires">Voir les horaires</a>

]]> Bonne réponse : un href commençant par # suivi d'un id
fait défiler la page jusqu'à l'élément portant cet id.

]]> <a id="horaires">Voir les horaires</a>

]]> Erreur : ce lien n'a pas de destination ; id nomme l'élément,
il ne le relie à rien.

]]> <a href="h2">Voir les horaires</a>

]]> Erreur : le nom de la balise ne sert pas de cible ; c'est l'id
qui est visé.

]]> Structure HTML — Q35 : Un saut de ligne dans un paragraphe Dans un paragraphe, comment forcer un passage à la ligne sans
commencer un nouveau paragraphe ?

]]> Le HTML ignore la mise en page du code source : les sauts de ligne
visibles viennent des balises, br ou p.

]]> 1.0 0.0 0 true true abc Avec la balise <hr>

]]> Erreur : hr trace une ligne horizontale de séparation.

]]> En appuyant sur Entrée dans le code HTML

]]> Erreur : les retours à la ligne du code sont traités comme de
simples espaces par le navigateur.

]]> Avec la balise <br>

]]> Bonne réponse : br insère un saut de ligne à l'endroit où elle
se trouve, sans fermer le paragraphe.

]]> Avec la balise <p>

]]> Erreur : p ouvre un nouveau paragraphe, avec un espacement
vertical.

]]> Structure HTML — Q36 : Un commentaire dans le code HTML Comment écrire, dans un fichier HTML, une note invisible pour le
visiteur ?

]]> Un commentaire HTML est invisible à l'écran mais visible dans le
code : il ne faut rien y écrire de confidentiel.

]]> 1.0 0.0 0 true true abc // Note pour plus tard

]]> Erreur : c'est la syntaxe des commentaires JavaScript.

]]> <comment>Note pour plus tard</comment>

]]> Erreur : cette balise n'existe pas, et son contenu serait
affiché.

]]> # Note pour plus tard

]]> Erreur : c'est la syntaxe des commentaires Python ; en HTML, ce
texte s'afficherait.

]]> <!-- Note pour plus tard -->

]]> Bonne réponse : tout ce qui se trouve entre <!-- et --> est
ignoré par le navigateur, mais reste lisible dans le code
source.

]]> Structure HTML — Q37 : Où apparaît le contenu de title Une page contient <title>Club de robotique</title> dans sa partie
head. Où ce texte apparaît-il ?

]]> head contient ce qui décrit la page, body ce qui s'affiche :
title appartient au premier.

]]> 1.0 0.0 0 true true abc Nulle part, head n'étant jamais affiché

]]> Erreur : head ne s'affiche pas dans la page, mais title est
bien utilisé par le navigateur pour nommer l'onglet.

]]> Dans l'onglet du navigateur, pas dans la page

]]> Bonne réponse : title décrit la page pour le navigateur et les
moteurs de recherche. Pour un titre visible dans la page, on
utilise h1.

]]> Dans le pied de page, en petits caractères

]]> Erreur : rien ne place automatiquement title dans la page.

]]> En haut de la page, en gros caractères

]]> Erreur : c'est le rôle de h1, placé dans body.

]]> Structure HTML — Q38 : Afficher un signe inférieur Théo veut afficher le texte « 3 < 5 » dans un paragraphe. Pourquoi
écrit-il 3 &lt; 5 dans le code HTML ?

]]> Les caractères qui ont un sens en HTML, <, > et &, s'affichent
grâce aux entités &lt;, &gt; et &amp;.

]]> 1.0 0.0 0 true true abc Parce que les chiffres ne peuvent pas être suivis d'un symbole

]]> Erreur : les chiffres n'ont rien à voir ; c'est le < qui pose
problème.

]]> Parce que < est interdit dans un fichier HTML, même dans les balises

]]> Erreur : < est partout dans un fichier HTML, pour les balises ;
c'est son affichage comme texte qui demande une entité.

]]> Parce que &lt; affiche le signe en plus grand et en gras

]]> Erreur : l'entité affiche exactement le caractère <.

]]> Parce que < ouvrirait une balise ; &lt; l'affiche comme texte

]]> Bonne réponse : le navigateur interpréterait < 5 comme le
début d'une balise. L'entité &lt; représente le caractère sans
le faire interpréter.

]]>