La conception d’interfaces web modernes repose sur une compréhension approfondie du HTML5 et du CSS.
Ces technologies ne se limitent plus à structurer et styliser des pages simples : elles permettent aujourd’hui de créer des expériences utilisateur riches, dynamiques et adaptées à tous les écrans.
Pour les étudiants, les autodidactes ou les candidats à des examens en développement web, la maîtrise de ces notions avancées est devenue incontournable.
Cette page propose un entraînement pédagogique axé sur les propriétés CSS et les balises HTML essentielles à la création de mises en page professionnelles.
Elle aborde notamment la gestion des tableaux, des formulaires, des médias, des espacements et des animations.
L’objectif est d’aider l’apprenant à comprendre comment chaque règle influence l’affichage final, tout en développant des réflexes solides pour écrire un code clair, structuré et efficace.
La conception d’interfaces web modernes repose sur une compréhension approfondie du HTML5 et du CSS.
Ces technologies ne se limitent plus à structurer et styliser des pages simples : elles permettent aujourd’hui de créer des expériences utilisateur riches, dynamiques et adaptées à tous les écrans.
Pour les étudiants, les autodidactes ou les candidats à des examens en développement web, la maîtrise de ces notions avancées est devenue incontournable.
Cette page propose un entraînement pédagogique axé sur les propriétés CSS et les balises HTML essentielles à la création de mises en page professionnelles.
Elle aborde notamment la gestion des tableaux, des formulaires, des médias, des espacements et des animations.
L’objectif est d’aider l’apprenant à comprendre comment chaque règle influence l’affichage final, tout en développant des réflexes solides pour écrire un code clair, structuré et efficace.
QCM
1
Corrigé
Quelle propriété CSS est utilisée pour fusionner les bordures d'un tableau ?
A. border-spacing
B. border-collapse
C. border-style
D. table-border: merge;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'border-collapse: collapse;' permet d'avoir des bordures simples et nettes entre les cellules.
QCM
2
Corrigé
Quelle unité CSS est basée sur 1% de la largeur de la fenêtre du navigateur ?
A. vh
B. rem
C. vw
D. %
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'vw' signifie 'viewport width'. 100vw équivaut à la largeur totale de l'écran.
QCM
3
Corrigé
Quelle balise HTML5 est utilisée pour intégrer un fichier audio ?
A. <sound>
B. <music>
C. <audio>
D. <mp3>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La balise <audio> permet de lire des fichiers sonores directement dans le navigateur.
QCM
4
Corrigé
Comment s'appelle l'espace situé à l'extérieur de la bordure d'un élément ?
A. Padding
B. Margin
C. Outline
D. Spacing
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La marge (margin) crée de l'espace autour de l'élément, au-delà de sa bordure.
QCM
5
Corrigé
Quelle propriété permet d'animer le changement d'une valeur CSS sur une durée ?
A. animation-delay
B. transform
C. transition
D. speed
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'transition' définit comment une propriété change d'un état à un autre de façon fluide.
QCM
6
Corrigé
Quelle valeur de 'position' permet de fixer un élément par rapport à la fenêtre, même au scroll ?
A. relative
B. absolute
C. fixed
D. sticky
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Un élément 'fixed' reste immobile à l'écran quel que soit le défilement de la page.
QCM
7
Corrigé
Quel attribut HTML permet de lier un bouton à un identifiant de formulaire spécifique ?
A. action
B. form
C. target
D. method
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'attribut 'form' permet de placer un bouton de validation n'importe où, même hors du bloc <form>.
QCM
8
Corrigé
Quelle propriété CSS est utilisée pour changer l'épaisseur d'une bordure ?
A. border-weight
B. border-width
C. border-size
D. thickness
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'border-width' définit la largeur (fine, moyenne, épaisse ou en pixels) de la bordure.
QCM
9
Corrigé
En CSS, que signifie 'list-style-type: none;' ?
A. Affiche les puces en carré
B. Supprime les puces d'une liste
C. Met la liste sur une seule ligne
D. Numérote automatiquement la liste
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Cette propriété retire les symboles (points ou numéros) par défaut des éléments <li>.
QCM
10
Corrigé
Quel type d'input HTML5 permet de choisir une date via un calendrier ?
A. <input type='calendar'>
B. <input type='time'>
C. <input type='date'>
D. <input type='day'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'input 'date' affiche une interface de sélection de date native.
QCM
11
Corrigé
Quelle propriété CSS définit l'alignement vertical des éléments dans un conteneur Flexbox ?
A. justify-content
B. align-items
C. vertical-align
D. text-align
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'align-items' gère l'alignement sur l'axe secondaire (vertical par défaut en ligne).
QCM
12
Corrigé
Quelle balise est utilisée pour regrouper un ensemble de champs de formulaire ?
A. <group>
B. <fieldset>
C. <section>
D. <box>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<fieldset> permet de regrouper logiquement des éléments de formulaire, souvent avec une légende (<legend>).
QCM
13
Corrigé
Quelle propriété CSS permet de modifier l'espace entre les lettres ?
A. word-spacing
B. line-height
C. letter-spacing
D. text-indent
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'letter-spacing' ajuste l'espacement entre les caractères d'un mot.
QCM
14
Corrigé
Quelle est la fonction de la balise HTML <mark> ?
A. Mettre un texte en italique
B. Surligner du texte
C. Afficher une erreur
D. Créer un lien interne
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<mark> est utilisé pour mettre en évidence un texte (effet surligneur jaune par défaut).
QCM
15
Corrigé
Quel sélecteur CSS cible un élément seulement lorsqu'il a le focus (clic ou tabulation) ?
A. :active
B. :visited
C. :focus
D. :hover
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
':focus' est essentiel pour l'accessibilité au clavier.
QCM
16
Corrigé
Quelle propriété CSS permet d'incliner ou de faire pivoter un élément ?
A. rotate
B. skew
C. transform
D. turn
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La propriété 'transform' accepte des fonctions comme rotate(), scale() ou skew().
QCM
17
Corrigé
Comment appelle-t-on le sélecteur '*' en CSS ?
A. Sélecteur global
B. Sélecteur d'identifiant
C. Sélecteur universel
D. Sélecteur de classe
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le sélecteur universel '*' cible absolument tous les éléments HTML de la page.
QCM
18
Corrigé
En CSS, à quoi sert 'overflow: scroll;' ?
A. À agrandir l'élément à l'infini
B. À ajouter des barres de défilement si le contenu dépasse
C. À cacher le contenu qui dépasse
D. À empêcher le défilement de la page
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'overflow' gère le comportement du contenu qui excède les dimensions de son conteneur.
QCM
19
Corrigé
Quelle balise HTML5 est utilisée pour les légendes d'images ou de figures ?
A. <caption>
B. <label>
C. <figcaption>
D. <summary>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<figcaption> s'utilise à l'intérieur d'une balise <figure> pour décrire l'image.
QCM
20
Corrigé
Quelle propriété CSS contrôle la hauteur d'une ligne de texte ?
A. text-height
B. font-size
C. line-height
D. spacing-top
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'line-height' permet d'ajuster l'interligne pour améliorer la lisibilité.
QCM
21
Corrigé
Quelle est la principale différence entre :is() et :where() en termes de spécificité ?
A. :is() a toujours une spécificité nulle, contrairement à :where().
B. :where() a toujours une spécificité nulle, alors que :is() prend la spécificité de son argument le plus fort.
C. :is() additionne les spécificités de tous ses arguments.
D. Il n'y a aucune différence de spécificité entre les deux.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:where() permet de grouper des sélecteurs sans alourdir leur poids, facilitant les surcharges ultérieures.
QCM
22
Corrigé
En CSS Grid, que permet d'accomplir la valeur 'subgrid' pour la propriété grid-template-columns ?
A. Elle crée une grille indépendante de la grille parente.
B. Elle force l'élément enfant à définir ses propres colonnes sans tenir compte du parent.
C. Elle permet à l'élément enfant d'utiliser les lignes de colonne définies sur son parent.
D. Elle divise chaque cellule en quatre sous-cellules égales.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le subgrid permet d'aligner parfaitement des descendants sur la grille d'un ancêtre, assurant une cohérence visuelle complexe.
QCM
23
Corrigé
Quel sélecteur permet de cibler un élément parent uniquement s'il contient un descendant spécifique (sélecteur relationnel) ?
A. :is()
B. :where()
C. :not()
D. :has()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
:has() est le 'sélecteur de parent' qui vérifie la présence de descendants ou d'éléments frères.
QCM
24
Corrigé
Quelle propriété CSS permet de créer un contexte de formatage de bloc (BFC) sans effets secondaires sur le débordement ?
A. display: flow-root
B. display: block
C. overflow: hidden
D. float: left
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
flow-root crée un BFC proprement, permettant de contenir les flottants sans masquer le contenu qui dépasse.
QCM
25
Corrigé
À quoi sert la propriété 'content-visibility: auto' ?
A. À traduire automatiquement le texte via le navigateur.
B. À optimiser le rendu en sautant le calcul des éléments hors écran (off-screen).
C. À rendre un élément invisible pour les lecteurs d'écran.
D. À ajuster la taille du texte selon le viewport.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est une optimisation de performance majeure pour les pages très longues, réduisant le travail du CPU.
QCM
26
Corrigé
Quel est l'effet de 'isolation: isolate' en CSS ?
A. Il empêche l'élément d'être cliqué par l'utilisateur.
B. Il crée un nouveau contexte d'empilement (stacking context) sans modifier le z-index.
C. Il retire l'élément du flux normal du document.
D. Il bloque l'héritage des variables CSS vers les enfants.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Isolate permet de s'assurer que les z-index internes n'interfèrent pas avec le reste de la page.
QCM
27
Corrigé
Dans une transition, que permet de réaliser la fonction steps(4, jump-end) ?
A. Une animation fluide divisée en 4 secondes.
B. Une animation qui se répète 4 fois de suite.
C. Une animation segmentée en 4 étapes discrètes sans transition fluide.
D. Une animation qui attend 4 secondes avant de démarrer.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La fonction steps est idéale pour des animations de type sprite ou horlogerie (mouvement saccadé).
QCM
28
Corrigé
Que définit l'unité 'ch' en CSS ?
A. La hauteur de la ligne de texte actuelle.
B. Un dixième de la largeur du viewport.
C. La largeur moyenne de tous les caractères de la police.
D. La largeur du caractère '0' (zéro) de la police actuelle.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L'unité ch est très utile pour limiter la largeur des paragraphes de façon typographique.
QCM
29
Corrigé
Quelle est la particularité du sélecteur :focus-visible par rapport à :focus ?
A. Il ne s'active que si l'élément est masqué par un autre.
B. Il ne s'applique que lors d'une navigation au clavier (Tab) et non au clic souris.
C. Il force l'affichage d'une bordure rouge par défaut.
D. Il cible les éléments qui ne peuvent pas recevoir le focus.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Cela permet d'améliorer l'accessibilité sans dégrader l'esthétique pour les utilisateurs de souris.
QCM
30
Corrigé
En CSS, que fait 'box-decoration-break: clone' ?
A. Il duplique l'élément HTML deux fois sur la page.
B. Il applique le padding et les bordures à chaque fragment d'un élément coupé sur plusieurs lignes.
C. Il crée une ombre portée identique sur tous les bords.
D. Il permet de copier les styles d'un élément vers un autre.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Utile pour le texte multi-lignes souligné ou encadré, afin que chaque ligne ait ses propres bordures.
QCM
31
Corrigé
Quel sélecteur cible un élément <a> dont l'attribut href commence exactement par 'https' ?
A. a[href^='https']
B. a[href$='https']
C. a[href*='https']
D. a[href|='https']
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
L'opérateur ^= signifie 'commence par' dans les sélecteurs d'attributs.
QCM
32
Corrigé
Quelle propriété permet de définir le comportement d'un arrière-plan lors du défilement (fixe ou défilant) ?
A. background-origin
B. background-attachment
C. background-clip
D. background-repeat
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La valeur 'fixed' permet de créer des effets de parallaxe simples en bloquant l'image de fond.
QCM
33
Corrigé
À quoi servent les 'Container Queries' (@container) ?
A. À modifier le style selon la taille du viewport global.
B. À limiter la taille d'un conteneur <div> au maximum.
C. À styliser un élément selon la taille de son conteneur parent direct.
D. À forcer le téléchargement d'images de haute qualité.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Contrairement aux Media Queries, elles permettent de créer des composants réellement modulaires.
QCM
34
Corrigé
Que fait 'object-fit: cover' sur une balise <img> ?
A. Il étire l'image pour qu'elle remplisse tout l'espace sans garder le ratio.
B. Il réduit l'image pour qu'elle soit entièrement visible dans le cadre.
C. Il retire l'image du flux HTML.
D. Il remplit tout l'espace du conteneur en conservant le ratio et en rognant les bords.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
C'est la méthode standard pour harmoniser des galeries d'images de ratios différents.
QCM
35
Corrigé
Quel est le rôle du mot-clé 'currentColor' ?
A. Il définit une couleur aléatoire au chargement de la page.
B. Il utilise la valeur actuelle de la propriété 'color' de l'élément ou de son parent.
C. Il renvoie la couleur par défaut du navigateur (noir).
D. Il permet de forcer le mode sombre.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Très utile pour que les icônes SVG ou les bordures héritent automatiquement de la couleur du texte.
QCM
36
Corrigé
Quelle propriété CSS est utilisée pour optimiser les performances d'un élément qui va être animé ?
A. will-change
B. transform-style
C. perspective
D. backface-visibility
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
will-change prévient le navigateur de préparer les ressources (souvent sur le GPU) pour l'animation.
QCM
37
Corrigé
Comment s'appelle le mécanisme qui permet aux marges verticales de fusionner entre deux blocs adjacents ?
A. Margin nesting
B. Margin overflow
C. Margin collapse
D. Margin grouping
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La fusion des marges verticales est un comportement par défaut où seule la plus grande marge est conservée.
QCM
38
Corrigé
Quelle est la valeur par défaut de la propriété 'flex-basis' ?
A. 0%
B. 100%
C. auto
D. content
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La valeur 'auto' indique au navigateur de regarder la largeur ou la hauteur définie de l'élément.
QCM
39
Corrigé
Quelle propriété CSS permet de découper un élément selon une forme complexe (cercle, polygone) ?
A. mask-image
B. shape-outside
C. clip-path
D. border-radius
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
clip-path permet de créer des masques vectoriels directement sur les éléments HTML.
QCM
40
Corrigé
En CSS, quel sélecteur cible le premier caractère de la première ligne d'un texte ?
A. ::first-letter
B. :first-child
C. ::first-line
D. :first-of-type
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
C'est un pseudo-élément utilisé pour créer des lettrines élégantes en typographie web.
Mots & Définitions
Consultez les définitions des termes importants.
Border-collapse est une propriété CSS utilisée avec les tableaux HTML. Elle permet de fusionner les bordures des cellules adjacentes pour obtenir un affichage plus propre. C’est un réglage courant pour améliorer la lisibilité des tableaux.
L’unité vw représente un pourcentage de la largeur de la fenêtre d’affichage. Elle permet de créer des mises en page adaptatives qui s’ajustent automatiquement à la taille de l’écran. Elle est très utilisée dans le design responsive.
La balise audio permet d’intégrer un fichier sonore directement dans une page web. Elle offre des contrôles de lecture sans recourir à des plugins externes. C’est une fonctionnalité native du HTML5.
La marge correspond à l’espace situé à l’extérieur de la bordure d’un élément. Elle sert à séparer visuellement les éléments entre eux. Une bonne gestion des marges améliore la clarté de la mise en page.
Une transition CSS permet d’animer progressivement le changement d’une propriété visuelle. Elle rend les interactions plus fluides et agréables pour l’utilisateur. Elle est souvent utilisée lors des survols ou des changements d’état.
La position fixed permet de fixer un élément par rapport à la fenêtre du navigateur. L’élément reste visible même lors du défilement de la page. Elle est souvent utilisée pour les menus ou barres d’information.
Flexbox est un modèle de mise en page CSS conçu pour organiser les éléments de manière flexible. Il facilite l’alignement, la distribution de l’espace et l’adaptation aux écrans. C’est un outil essentiel du développement front-end moderne.
Letter-spacing contrôle l’espace horizontal entre les lettres d’un texte. Cette propriété permet d’améliorer la lisibilité ou de créer un effet graphique particulier. Elle agit uniquement sur l’apparence visuelle.
Le sélecteur universel cible tous les éléments d’une page web. Il est souvent utilisé pour appliquer des styles globaux. Son usage doit rester modéré pour éviter des effets indésirables.
La propriété overflow définit la façon dont le contenu dépassant un conteneur est affiché. Elle permet d’ajouter des barres de défilement ou de masquer le débordement. C’est un outil important pour gérer les zones de contenu.
À propos de ce QCM
Les QCM présentés couvrent des notions fondamentales et avancées du HTML5 et du CSS, indispensables pour concevoir des pages web lisibles et fonctionnelles.
La gestion des tableaux, par exemple, permet d’organiser efficacement des données grâce à des propriétés comme la fusion des bordures ou l’espacement des cellules.
Ces réglages améliorent à la fois l’esthétique et la compréhension de l’information affichée.
Les unités relatives et basées sur le viewport jouent un rôle clé dans le design responsive.
Elles permettent d’adapter automatiquement la taille des éléments à la fenêtre du navigateur, garantissant une expérience cohérente sur ordinateur, tablette ou mobile.
Cette approche est aujourd’hui incontournable dans le développement web professionnel.
Les QCM abordent également l’intégration de contenus multimédias, tels que l’audio, qui enrichissent les pages sans dépendre de solutions externes.
La gestion des marges, des bordures et des espacements internes permet de structurer visuellement les éléments et d’éviter les interfaces surchargées.
Les propriétés liées aux animations et aux transitions contribuent à rendre les interactions plus fluides et intuitives.
Elles améliorent l’ergonomie sans complexifier le code.
Par ailleurs, la maîtrise du positionnement, notamment avec des éléments fixés à l’écran, est essentielle pour créer des menus ou des éléments persistants.
Enfin, les notions liées à Flexbox, aux formulaires et aux propriétés typographiques renforcent la capacité à construire des interfaces modernes, accessibles et bien organisées.
Ces QCM favorisent la compréhension théorique, l’entraînement ciblé et l’auto-évaluation, tout en préparant efficacement aux examens et projets pratiques.
Conclusion
Cette série de QCM constitue un excellent support pour consolider les bases avancées du HTML5 et du CSS.
Elle permet de mieux comprendre les mécanismes de mise en page, de typographie et d’interaction qui influencent directement l’expérience utilisateur.
En s’exerçant régulièrement, l’apprenant développe des automatismes, gagne en précision et renforce sa confiance.
Ces compétences sont essentielles pour réussir des évaluations, concevoir des interfaces modernes et évoluer vers des projets web plus ambitieux, avec un code structuré, lisible et professionnel.
