Le développement web moderne repose sur une maîtrise solide de HTML et CSS, bien au-delà des bases visibles au premier abord.
Comprendre comment structurer correctement une page, intégrer des contenus externes, gérer les styles avancés et contrôler le comportement visuel des éléments est devenu indispensable pour tout étudiant, développeur ou candidat à un examen technique.
Les notions abordées ici touchent à la fois à la sémantique du HTML, à la précision des sélecteurs CSS, ainsi qu’aux mécanismes qui améliorent l’accessibilité, la lisibilité et l’expérience utilisateur.
On y retrouve des concepts essentiels comme la gestion des attributs, le positionnement, les effets visuels, les unités relatives et les interactions utilisateur.
Cette page a été conçue pour accompagner le lecteur de manière progressive et structurée, en l’aidant à consolider ses connaissances et à gagner en assurance face aux problématiques courantes du web front-end.
Le développement web moderne repose sur une maîtrise solide de HTML et CSS, bien au-delà des bases visibles au premier abord.
Comprendre comment structurer correctement une page, intégrer des contenus externes, gérer les styles avancés et contrôler le comportement visuel des éléments est devenu indispensable pour tout étudiant, développeur ou candidat à un examen technique.
Les notions abordées ici touchent à la fois à la sémantique du HTML, à la précision des sélecteurs CSS, ainsi qu’aux mécanismes qui améliorent l’accessibilité, la lisibilité et l’expérience utilisateur.
On y retrouve des concepts essentiels comme la gestion des attributs, le positionnement, les effets visuels, les unités relatives et les interactions utilisateur.
Cette page a été conçue pour accompagner le lecteur de manière progressive et structurée, en l’aidant à consolider ses connaissances et à gagner en assurance face aux problématiques courantes du web front-end.
QCM
1
Corrigé
Quel sélecteur cible tous les liens <a> dont l'attribut 'href' commence 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 :
Le symbole '^=' signifie 'commence par' dans les sélecteurs d'attributs CSS.
QCM
2
Corrigé
Quelle fonction CSS permet de choisir la plus grande valeur parmi une liste de choix ?
A. highest()
B. calc-max()
C. max()
D. limit()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La fonction max() est très utile pour créer des designs fluides avec des limites minimales.
QCM
3
Corrigé
Quelle propriété CSS permet d'appliquer un effet de flou (blur) à l'arrière-plan d'un élément ?
A. filter
B. backdrop-filter
C. background-blur
D. opacity-blur
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'backdrop-filter' applique des effets graphiques à la zone située derrière l'élément (effet verre dépoli).
QCM
4
Corrigé
En HTML, quelle balise est utilisée pour définir une barre de progression ?
A. <bar>
B. <loading>
C. <meter>
D. <progress>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
La balise <progress> permet d'afficher l'état d'avancement d'une tâche.
QCM
5
Corrigé
Quelle propriété CSS définit l'espacement entre les lignes d'une grille (Grid) ?
A. row-gap
B. line-spacing
C. grid-padding
D. margin-bottom
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'row-gap' crée de l'espace horizontal entre les rangées de la grille.
QCM
6
Corrigé
Que fait la propriété 'object-fit: cover;' pour une image ?
A. Elle étire l'image pour remplir le cadre
B. Elle conserve le ratio et remplit le cadre en rognant si besoin
C. Elle affiche l'image en entier sans la déformer
D. Elle met l'image en noir et blanc
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'cover' assure que le conteneur est rempli tout en préservant les proportions de l'image.
QCM
7
Corrigé
Quelle balise HTML est utilisée pour intégrer un document externe (comme une carte Google Maps) ?
A. <embed>
B. <object>
C. <iframe>
D. <frame>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'élément <iframe> (inline frame) permet d'inclure une autre page HTML dans la page actuelle.
QCM
8
Corrigé
Quel sélecteur cible les éléments qui sont actuellement cochés (checkbox ou radio) ?
A. :active
B. :selected
C. :checked
D. :on
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La pseudo-classe ':checked' permet de styliser les éléments de formulaire sélectionnés.
QCM
9
Corrigé
Quelle propriété CSS permet de changer l'ordre de lecture des mots (ex: de droite à gauche) ?
A. text-align
B. direction
C. writing-mode
D. text-orientation
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La propriété 'direction: rtl;' est utilisée pour les langues comme l'arabe ou l'hébreu.
QCM
10
Corrigé
Quelle balise HTML5 est utilisée pour spécifier des termes techniques et leurs définitions ?
A. <dfn>
B. <code>
C. <kbd>
D. <samp>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
<dfn> (definition) marque le terme que l'on est en train de définir dans une phrase.
QCM
11
Corrigé
Quelle propriété CSS permet d'ajouter un contour (outline) sans modifier la taille du bloc ?
A. border
B. box-shadow
C. outline
D. stroke
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Contrairement à 'border', 'outline' est dessiné à l'extérieur de l'élément et ne prend pas de place.
QCM
12
Corrigé
Que signifie l'unité CSS 'ch' ?
A. La hauteur du conteneur
B. La largeur du caractère '0' de la police actuelle
C. La moitié de la taille de police
D. Le changement d'échelle
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'ch' est une unité relative basée sur la largeur du chiffre zéro, utile pour limiter la largeur des textes.
QCM
13
Corrigé
Quel attribut HTML est utilisé pour fournir un identifiant unique à un élément ?
A. class
B. id
C. name
D. key
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'identifiant 'id' doit être unique au sein d'une même page HTML.
QCM
14
Corrigé
Quelle propriété CSS permet de transformer un élément en bouton cliquable (visuellement) ?
A. cursor: pointer;
B. mouse: click;
C. event: button;
D. action: active;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Changer le curseur en main (pointer) indique à l'utilisateur que l'élément est interactif.
QCM
15
Corrigé
Quel est l'équivalent CSS moderne pour centrer un élément horizontalement et verticalement ?
A. align: center;
B. display: flex; margin: auto;
C. display: grid; place-items: center;
D. vertical-align: middle;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'place-items: center' en mode Grid est la méthode la plus courte pour un centrage parfait.
QCM
16
Corrigé
Quelle balise HTML est utilisée pour afficher le résultat d'un calcul ou d'une action ?
A. <result>
B. <output>
C. <sum>
D. <calc>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La balise <output> représente le résultat d'un calcul effectué par un script.
QCM
17
Corrigé
Quelle propriété CSS permet de contrôler la fluidité d'une animation ?
A. animation-timing-function
B. animation-speed
C. transition-flow
D. animation-curve
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Elle utilise des courbes de Bézier (ease, linear, etc.) pour définir l'accélération de l'animation.
QCM
18
Corrigé
En CSS, que fait 'overflow-y: hidden;' ?
A. Il cache le contenu qui dépasse horizontalement
B. Il cache le contenu qui dépasse verticalement
C. Il supprime tout l'élément
D. Il empêche le clic sur l'élément
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'overflow-y' cible uniquement le comportement de débordement sur l'axe vertical.
QCM
19
Corrigé
Quel sélecteur cible le dernier élément d'un type spécifique parmi ses frères ?
A. :last-child
B. :end-type
C. :last-of-type
D. :final-of-type
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
':last-of-type' cible le dernier élément d'un certain tag, même s'il y a d'autres types d'éléments après.
QCM
20
Corrigé
Quelle propriété CSS définit l'espace entre les cellules d'un tableau (si non fusionnées) ?
A. cell-spacing
B. border-spacing
C. table-padding
D. gap
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'border-spacing' définit la distance entre les bordures des cellules adjacentes.
QCM
21
Corrigé
Quelle propriété CSS permet de créer un contexte de formatage de bloc (BFC) sans modifier l'apparence visuelle, à l'exception du débordement ?
A. display: inline-block
B. float: left
C. display: flow-root
D. overflow: visible
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La valeur 'flow-root' est la solution moderne pour créer un BFC sans les effets secondaires des anciennes méthodes comme 'overflow: hidden'.
QCM
22
Corrigé
En CSS Grid, quelle est la différence majeure entre 'auto-fill' et 'auto-fit' lorsqu'il y a peu d'éléments dans une ligne ?
A. 'auto-fill' laisse des colonnes vides à la fin, tandis que 'auto-fit' étire les éléments existants pour occuper tout l'espace.
B. 'auto-fit' laisse des colonnes vides, alors que 'auto-fill' réduit la taille des colonnes au minimum.
C. Il n'y a aucune différence si l'unité 'fr' est utilisée.
D. 'auto-fill' force le passage à la ligne tandis que 'auto-fit' interdit le wrapping.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'auto-fit' réduit les pistes (tracks) vides à 0, permettant aux éléments présents de s'étaler sur toute la largeur de la grille.
QCM
23
Corrigé
Quel sélecteur permet de cibler un élément <p> uniquement s'il est précédé immédiatement par un élément <h2> ?
A. h2 ~ p
B. h2 + p
C. h2 > p
D. p < h2
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le combinateur '+' est le sélecteur d'adjacence directe, ciblant le voisin immédiat.
QCM
24
Corrigé
Dans le modèle de boîte (box-sizing: border-box), si width=200px, padding=20px et border=5px, quelle est la largeur totale occupée par l'élément ?
A. 250px
B. 225px
C. 245px
D. 200px
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Avec 'border-box', le padding et la bordure sont inclus dans la largeur définie de 200px.
QCM
25
Corrigé
Quelle est la spécificité du sélecteur suivant : #nav .item:hover ?
A. 0, 1, 1, 1
B. 0, 1, 2, 0
C. 0, 1, 0, 2
D. 1, 1, 1, 0
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La spécificité est de 110 (1 ID, 1 classe, 1 pseudo-classe), souvent notée (0,1,2,0).
QCM
26
Corrigé
Quelle propriété CSS est utilisée pour optimiser les performances de rendu en indiquant au navigateur quels éléments vont changer ?
A. will-change
B. transform-style
C. contain
D. backface-visibility
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'will-change' permet de demander au navigateur d'anticiper les modifications (souvent en créant une couche GPU).
QCM
27
Corrigé
En CSS Flexible Box, quelle propriété permet de définir la taille initiale d'un élément avant que l'espace libre ne soit distribué ?
A. flex-grow
B. flex-shrink
C. flex-basis
D. flex-initial
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'flex-basis' définit la base de calcul de la taille avant l'application des facteurs d'agrandissement ou de réduction.
QCM
28
Corrigé
L'attribut 'srcset' dans une balise <img> sert principalement à :
A. Définir une image de remplacement en cas d'erreur.
B. Appliquer des filtres CSS directement sur l'image.
C. Forcer le téléchargement de toutes les résolutions disponibles.
D. Proposer différentes résolutions d'image pour l'affichage responsive.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Il permet au navigateur de choisir l'image la plus adaptée à la densité de pixels de l'écran et à la largeur du viewport.
QCM
29
Corrigé
Quelle valeur de la propriété 'position' permet de maintenir un élément fixe par rapport à son parent possédant un overflow, et non par rapport au viewport ?
A. absolute
B. fixed
C. sticky
D. relative
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'sticky' positionne l'élément selon le défilement (scroll) dans son plus proche ancêtre possédant un mécanisme de défilement.
QCM
30
Corrigé
Que signifie l'unité 'ch' en CSS ?
A. La hauteur de la ligne de texte (line-height).
B. La largeur du caractère '0' de la police actuelle.
C. Un dixième de la largeur du conteneur parent.
D. La hauteur moyenne des lettres minuscules (x-height).
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité 'ch' est basée sur la largeur du glyphe '0', ce qui est très utile pour limiter la largeur des colonnes de texte de façon typographique.
QCM
31
Corrigé
Quel sélecteur CSS permet de cibler un élément qui ne correspond pas à une liste d'arguments spécifique ?
A. :is()
B. :where()
C. :not()
D. :has()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La pseudo-classe ':not()' exclut les éléments correspondant aux sélecteurs passés en paramètre.
QCM
32
Corrigé
Quelle est la principale différence de spécificité entre les pseudo-classes :is() et :where() ?
A. :is() a toujours une spécificité nulle, contrairement à :where().
B. :where() a toujours une spécificité nulle (0,0,0), peu importe son contenu.
C. :is() prend la spécificité de son argument le plus faible.
D. Les deux partagent exactement la même règle de spécificité cumulative.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
':where()' permet de réduire la spécificité à zéro, facilitant les surcharges ultérieures dans une feuille de style.
QCM
33
Corrigé
En CSS Grid, quelle fonction permet de limiter la taille d'une piste entre une valeur minimale et une valeur maximale ?
A. clamp()
B. calc()
C. fit-content()
D. minmax()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
'minmax(min, max)' définit une plage de taille flexible pour les colonnes ou les lignes d'une grille.
QCM
34
Corrigé
Laquelle de ces propriétés permet de créer une isolation pour le mélange de couches (stacking context) sans utiliser de z-index ?
A. isolation: isolate
B. mix-blend-mode: normal
C. display: contents
D. position: relative
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'isolation: isolate' force la création d'un nouveau contexte d'empilement pour les effets de mélange (blending).
QCM
35
Corrigé
Que se passe-t-il si vous appliquez 'aspect-ratio: 16 / 9' à un élément dont la largeur et la hauteur sont déjà explicitement définies ?
A. L'aspect-ratio est prioritaire sur la hauteur.
B. La largeur et la hauteur explicites ignorent l'aspect-ratio.
C. Le navigateur calcule une moyenne des deux dimensions.
D. L'élément est masqué car il y a un conflit de rendu.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Si les deux dimensions sont 'auto', le ratio s'applique. Si elles sont définies, elles l'emportent sur 'aspect-ratio'.
QCM
36
Corrigé
Quel mot-clé de 'object-fit' permet de conserver le ratio d'une image tout en remplissant entièrement son conteneur, quitte à être rognée ?
A. contain
B. cover
C. fill
D. none
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'cover' redimensionne l'image pour couvrir toute la surface sans déformation, en découpant les bords si nécessaire.
QCM
37
Corrigé
En utilisant les CSS Variables (Custom Properties), quelle est la syntaxe correcte pour définir une valeur de secours (fallback) ?
A. var(--main-color, #000)
B. var(--main-color | #000)
C. var(--main-color fallback #000)
D. var(--main-color: #000)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
La fonction 'var()' accepte un deuxième argument optionnel utilisé si la variable n'est pas définie.
QCM
38
Corrigé
Quel est l'effet de la propriété 'pointer-events: none' sur un élément HTML ?
A. Le curseur de la souris devient invisible.
B. L'élément devient flou lors du survol.
C. L'élément ne répond plus aux clics et les laisse passer aux éléments inférieurs.
D. L'élément est supprimé de l'arbre d'accessibilité.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'pointer-events: none' rend l'élément 'transparent' aux interactions de la souris (clics, survol).
QCM
39
Corrigé
Quel sélecteur permet de cibler un parent en fonction de l'état de ses enfants (le 'sélecteur de parent') ?
A. :is()
B. :where()
C. :parent
D. :has()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
La pseudo-classe ':has()' permet de styliser un élément s'il contient certains descendants ou s'il est suivi par certains éléments.
QCM
40
Corrigé
Quelle propriété CSS permet de contrôler la manière dont les espaces blancs sont gérés à l'intérieur d'un élément ?
A. white-space
B. word-spacing
C. text-indent
D. letter-spacing
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'white-space' définit si le texte doit être wrappé ou si les espaces consécutifs doivent être conservés.
Mots & Définitions
Consultez les définitions des termes importants.
Un sélecteur d’attribut permet de cibler des éléments HTML selon la valeur de l’un de leurs attributs. Il est très utile pour appliquer des styles conditionnels, par exemple selon le type de lien ou de ressource. Cela rend le CSS plus précis et plus flexible.
Une fonction CSS permet d’effectuer des calculs ou des choix dynamiques directement dans une feuille de style. Elle aide à adapter les valeurs en fonction du contexte d’affichage. Les fonctions rendent les styles plus intelligents et réactifs.
Backdrop-filter est une propriété CSS qui applique des effets visuels à l’arrière-plan d’un élément. Elle est souvent utilisée pour créer des effets de flou ou de transparence modernes. Elle améliore l’esthétique des interfaces.
Une barre de progression sert à indiquer visuellement l’avancement d’une tâche. Elle informe l’utilisateur de l’état d’un chargement ou d’un calcul. C’est un élément clé pour l’expérience utilisateur.
Le Grid Layout est un système de mise en page CSS basé sur des lignes et des colonnes. Il permet de créer des structures complexes de façon claire et organisée. Il est très utilisé pour les interfaces modernes et responsives.
Object-fit contrôle la manière dont une image ou une vidéo s’adapte à son conteneur. Il permet de conserver les proportions tout en remplissant l’espace disponible. C’est essentiel pour des médias responsives.
Un iframe permet d’intégrer un contenu externe dans une page web. Il est souvent utilisé pour afficher des cartes, vidéos ou services tiers. Il facilite l’intégration sans modifier la page principale.
Une pseudo-classe permet de cibler un élément selon son état ou son comportement. Elle est utilisée pour gérer les interactions utilisateur comme les clics ou les sélections. Elle rend les interfaces plus dynamiques.
La direction du texte définit le sens de lecture du contenu. Elle est essentielle pour la prise en charge de langues s’écrivant de droite à gauche. Elle garantit une bonne lisibilité internationale.
Outline est une propriété CSS qui ajoute un contour autour d’un élément sans modifier sa taille. Elle est souvent utilisée pour améliorer l’accessibilité et la navigation clavier. Elle n’affecte pas la mise en page.
L’unité ch correspond à la largeur du caractère zéro de la police courante. Elle est utile pour contrôler précisément la largeur des champs de texte. Elle améliore la cohérence typographique.
Un identifiant HTML permet de cibler un élément de manière unique dans une page. Il est utilisé pour le style, les scripts ou la navigation interne. Il garantit une référence précise et non ambiguë.
Une animation CSS permet de faire évoluer progressivement des propriétés visuelles. Elle améliore l’interactivité et la fluidité des interfaces. Une bonne animation renforce l’expérience utilisateur.
La propriété overflow contrôle l’affichage du contenu qui dépasse d’un conteneur. Elle permet de masquer, afficher ou faire défiler ce contenu. Elle est essentielle pour gérer les espaces limités.
Border-spacing définit l’espace entre les cellules d’un tableau lorsque les bordures ne sont pas fusionnées. Elle améliore la lisibilité des tableaux. Son usage influence directement la présentation des données.
À propos de ce QCM
Les thèmes abordés dans ces QCM couvrent les fondamentaux avancés du développement web côté client.
Le HTML y est étudié comme un langage de structure sémantique, permettant d’organiser le contenu de façon claire, accessible et logique.
Les balises adaptées à la navigation, aux formulaires, aux médias et aux contenus externes jouent un rôle central dans la compréhension globale d’une page web.
Du côté du CSS, l’accent est mis sur la maîtrise fine de la mise en forme.
Les sélecteurs avancés, les pseudo-classes et pseudo-éléments permettent de cibler précisément les éléments selon leur état ou leur contexte.
Les propriétés liées au positionnement, à l’empilement, aux dimensions et aux espacements offrent un contrôle précis de l’interface, indispensable pour créer des layouts professionnels.
Une attention particulière est portée aux unités relatives, aux systèmes de mise en page modernes comme Flexbox et Grid, ainsi qu’aux effets visuels tels que les ombres, les transitions et les filtres.
Ces notions sont essentielles pour concevoir des interfaces responsives, élégantes et adaptées à tous les écrans.
Travailler ces QCM permet de développer plusieurs compétences clés : analyser un code existant, comprendre l’impact d’une propriété CSS, choisir la balise HTML la plus pertinente et anticiper le rendu final d’une page.
C’est également un excellent moyen d’auto-évaluer son niveau, de corriger ses lacunes et de se préparer efficacement aux examens, concours ou entretiens techniques liés au web.
Conclusion
Cette série de QCM constitue un outil pédagogique complet pour renforcer ses compétences en HTML et CSS.
Elle permet de consolider les bases tout en abordant des notions plus avancées, indispensables dans un contexte professionnel ou académique.
En s’entraînant régulièrement, le lecteur développe une meilleure compréhension des mécanismes du web et gagne en rigueur technique.
La progression passe par la pratique et l’analyse, et ces QCM offrent un cadre idéal pour avancer pas à pas.
Ils participent à construire des fondations solides, durables et directement applicables dans des projets réels.
