$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 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.

]]> Hypertext Modern Layout

]]> Erreur : nom incorrect.

]]> Home Tool Markup Language

]]> Erreur : nom incorrect.

]]> 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.

]]> 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</balise>

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

]]> {balise contenu}

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

]]> [balise: contenu]

]]> Erreur : pas de crochets.

]]> 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 <body>

]]> Erreur : pareil, vient plus loin dans le
document.

]]> <html>

]]> Erreur : <html> vient après la
déclaration de doctype.

]]> <!DOCTYPE html>

]]> Bonne réponse : déclare au navigateur que
c'est du HTML5. Sans doctype, les
navigateurs basculent en mode « quirks »
(compatibilité HTML4 ancien) avec un rendu
imprévisible.

]]> <head>

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

]]> 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
<!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><body>...</body></html>
`

]]> Erreur : il manque le doctype et <head>.

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

]]> Erreur : il manque le doctype, <html>,
<head>.

]]> `html
<main>...</main>
`

]]> Erreur : <main> est une balise sémantique
à utiliser dans <body>, pas comme
structure racine.

]]> 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 <head>

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

]]> <title1>

]]> Erreur : balise inexistante.

]]> <title>

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

]]> <h1>

]]> Bonne réponse : <h1> (header level 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 <para>

]]> Erreur : balise inexistante.

]]> <paragraph>

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

]]> <text>

]]> Erreur : balise inexistante en HTML standard.

]]> <p>

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

]]> 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 <link href="https://example.com">texte</link>

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

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

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

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

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

]]> <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.

]]> 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 <image src="...">

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

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

]]> <picture> existe (pour les images
responsives), mais c'est plus complexe et
contient plusieurs <source> et un
<img>.

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

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

]]> <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.

]]> 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 <ol> (ordered list)

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

]]> <list>

]]> Erreur : balise inexistante.

]]> <ul> (unordered list)

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

]]> <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 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.

]]> Une balise

]]> Erreur : href est à l'intérieur d'une
balise.

]]> Une fonction

]]> 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.

]]> Structure HTML — Q11 : Balises sémantiques Pourquoi préfère-t-on les balises sémantiques
(<header>, <nav>, <article>, <footer>)
à des <div> génériques ?

]]> Balises sémantiques HTML5 : <header>,
<nav>, <main>, <article>, <section>,
<aside>, <footer>. Apparues en 2014 pour
remplacer les <div class="header">
omniprésents.

]]> 1.0 0.0 0 true true abc Pour l'accessibilité (lecteurs d'écran), le référencement (SEO) et la lisibilité du code

]]> Bonne réponse : les balises sémantiques
décrivent la fonction de la zone, pas son
apparence. Bénéfices techniques et
maintenabilité.

]]> Parce que <div> est obsolète

]]> Erreur : <div> reste très utilisé pour
regrouper du contenu sans signification
sémantique particulière.

]]> Pour le rendu visuel

]]> Erreur : par défaut, le rendu visuel est le
même qu'un <div>.

]]> Parce que ces balises sont plus rapides

]]> Erreur : aucune différence de performance.

]]> 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 obsolète

]]> Erreur : très utilisé.

]]> <div> est un conteneur de bloc (prend toute la largeur, saut de ligne) ; <span> est un conteneur inline (intégré dans le flux du texte)

]]> 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.

]]> Aucune

]]> Erreur : différence importante de
comportement.

]]> <span> ne fonctionne que dans <head>

]]> Erreur : <span> fonctionne dans <body>.

]]> 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 À définir la couleur de la page

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

]]> À indiquer au navigateur l'encodage des caractères du document (ici UTF-8, qui supporte les caractères français, asiatiques, emojis...)

]]> Bonne réponse : sans déclaration, le
navigateur peut interpréter les caractères
accentués différemment (par exemple, voir
« café » au lieu de « café »).

]]> À activer JavaScript

]]> 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 class est obsolète

]]> Erreur : très utilisé.

]]> id doit être unique dans la page ; class peut être attribuée à 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").

]]> id ne fonctionne pas en HTML5

]]> Erreur : fonctionne parfaitement.

]]> Aucune, ce sont des synonymes

]]> Erreur : différence importante.

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

]]> Aujourd'hui, on n'utilise plus les tableaux
pour la mise en page (grosse erreur d'antan) ;
ils sont réservés aux données réellement
tabulaires. Pour la mise en page : Flexbox ou
Grid CSS.

]]> 1.0 0.0 0 true true abc <table>, <tr> (table row), <td> (table data) et <th> (table header)

]]> Bonne réponse : structure standard. <th>
pour les en-têtes (mis en gras et centré
par défaut). <thead>, <tbody>, <tfoot>
pour les groupements.

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

]]> Erreur : balises inexistantes.

]]> <table> seul suffit

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

]]> <spreadsheet>, <line>, <column>

]]> Erreur : balises inexistantes.

]]> 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
<a href="x"><strong>texte</strong></a>
`

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

]]> `html
<ul><li>élément</li></ul>
`

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

]]> `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) ?

]]> Liste des principales : <area>, <base>,
<br>, <col>, <embed>, <hr>, <img>,
<input>, <link>, <meta>, <source>,
<track>, <wbr>.

]]> 1.0 0.0 0 true true abc <img>, <br>, <hr>, <meta>, <link>, <input>

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

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

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

]]> <title>

]]> Erreur : <title> doit être fermée
(<title>Mon site</title>).

]]> <head>, <body>

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

]]> 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 <important>

]]> Erreur : balise inexistante.

]]> <text-bold>

]]> Erreur : balise inexistante.

]]> <bold>

]]> Erreur : balise inexistante.

]]> <strong> ou <b>

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

]]> 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

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

]]> /img/photo.jpg

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

]]> Structure HTML — Q20 : Accessibilité Quelle pratique améliore le plus
l'accessibilité d'une page web ?

]]> L'accessibilité est essentielle : 15 % de la
population a un handicap. Et les bénéfices
profitent à tous (référencement, mobile,
ergonomie).

]]> 1.0 0.0 0 true true abc Désactiver le clavier

]]> Erreur : le contraire est attendu (la
navigation au clavier est essentielle).

]]> Utiliser des couleurs vives

]]> Pas la priorité (cela peut même nuire au
contraste).

]]> Mettre tout le texte en gras

]]> Erreur : nuit à la hiérarchie visuelle.

]]> Fournir des textes alternatifs (alt) pour les images, utiliser des balises sémantiques, structurer avec des titres <h1>...<h6>

]]> Bonne réponse : ces pratiques permettent
aux lecteurs d'écran et autres outils
d'assistance d'interpréter correctement la
page. Standard RGAA (France) et WCAG
(international).

]]> Structure HTML — Q21 : Trace de rendu Que produit visuellement le code suivant ?
`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.

]]> 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.

]]> 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 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 <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.

]]> Un attribut lang sur <html>

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

]]> Un <script>

]]> Erreur : facultatif.

]]> 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 CSS Flexbox
(1D) ou Grid (2D). Pour les données :
<table>, mais avec <thead>, <tbody>, et
les attributs d'accessibilité.

]]> 1.0 0.0 0 true true abc Aucune raison, c'est une bonne pratique

]]> Erreur : c'est exactement l'inverse.

]]> Mauvaise sémantique (les tableaux décrivent des données tabulaires), accessibilité dégradée (lecteurs d'écran annoncent « tableau »), code rigide difficile à adapter (responsive)

]]> Bonne réponse : pratique des années 1990
devenue obsolète depuis l'arrivée de CSS
(Flexbox, Grid). Aujourd'hui considérée
comme une mauvaise pratique.

]]> HTML5 a supprimé <table>

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

]]> Cela ralentit le navigateur

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

]]> 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 utilisant le validateur du W3C (validator.w3.org) qui détecte les erreurs de syntaxe et de structure

]]> 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 lançant un programme Python

]]> Possible (avec html-validator), mais ce
n'est pas la méthode standard.

]]> En relisant le code visuellement

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

]]> En attendant que ça plante

]]> Plaisanterie. HTML est très tolérant et
plante rarement.

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

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

]]> 1.0 0.0 0 true true abc Les balises sémantiques (<header>, <nav>, etc.) améliorent l'accessibilité et le SEO

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

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

]]> Vrai : structure standard HTML5.

]]> HTML est un langage de balisage (pas un langage de programmation)

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

]]> 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.

]]> 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 À fournir une description de la page utilisée par les moteurs de recherche dans leurs résultats

]]> 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">.

]]> À 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.

]]> À 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 : Intégrer une page externe Quelle balise HTML permet d'intégrer le contenu
d'une autre page web à l'intérieur de la page
courante ?

]]> Une iframe est très utile pour intégrer du contenu
tiers (vidéos, cartes, éditeurs en ligne), mais
elle pose des questions de sécurité (clickjacking)
et de performance. C'est pourquoi de nombreux
sites contrôlent leur affichage en <iframe> à
l'aide d'en-têtes HTTP comme
Content-Security-Policy.

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

]]> Bonne réponse : la balise <iframe> (cadre en
ligne) permet d'afficher une autre page web à
l'intérieur de la page courante, par exemple
une vidéo YouTube ou une carte. Sa source se
précise avec l'attribut src.

]]> <embed>

]]> Erreur : <embed> insère plutôt des objets
externes comme des fichiers PDF ou Flash. Pour
intégrer une page web complète, ce n'est pas
la balise standard.

]]> <include>

]]> Erreur : aucune balise <include> n'existe en
HTML standard. Cette syntaxe se rencontre dans
certains préprocesseurs ou systèmes de
modèles, mais elle n'est pas du HTML pur.

]]> <link>

]]> Erreur : <link> sert à déclarer des
ressources liées à la page (feuille de style,
favicon, etc.) dans le <head>, et non à
intégrer une autre page web dans le contenu.

]]> 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 <strong>

]]> Erreur : la balise <strong> (mise en valeur
forte) est un élément en ligne, qui s'applique
autour d'un fragment de texte sans provoquer
de saut de ligne.

]]> <span>

]]> Erreur : <span> est l'archétype de l'élément
en ligne (inline). Il s'insère dans le
flux du texte sans imposer de retour à la
ligne.

]]> <div>

]]> Bonne réponse : <div> est un élément en bloc
générique. Par défaut, il occupe toute la
largeur disponible et place les éléments
suivants à la ligne suivante.

]]> <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.

]]>