Cette série de QCM est dédiée aux fondements du développement web front-end, en particulier à l’utilisation conjointe du HTML et du CSS.
Ces deux langages constituent la base de toute page web moderne : le HTML structure le contenu, tandis que le CSS contrôle son apparence visuelle et sa mise en page.
Maîtriser ces notions est indispensable pour les étudiants, les autodidactes et les candidats aux examens ou concours liés à l’informatique et au web.
À travers ces questions, l’apprenant est amené à consolider des notions essentielles telles que la structuration sémantique des pages, la gestion des styles, l’organisation des contenus, ainsi que les mécanismes d’affichage et d’alignement.
L’objectif n’est pas seulement de reconnaître des balises ou des propriétés, mais de comprendre leur rôle réel dans la construction d’interfaces claires, accessibles et cohérentes.
Cette approche progressive permet d’acquérir des bases solides, indispensables pour évoluer vers des projets web plus avancés.
Cette série de QCM est dédiée aux fondements du développement web front-end, en particulier à l’utilisation conjointe du HTML et du CSS.
Ces deux langages constituent la base de toute page web moderne : le HTML structure le contenu, tandis que le CSS contrôle son apparence visuelle et sa mise en page.
Maîtriser ces notions est indispensable pour les étudiants, les autodidactes et les candidats aux examens ou concours liés à l’informatique et au web.
À travers ces questions, l’apprenant est amené à consolider des notions essentielles telles que la structuration sémantique des pages, la gestion des styles, l’organisation des contenus, ainsi que les mécanismes d’affichage et d’alignement.
L’objectif n’est pas seulement de reconnaître des balises ou des propriétés, mais de comprendre leur rôle réel dans la construction d’interfaces claires, accessibles et cohérentes.
Cette approche progressive permet d’acquérir des bases solides, indispensables pour évoluer vers des projets web plus avancés.
QCM
1
Corrigé
Quel attribut HTML définit la langue du document ?
A. charset
B. lang
C. type
D. dir
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L’attribut lang précise la langue principale du document.
QCM
2
Corrigé
Quelle balise HTML permet de regrouper du contenu en bloc ?
A. <span>
B. <section>
C. <div>
D. <article>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<div> est une balise générique de type bloc.
QCM
3
Corrigé
Quelle propriété CSS gère la transparence ?
A. display
B. opacity
C. visibility
D. filter
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
opacity contrôle le niveau de transparence.
QCM
4
Corrigé
Quelle balise HTML est utilisée pour un bouton ?
A. <input>
B. <submit>
C. <btn>
D. <button>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
<button> permet de créer un bouton cliquable.
QCM
5
Corrigé
Quelle propriété CSS définit la hauteur d’un élément ?
A. width
B. size
C. height
D. line-height
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
height définit la hauteur d’un élément.
QCM
6
Corrigé
Quelle balise HTML est utilisée pour un champ de saisie ?
A. <input>
B. <textarea>
C. <form>
D. <label>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
<input> permet la saisie de données utilisateur.
QCM
7
Corrigé
Quelle propriété CSS permet d’afficher ou masquer un élément ?
A. visibility
B. opacity
C. display
D. z-index
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
display peut masquer ou afficher complètement un élément.
QCM
8
Corrigé
Quelle balise HTML définit l’en-tête d’une page ou section ?
A. <head>
B. <top>
C. <nav>
D. <header>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
<header> est une balise sémantique d’en-tête.
QCM
9
Corrigé
Quelle propriété CSS permet de superposer des éléments ?
A. position
B. float
C. z-index
D. overflow
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
z-index gère l’ordre d’empilement des éléments.
QCM
10
Corrigé
Quelle balise HTML est utilisée pour une liste ordonnée ?
A. <ul>
B. <li>
C. <ol>
D. <list>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<ol> crée une liste ordonnée numérotée.
QCM
11
Corrigé
Quelle propriété CSS définit l’espace intérieur d’un élément ?
A. margin
B. padding
C. border
D. spacing
Afficher la réponse
Cliquez pour voir la correction
Quelle balise HTML est utilisée pour inclure une feuille CSS externe ?
A. <style>
B. <script>
C. <css>
D. <link>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
<link> permet de lier un fichier CSS externe.
QCM
13
Corrigé
Quelle propriété CSS permet de gérer le débordement du contenu ?
A. overflow
B. display
C. float
D. clear
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
overflow contrôle le contenu qui dépasse.
QCM
14
Corrigé
Quelle balise HTML représente un pied de page ?
A. <bottom>
B. <footer>
C. <end>
D. <section>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<footer> est utilisée pour le pied de page.
QCM
15
Corrigé
Quelle propriété CSS transforme le texte en majuscules ?
A. font-style
B. text-align
C. text-transform
D. letter-spacing
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
text-transform permet de modifier la casse du texte.
QCM
16
Corrigé
Quelle balise HTML est utilisée pour intégrer une vidéo ?
A. <media>
B. <movie>
C. <video>
D. <iframe>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<video> permet d’intégrer des vidéos HTML5.
QCM
17
Corrigé
Quelle propriété CSS permet d’utiliser Flexbox ?
A. display
B. position
C. float
D. align
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
display: flex active le modèle Flexbox.
QCM
18
Corrigé
Quelle balise HTML est utilisée pour un texte important ?
A. <b>
B. <strong>
C. <i>
D. <mark>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<strong> indique une importance sémantique.
QCM
19
Corrigé
Quelle propriété CSS permet d’aligner les éléments en Flexbox ?
A. text-align
B. justify-content
C. vertical-align
D. float
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
justify-content aligne les éléments sur l’axe principal.
QCM
20
Corrigé
Quelle balise HTML est utilisée pour intégrer une page externe ?
A. <embed>
B. <object>
C. <frame>
D. <iframe>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
<iframe> permet d’intégrer une page externe.
QCM
21
Corrigé
Quelle est la principale différence entre les pseudo-classes :is() et :where() concernant la cascade CSS ?
A. :is() ne peut contenir que des sélecteurs simples, contrairement à :where().
B. :where() a toujours une spécificité nulle, tandis que :is() prend la spécificité de son argument le plus fort.
C. :is() est réservé aux éléments de structure (div, section) tandis que :where() est universel.
D. :where() permet de cibler les éléments parents, ce que :is() ne permet pas.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:where() permet de grouper des sélecteurs sans augmenter leur poids, facilitant ainsi les surcharges ultérieures sans utiliser !important.
QCM
22
Corrigé
En CSS Grid, quelle est la fonction précise du mot-clé 'subgrid' ?
A. Créer une grille indépendante à l'intérieur d'une cellule sans lien avec le parent.
B. Permettre à un élément enfant d'hériter des lignes et colonnes définies sur la grille de son parent direct.
C. Diviser automatiquement une cellule de grille en quatre sous-sections égales.
D. Forcer l'alignement des éléments sur une ligne de base typographique stricte.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le subgrid permet d'aligner des descendants profonds sur la structure de la grille principale, assurant une cohérence visuelle parfaite.
QCM
23
Corrigé
Quel sélecteur permet de cibler un élément <form> uniquement s'il contient un <input> ayant le focus ?
A. form:focus
B. form > input:focus
C. form:focus-within
D. form:focus-visible
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
:focus-within s'applique à un élément si lui-même ou l'un de ses descendants reçoit le focus.
QCM
24
Corrigé
Que permet d'accomplir la propriété 'content-visibility: auto' ?
A. Elle traduit automatiquement le texte dans la langue de l'utilisateur.
B. Elle ajuste la luminosité des images en fonction du mode sombre du système.
C. Elle masque les éléments vides pour réduire l'encombrement du DOM.
D. Elle saute le rendu des éléments hors écran pour améliorer les performances de chargement initial.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
C'est une optimisation de performance majeure qui permet au navigateur de ne pas calculer le rendu des éléments non visibles.
QCM
25
Corrigé
Quelle propriété CSS est spécifiquement conçue pour éviter que les éléments ne débordent de leur conteneur à cause de mots extrêmement longs (ex: URLs) ?
A. overflow-wrap: break-word
B. text-align: justify
C. word-spacing: narrow
D. white-space: pre
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
L'overflow-wrap (anciennement word-wrap) force la coupure d'un mot s'il n'y a pas d'autre moyen de l'insérer dans la ligne.
QCM
26
Corrigé
Dans le contexte des Container Queries, quel sélecteur est correct pour styliser un enfant si son parent dépasse 500px ?
A. @media (min-width: 500px)
B. @container (min-width: 500px)
C. @parent (width > 500px)
D. @layout (min-size: 500px)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les Container Queries permettent de styliser un composant en fonction de l'espace alloué par son parent et non de la taille du viewport.
QCM
27
Corrigé
Quelle est la valeur par défaut de la propriété 'flex-shrink' ?
A. 0
B. auto
C. 1
D. none
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Par défaut, un élément flex peut rétrécir (valeur 1) pour éviter de déborder de son conteneur.
QCM
28
Corrigé
Comment définir une couleur en utilisant le nouveau modèle 'OKLCH' en CSS ?
A. color: oklch(50% 0.1 150)
B. color: oklch(150, 0.1, 50%)
C. color: oklch(0.1 150 50%)
D. color: oklch(50% / 150 / 0.1)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Le modèle OKLCH suit l'ordre : Luminosité, Chromas (intensité), Teinte (angle), offrant une perception des couleurs plus humaine.
QCM
29
Corrigé
Quel sélecteur cible un élément <a> dont l'attribut href se termine exactement par '.pdf' ?
A. a[href^='.pdf']
B. a[href*='.pdf']
C. a[href$='.pdf']
D. a[href~='.pdf']
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le symbole '$=' signifie 'se termine par' dans les sélecteurs d'attributs CSS.
QCM
30
Corrigé
À quoi sert la propriété 'isolation: isolate' ?
A. À empêcher un élément d'hériter des variables CSS de ses ancêtres.
B. À créer un nouveau contexte d'empilement (stacking context) sans modifier le z-index.
C. À bloquer les scripts tiers qui tenteraient de modifier le style de l'élément.
D. À centrer un élément de manière absolue par rapport au document.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Cela permet de confiner les effets de mélange (mix-blend-mode) ou l'organisation des z-index à l'intérieur de ce groupe.
QCM
31
Corrigé
Quelle propriété CSS permet de définir un ratio d'aspect constant pour un élément, comme 16/9, sans calculer la hauteur manuellement ?
A. dimension-ratio: 16/9
B. size-aspect: 1.77
C. scale: 16 9
D. aspect-ratio: 16 / 9
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
La propriété aspect-ratio simplifie la création de conteneurs media responsives.
QCM
32
Corrigé
Quel est l'effet de 'pointer-events: none' sur un bouton ?
A. Il rend le bouton invisible mais cliquable.
B. Il transforme le curseur en icône de chargement.
C. Il rend le bouton totalement insensible aux clics (ils passent à travers).
D. Il désactive uniquement les événements de type 'clavier'.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'élément devient 'transparent' pour les interactions de la souris ; les événements sont captés par l'élément situé dessous.
QCM
33
Corrigé
Quel mot-clé dans 'object-fit' permet de conserver le ratio d'une image tout en remplissant le conteneur, quitte à rogner les bords ?
A. contain
B. cover
C. fill
D. scale-down
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Cover est idéal pour les galeries d'images où toutes les boîtes doivent avoir la même taille sans déformer les photos.
QCM
34
Corrigé
Que définit la spécification 'CSS Logical Properties' (ex: margin-inline-start) ?
A. Des marges qui s'adaptent au sens de lecture (gauche-à-droite ou droite-à-gauche).
B. Des propriétés qui n'acceptent que des valeurs mathématiques (calc).
C. Un système de priorité basé sur l'ordre alphabétique des propriétés.
D. La gestion automatique du mode sombre par le navigateur.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Les propriétés logiques remplacent 'left' et 'right' par 'start' et 'end' pour faciliter l'internationalisation des sites.
QCM
35
Corrigé
En utilisant calc(), quelle est la règle impérative concernant les opérateurs '+' et '-' ?
A. Ils ne peuvent être utilisés qu'avec des unités identiques (ex: px + px).
B. Ils doivent être impérativement entourés d'espaces (ex: 10px + 5%).
C. Ils doivent être écrits en majuscules pour être interprétés.
D. Ils ne fonctionnent pas à l'intérieur d'une variable CSS.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Sans espaces, '-' pourrait être interprété comme faisant partie d'un nom de variable ou d'une valeur négative.
QCM
36
Corrigé
À quoi sert la propriété 'scroll-behavior: smooth' ?
A. À ralentir la vitesse de défilement de la molette.
B. À masquer les barres de défilement latérales.
C. À animer le glissement vers une ancre au lieu d'un saut instantané.
D. À empêcher le rebond élastique sur les appareils mobiles.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Appliquée sur l'élément HTML, elle rend la navigation par ancres internes beaucoup plus agréable visuellement.
QCM
37
Corrigé
Quel est le comportement du mot-clé 'currentColor' en CSS ?
A. Il récupère la couleur de fond du parent direct.
B. Il utilise la valeur de la propriété 'color' de l'élément lui-même.
C. Il renvoie la couleur opposée sur le cercle chromatique.
D. Il sélectionne la couleur dominante de l'image de fond.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est une variable native très utile pour que les bordures ou les SVGs héritent automatiquement de la couleur du texte.
QCM
38
Corrigé
L'unité 'ch' est basée sur quelle mesure ?
A. La hauteur moyenne des caractères minuscules.
B. La largeur du caractère '0' de la police utilisée.
C. Un dixième de la largeur du viewport.
D. Le ratio entre la taille de police et l'interlignage.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité ch est parfaite pour limiter la largeur des paragraphes à un nombre de caractères optimal pour la lecture.
QCM
39
Corrigé
Quel sélecteur cible un élément <li> uniquement s'il est le troisième enfant de son parent ?
A. li:nth-child(3)
B. li:nth-of-type(3)
C. li:child(3)
D. li:item(3)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
:nth-child(n) compte tous les enfants du parent pour trouver l'élément à la position indiquée.
QCM
40
Corrigé
Quelle propriété permet de contrôler l'ordre d'affichage des éléments Flex/Grid sans changer le code HTML ?
A. z-index
B. flex-position
C. display-index
D. order
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
La propriété order accepte des nombres entiers (négatifs inclus) pour réorganiser visuellement les boîtes.
Mots & Définitions
Consultez les définitions des termes importants.
L’attribut lang permet d’indiquer la langue principale d’un document ou d’un élément HTML. Il aide les navigateurs, les lecteurs d’écran et les moteurs de recherche à interpréter correctement le contenu. C’est un élément important pour l’accessibilité et le référencement.
La balise div est un conteneur HTML utilisé pour regrouper du contenu en bloc. Elle n’a pas de sens sémantique propre, mais sert à structurer la page et à appliquer des styles CSS. Elle est très utilisée dans la mise en page.
La propriété opacity permet de gérer la transparence d’un élément. Elle s’exprime par une valeur comprise entre 0 et 1. Plus la valeur est faible, plus l’élément devient transparent.
La balise button permet de créer un bouton cliquable dans une page web. Elle peut contenir du texte ou d’autres éléments HTML. Elle est souvent utilisée pour déclencher des actions dans les formulaires ou via JavaScript.
La propriété height définit la hauteur d’un élément HTML. Elle permet de contrôler la taille verticale d’un bloc. Elle est fréquemment utilisée pour structurer les mises en page.
La balise input sert à créer un champ de saisie dans un formulaire. Elle permet à l’utilisateur d’entrer des données comme du texte, des nombres ou des dates. Son comportement dépend de son type.
La propriété display contrôle la manière dont un élément est affiché dans la page. Elle peut rendre un élément visible, masqué ou changer son comportement de mise en page. C’est une propriété centrale en CSS.
La balise header représente l’en-tête d’une page ou d’une section. Elle contient généralement des titres, des logos ou des éléments de navigation. Elle apporte une structure sémantique claire au document.
La propriété z-index permet de gérer l’empilement des éléments qui se superposent. Plus sa valeur est élevée, plus l’élément apparaît au premier plan. Elle fonctionne uniquement avec des éléments positionnés.
Une liste ordonnée est une liste dont les éléments sont numérotés automatiquement. Elle est utilisée lorsque l’ordre des éléments a une importance logique. En HTML, elle structure des étapes ou des classements.
Le padding correspond à l’espace intérieur entre le contenu d’un élément et sa bordure. Il permet d’aérer le contenu et d’améliorer la lisibilité. Contrairement à la marge, il fait partie de l’élément.
La balise link est utilisée pour lier des ressources externes à une page HTML. Elle sert notamment à inclure des feuilles de style CSS. Elle se place généralement dans l’en-tête du document.
La propriété overflow gère l’affichage du contenu qui dépasse les dimensions d’un élément. Elle permet de masquer ce contenu ou d’ajouter des barres de défilement. Elle est essentielle pour contrôler les zones limitées.
La balise footer représente le pied de page d’un document ou d’une section. Elle contient souvent des informations complémentaires comme les mentions légales ou les liens secondaires. Elle améliore la structure sémantique du HTML.
La propriété text-transform permet de modifier l’apparence des lettres d’un texte. Elle peut transformer le texte en majuscules, minuscules ou capitales. Elle agit uniquement sur l’affichage.
La balise video permet d’intégrer une vidéo directement dans une page web. Elle offre des contrôles natifs comme la lecture ou la pause. Elle fait partie des fonctionnalités multimédias du HTML5.
Flexbox est un modèle de mise en page CSS conçu pour aligner et répartir des éléments dans un conteneur. Il facilite la création de mises en page flexibles et adaptatives. Il est très utilisé dans le design moderne.
La balise strong sert à indiquer qu’un texte a une importance particulière. Elle donne un sens sémantique fort au contenu, au-delà de l’aspect visuel. Les navigateurs l’affichent généralement en gras.
La propriété justify-content permet d’aligner les éléments le long de l’axe principal en Flexbox. Elle contrôle la répartition de l’espace entre les éléments. Elle est essentielle pour structurer les alignements horizontaux.
La balise iframe permet d’intégrer une page web externe dans une autre page. Elle est souvent utilisée pour afficher des vidéos, des cartes ou des contenus tiers. Elle fonctionne comme une fenêtre intégrée.
À propos de ce QCM
Les QCM proposés couvrent un ensemble cohérent de notions fondamentales en HTML et CSS, essentielles à la création et à la mise en forme de pages web.
Du côté du HTML, l’accent est mis sur les balises structurantes utilisées pour organiser le contenu, définir les zones principales d’une page, intégrer des éléments interactifs ou multimédias, et améliorer la sémantique du document.
Ces notions permettent de concevoir des pages lisibles, bien hiérarchisées et compatibles avec les standards du web.
En CSS, les questions abordent les propriétés clés liées à l’affichage, à la visibilité et à l’agencement des éléments.
L’apprenant est invité à comprendre comment contrôler les dimensions, l’espacement interne et externe, la superposition des blocs, ainsi que la gestion du débordement du contenu.
Une attention particulière est également portée aux mécanismes modernes de mise en page, comme Flexbox, qui facilitent l’alignement et la distribution des éléments dans des interfaces responsives.
Ces QCM développent des compétences essentielles telles que l’analyse du rendu visuel d’une page, la capacité à corriger des problèmes d’affichage et la compréhension des interactions entre structure et style.
Ils constituent un excellent outil d’auto-évaluation et d’entraînement ciblé, permettant de renforcer progressivement les acquis.
Cette démarche pédagogique aide l’utilisateur à gagner en assurance et à poser des bases solides pour la poursuite de son apprentissage ou la préparation à des évaluations officielles.
Conclusion
Dans l’ensemble, ces QCM offrent une approche structurée et pédagogique des bases du HTML et du CSS.
Ils permettent de consolider des connaissances indispensables à toute personne souhaitant comprendre ou créer des pages web fonctionnelles et bien présentées.
En s’entraînant régulièrement, l’utilisateur renforce sa maîtrise des concepts clés, améliore sa logique de raisonnement et développe une meilleure compréhension des bonnes pratiques du web.
Cette progression graduelle favorise la confiance, la rigueur et l’autonomie, tout en préparant efficacement aux examens, concours ou projets concrets.
Le travail régulier sur ce type de contenu est un véritable levier pour transformer des notions théoriques en compétences durables et opérationnelles.
