L
e 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.
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
L
es 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
C
ette 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.
