Le développement web moderne repose sur une compréhension solide des mécanismes fondamentaux de HTML et CSS, qui constituent la base de toute interface web fiable et accessible.
Ces technologies permettent non seulement de structurer correctement l’information, mais aussi de contrôler finement la présentation, l’interaction et l’expérience utilisateur.
Dans un contexte académique, professionnel ou lors de concours techniques, la maîtrise de ces notions est devenue incontournable.
Les QCM proposés explorent des concepts essentiels liés à la structuration sémantique des pages, à la gestion des styles, à la hiérarchisation des règles CSS et au comportement des éléments dans différents contextes d’affichage.
Ils invitent à raisonner sur des situations concrètes rencontrées lors de la création d’interfaces modernes, performantes et maintenables.
Cette approche progressive permet au lecteur de consolider ses bases tout en développant une vision plus rigoureuse et professionnelle du développement front-end.
Le développement web moderne repose sur une compréhension solide des mécanismes fondamentaux de HTML et CSS, qui constituent la base de toute interface web fiable et accessible.
Ces technologies permettent non seulement de structurer correctement l’information, mais aussi de contrôler finement la présentation, l’interaction et l’expérience utilisateur.
Dans un contexte académique, professionnel ou lors de concours techniques, la maîtrise de ces notions est devenue incontournable.
Les QCM proposés explorent des concepts essentiels liés à la structuration sémantique des pages, à la gestion des styles, à la hiérarchisation des règles CSS et au comportement des éléments dans différents contextes d’affichage.
Ils invitent à raisonner sur des situations concrètes rencontrées lors de la création d’interfaces modernes, performantes et maintenables.
Cette approche progressive permet au lecteur de consolider ses bases tout en développant une vision plus rigoureuse et professionnelle du développement front-end.
QCM
1
Corrigé
Quel sélecteur a la plus forte spécificité (poids) en CSS ?
A. Le sélecteur de type (ex: div)
B. Le sélecteur de classe (ex: .my-class)
C. Le sélecteur d'identifiant (ex: #my-id)
D. Le sélecteur universel (*)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'identifiant (#id) l'emporte toujours sur les classes et les types de balises dans le calcul de la spécificité.
QCM
2
Corrigé
Quelle balise HTML est la plus appropriée pour définir des informations de contact ?
A. <contact>
B. <footer>
C. <address>
D. <info>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La balise <address> est sémantiquement réservée aux informations de contact pour un article ou un document entier.
QCM
3
Corrigé
Quelle propriété CSS permet de changer l'apparence des majuscules en 'petites capitales' ?
A. text-transform: small-caps;
B. font-variant: small-caps;
C. font-style: caps;
D. text-variant: uppercase;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'font-variant' permet d'utiliser des variantes de glyphes comme les petites capitales.
QCM
4
Corrigé
Comment s'appelle l'espace entre le contenu et la bordure d'un élément ?
A. Margin
B. Border-width
C. Padding
D. Outline
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le padding est la marge interne qui sépare le contenu de sa propre bordure.
QCM
5
Corrigé
Quel attribut HTML permet de spécifier le jeu de caractères du document (souvent UTF-8) ?
A. <meta charset='...'>
B. <meta type='...'>
C. <meta encoding='...'>
D. <meta lang='...'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
La balise <meta charset='UTF-8'> dans le <head> assure que les caractères spéciaux s'affichent correctement.
QCM
6
Corrigé
En CSS, que fait 'font-style: italic;' ?
A. Il souligne le texte
B. Il met le texte en gras
C. Il incline les caractères
D. Il change la police
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'font-style' est principalement utilisé pour l'italique ou l'oblique.
QCM
7
Corrigé
Quel attribut HTML5 permet de charger un script de manière asynchrone ?
A. defer
B. async
C. wait
D. load
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'attribut 'async' permet au script de se charger en parallèle sans bloquer l'analyse du HTML.
QCM
8
Corrigé
Quelle propriété CSS permet de définir l'image de fond d'un élément ?
A. background-image
B. image-source
C. bg-img
D. source-image
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
On utilise background-image: url('chemin/image.jpg'); pour appliquer un fond.
QCM
9
Corrigé
Quelle balise HTML définit une zone de texte multi-ligne dans un formulaire ?
A. <input type='text-area'>
B. <text>
C. <textarea>
D. <field-text>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<textarea> contrairement à <input> permet d'écrire de longs paragraphes.
QCM
10
Corrigé
Quelle propriété CSS permet d'ajouter un effet de transition à la couleur de fond ?
A. transition: background-color 0.3s;
B. animate: background 0.3s;
C. speed: color 0.3s;
D. transform: color 0.3s;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
La propriété transition définit la propriété à animer et sa durée.
QCM
11
Corrigé
Quel sélecteur CSS cible tous les éléments ayant l'attribut 'title' ?
A. [title]
B. .title
C. #title
D. *title
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Les crochets [] sont utilisés pour cibler des éléments en fonction de leurs attributs.
QCM
12
Corrigé
Quelle est la valeur par défaut de la propriété 'background-repeat' ?
A. no-repeat
B. repeat-x
C. repeat
D. repeat-y
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Par défaut, une image de fond se répète horizontalement et verticalement pour remplir le bloc.
QCM
13
Corrigé
Quel type d'input HTML5 est conçu pour les numéros de téléphone ?
A. <input type='phone'>
B. <input type='tel'>
C. <input type='mobile'>
D. <input type='call'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'input 'tel' permet aux claviers mobiles d'afficher le pavé numérique.
QCM
14
Corrigé
Quelle propriété CSS permet de définir si un texte peut être sélectionné par l'utilisateur ?
A. user-select
B. text-selection
C. pointer-events
D. content-editable
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'user-select: none;' empêche l'utilisateur de copier/surligner le texte.
QCM
15
Corrigé
En HTML, quelle balise est utilisée pour créer une ligne horizontale de séparation ?
A. <line>
B. <hr>
C. <br>
D. <separator>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<hr> (Horizontal Rule) crée une coupure thématique visuelle entre deux sections.
QCM
16
Corrigé
Quelle propriété CSS permet de forcer un élément à rester à la ligne suivante (briser le flottement) ?
A. float: none;
B. clear
C. break
D. display: block;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La propriété 'clear: both;' empêche un élément de monter à côté d'un élément flottant.
QCM
17
Corrigé
Quelle unité CSS est égale à la hauteur de la ligne (line-height) courante ?
A. em
B. lh
C. ex
D. rem
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité 'lh' est utile pour aligner des éléments sur le rythme de la ligne de texte.
QCM
18
Corrigé
Quelle balise HTML5 est utilisée pour définir le contenu principal unique de la page ?
A. <section>
B. <content>
C. <main>
D. <body>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Il ne doit y avoir qu'une seule balise <main> visible par document HTML.
QCM
19
Corrigé
Quelle propriété CSS permet de définir le style des bordures (pointillés, tirets, plein) ?
A. border-type
B. border-style
C. border-variant
D. border-line
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les valeurs incluent 'solid', 'dashed', 'dotted', 'double', etc.
QCM
20
Corrigé
Que fait 'list-style-position: inside;' ?
A. Cache les puces
B. Place la puce à l'intérieur du bloc de texte de l'élément
C. Centre la liste
D. Aligne les puces à droite
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Cela modifie la façon dont la puce interagit avec le retour à la ligne du texte de la liste.
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 celle de son argument le plus fort.
C. :is() additionne les spécificités de tous ses arguments pour surpasser l'ID.
D. Les deux partagent la même spécificité, mais :is() est plus performant sur mobile.
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, ce qui est idéal pour des styles de base réinitialisables.
QCM
22
Corrigé
En CSS Grid, que permet d'accomplir la valeur 'subgrid' appliquée à grid-template-columns ?
A. Elle divise chaque cellule en quatre sous-cellules égales automatiquement.
B. Elle force l'élément enfant à définir ses propres colonnes sans lien avec le parent.
C. Elle permet à l'élément enfant d'utiliser les pistes (tracks) définies sur son parent direct.
D. Elle crée une grille indépendante du flux principal pour les éléments fixes.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le subgrid permet d'aligner parfaitement des descendants profonds sur la structure de la grille parente sans calcul manuel.
QCM
23
Corrigé
Quel sélecteur permet de cibler un élément parent uniquement s'il contient un enfant spécifique (sélecteur relationnel) ?
A. :within-child()
B. :is-parent()
C. :contains()
D. :has()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
:has() est le sélecteur relationnel qui permet enfin de styliser un élément en fonction de son contenu descendant.
QCM
24
Corrigé
Dans le modèle de boîte 'border-box', si width=300px, padding=30px et border=5px, quelle est la largeur totale de la boîte de contenu ?
A. 230px
B. 300px
C. 265px
D. 335px
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
300px (total) - 60px (padding L+R) - 10px (border L+R) = 230px. Border-box inclut padding et border dans la width.
QCM
25
Corrigé
Quelle propriété CSS permet d'optimiser le rendu en ignorant le calcul des éléments hors du viewport ?
A. content-visibility: auto
B. will-change: transform
C. render-strategy: offscreen
D. display: skip-render
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Cette propriété améliore considérablement les performances de rendu en sautant le travail de mise en page des éléments non visibles.
QCM
26
Corrigé
À quoi sert la propriété 'isolation: isolate' en CSS ?
A. À bloquer l'héritage des variables CSS vers les enfants.
B. À créer un nouveau contexte d'empilement (stacking context) sans modifier le z-index.
C. À empêcher le texte d'être sélectionné par l'utilisateur.
D. À retirer l'élément du flux normal du document pour l'isoler visuellement.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Isolate permet de confiner les mix-blend-mode et les z-index internes sans affecter le positionnement global.
QCM
27
Corrigé
L'unité 'ch' est basée sur quelle mesure typographique précise ?
A. La hauteur moyenne des lettres minuscules (x-height).
B. La largeur du caractère '0' (zéro) de la police actuelle.
C. La hauteur de la ligne de base (baseline) multipliée par deux.
D. La largeur totale du glyphe 'M' majuscule.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité ch est idéale pour limiter la largeur des paragraphes à un nombre de caractères confortable pour la lecture.
QCM
28
Corrigé
Quelle valeur de 'object-fit' conserve le ratio d'une image en remplissant le conteneur, au risque de la rogner ?
A. contain
B. fill
C. none
D. cover
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Cover redimensionne l'image pour couvrir tout le conteneur en gardant ses proportions, idéal pour les headers responsives.
QCM
29
Corrigé
À quoi sert la propriété 'scroll-margin-top' ?
A. Ajouter un padding fixe au sommet de la page pour les mobiles.
B. Définir un décalage pour qu'un élément ancré ne soit pas caché par un header fixe.
C. Ralentir la vitesse de défilement vers le haut de 20%.
D. Empêcher le scroll horizontal sur les appareils tactiles.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est la solution standard pour éviter que les barres de navigation 'sticky' ne recouvrent la cible d'un lien d'ancre.
QCM
30
Corrigé
Quel sélecteur cible un lien <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 ^= sélectionne les attributs dont la valeur commence par la chaîne de caractères spécifiée.
QCM
31
Corrigé
Que fait 'flex-basis: 0' par rapport à 'flex-basis: auto' ?
A. Il masque l'élément s'il n'y a pas assez de place dans le conteneur.
B. Il ignore la taille du contenu pour distribuer l'espace de manière égale selon flex-grow.
C. Il force l'élément à prendre 100% de la largeur du parent par défaut.
D. Il empêche l'élément de rétrécir si le conteneur est trop petit.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
En mettant la base à 0, Flexbox ne tient plus compte de la taille intrinsèque du texte pour calculer l'espace à remplir.
QCM
32
Corrigé
Quel pseudo-élément permet de styliser spécifiquement le texte sélectionné par l'utilisateur ?
A. ::text-select
B. ::highlight
C. ::selection
D. ::active-text
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
::selection permet de modifier la couleur de fond et du texte lors de la sélection active sur la page.
QCM
33
Corrigé
Quelle propriété permet d'appliquer un flou sur les éléments situés DERRIÈRE un bloc semi-transparent ?
A. filter: blur()
B. background-filter: 5px
C. backdrop-filter: blur(5px)
D. opacity-blur: true
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Backdrop-filter applique des effets graphiques à la zone située derrière l'élément, créant l'effet 'verre dépoli'.
QCM
34
Corrigé
Comment s'appelle le mécanisme où les marges verticales de deux blocs adjacents fusionnent en une seule ?
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 :
Le margin collapse fait que seule la plus grande marge entre deux éléments successifs est conservée.
QCM
35
Corrigé
Quelle est la particularité des Container Queries (@container) ?
A. Elles ne fonctionnent que sur les images de type SVG.
B. Elles adaptent le style selon la taille du parent immédiat et non du viewport global.
C. Elles sont 10x plus rapides que les Media Queries traditionnelles.
D. Elles nécessitent l'utilisation obligatoire de l'unité % uniquement.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les Container Queries permettent de créer des composants modulaires qui s'adaptent à l'espace qui leur est alloué.
QCM
36
Corrigé
Quel mot-clé de 'background-repeat' répète une image sans la couper, en ajustant l'espacement ?
A. round
B. space
C. stretch
D. fill
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La valeur 'space' répartit les répétitions de l'image uniformément pour qu'elles tiennent sans être tronquées.
QCM
37
Corrigé
En CSS, que permet de réaliser la fonction clamp(1rem, 5vw, 2rem) ?
A. Forcer le texte à rester sur une seule ligne quel que soit le zoom.
B. Définir une valeur fluide qui ne descend jamais sous 1rem et ne dépasse pas 2rem.
C. Arrondir les pixels à l'entier le plus proche pour éviter le flou.
D. Multiplier la taille de la police par la largeur de l'écran par 5.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Clamp est l'outil ultime pour la typographie fluide sans multiplier les media queries.
QCM
38
Corrigé
Quelle propriété permet de définir l'ordre de priorité d'affichage sur l'axe Z ?
A. depth-index
B. layer-order
C. z-index
D. stack-priority
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le z-index gère la superposition des éléments (nécessite une position autre que 'static').
QCM
39
Corrigé
Quel sélecteur cible tous les éléments <li> qui suivent un autre <li> à n'importe quel niveau frère ?
A. li + li
B. li || li
C. li > li
D. li ~ li
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L'opérateur '~' est le combinateur de frères généraux, ciblant tous les voisins suivants.
QCM
40
Corrigé
Que signifie précisément l'unité 'rem' ?
A. Relative Element Margin.
B. Root em : relatif à la taille de police de l'élément racine (html).
C. Real Electronic Measure.
D. Ratio Em : calculé selon la densité de pixels de l'écran.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Contrairement à 'em', 'rem' évite les problèmes d'héritage en cascade en se référant toujours à la racine.
Mots & Définitions
Consultez les définitions des termes importants.
La spécificité est une règle de priorité utilisée par le navigateur pour déterminer quel style CSS s’applique lorsqu’il y a des conflits. Elle dépend du type de sélecteur utilisé, comme les identifiants, les classes ou les balises. Plus la spécificité est élevée, plus la règle est prioritaire.
Le sélecteur d’identifiant cible un élément unique à l’aide de son attribut id. Il possède un poids élevé en CSS, ce qui lui permet souvent de l’emporter sur d’autres règles. Son usage doit rester limité pour conserver un code maintenable.
Le padding correspond à l’espace intérieur situé entre le contenu d’un élément et sa bordure. Il influence directement la lisibilité et le confort visuel. Contrairement à la marge, il fait partie de la zone cliquable de l’élément.
La balise address est utilisée pour représenter des informations de contact liées à un auteur ou à un contenu. Elle a une valeur sémantique importante pour les moteurs de recherche et l’accessibilité. Son usage améliore la structure du document HTML.
L’encodage de caractères définit la manière dont les textes sont interprétés par le navigateur. L’UTF-8 est le plus courant car il supporte de nombreuses langues et symboles. Il est généralement défini dans une balise meta.
Un script chargé de manière asynchrone s’exécute sans bloquer le chargement de la page. Cela améliore les performances et la rapidité d’affichage. Ce mécanisme est particulièrement utile pour les scripts non essentiels au rendu initial.
Le sélecteur d’attribut permet de cibler des éléments HTML en fonction de la présence ou de la valeur d’un attribut. Il offre une grande précision dans l’application des styles. C’est un outil puissant pour gérer des cas spécifiques sans ajouter de classes.
La balise main représente le contenu principal et unique d’une page web. Elle aide les lecteurs d’écran et les moteurs de recherche à identifier l’information centrale. Son utilisation renforce la sémantique du document.
La propriété font-variant permet de modifier l’apparence typographique du texte, notamment pour afficher des petites capitales. Elle agit sans changer le contenu réel du texte. Cela permet d’améliorer l’esthétique tout en conservant l’accessibilité.
L’outline est un contour visuel ajouté autour d’un élément sans affecter sa taille ou sa mise en page. Il est souvent utilisé pour l’accessibilité, par exemple lors de la navigation au clavier. Contrairement à la bordure, il ne prend pas d’espace.
La propriété clear est utilisée pour gérer le comportement des éléments flottants. Elle permet de forcer un élément à se placer sous des éléments float précédents. C’est une notion clé pour maîtriser les mises en page classiques.
Une pseudo-classe permet de cibler un élément selon son état ou sa position dans le document. Elle est couramment utilisée pour gérer les interactions utilisateur ou la structure du DOM. Cela rend les styles plus dynamiques et contextuels.
À propos de ce QCM
Cette série de QCM s’inscrit dans une démarche pédagogique visant à approfondir la compréhension des mécanismes clés du HTML et du CSS, au-delà de leur simple syntaxe.
Les notions abordées couvrent la structuration sémantique des documents, la gestion des styles, ainsi que les règles qui régissent les priorités et le comportement visuel des éléments.
Une attention particulière est portée à la spécificité CSS, concept central pour comprendre comment le navigateur arbitre les conflits entre différentes règles de style.
La maîtrise de ce principe permet d’écrire des feuilles de style plus propres, prévisibles et faciles à maintenir.
Les questions abordent également les sélecteurs avancés, les pseudo-classes et les sélecteurs d’attributs, outils indispensables pour cibler précisément les éléments sans alourdir le code HTML.
Sur le plan du HTML, l’accent est mis sur les balises sémantiques et structurelles, essentielles pour l’accessibilité, le référencement naturel et la clarté du document.
La compréhension du rôle de balises comme celles dédiées au contenu principal, aux informations de contact ou aux zones de formulaire permet de produire des pages conformes aux bonnes pratiques actuelles.
Ces QCM favorisent aussi le développement de compétences transversales : capacité d’analyse, lecture critique du code, identification des erreurs courantes et choix de solutions adaptées à un contexte donné.
Ils constituent ainsi un outil efficace d’auto-évaluation et de préparation aux examens, en aidant l’apprenant à consolider ses acquis et à gagner en assurance face aux problématiques courantes du développement web.
Conclusion
L’ensemble de ces QCM offre une approche structurée et progressive pour renforcer les bases indispensables du HTML et du CSS.
En travaillant régulièrement sur ces questions, l’apprenant développe une meilleure compréhension des mécanismes internes du navigateur et des bonnes pratiques de mise en page.
Cette démarche permet de consolider les connaissances théoriques tout en améliorant la capacité à résoudre des situations concrètes.
L’entraînement régulier favorise une montée en compétence durable, essentielle pour réussir examens, concours ou projets professionnels dans le domaine du développement web.
