Le développement web repose sur une bonne maîtrise des langages fondamentaux que sont HTML et CSS.
Ces deux technologies constituent la base de toute interface web moderne, qu’il s’agisse d’un simple site vitrine ou d’une application plus avancée.
HTML permet de structurer le contenu de manière claire et logique, tandis que CSS se charge de la présentation visuelle et de l’organisation des éléments à l’écran.
Les QCM proposés s’inscrivent pleinement dans cette logique d’apprentissage progressif.
Ils abordent les notions essentielles liées à la structuration sémantique des pages, à la mise en forme du texte, à la gestion des images, ainsi qu’aux mécanismes de mise en page responsive.
Ce type d’entraînement est particulièrement utile pour les étudiants, les candidats à des examens techniques ou toute personne souhaitant consolider ses bases en intégration web.
L’objectif est d’acquérir des réflexes solides et une compréhension durable des concepts clés utilisés quotidiennement par les développeurs front-end.
Le développement web repose sur une bonne maîtrise des langages fondamentaux que sont HTML et CSS.
Ces deux technologies constituent la base de toute interface web moderne, qu’il s’agisse d’un simple site vitrine ou d’une application plus avancée.
HTML permet de structurer le contenu de manière claire et logique, tandis que CSS se charge de la présentation visuelle et de l’organisation des éléments à l’écran.
Les QCM proposés s’inscrivent pleinement dans cette logique d’apprentissage progressif.
Ils abordent les notions essentielles liées à la structuration sémantique des pages, à la mise en forme du texte, à la gestion des images, ainsi qu’aux mécanismes de mise en page responsive.
Ce type d’entraînement est particulièrement utile pour les étudiants, les candidats à des examens techniques ou toute personne souhaitant consolider ses bases en intégration web.
L’objectif est d’acquérir des réflexes solides et une compréhension durable des concepts clés utilisés quotidiennement par les développeurs front-end.
QCM
1
Corrigé
Quelle balise HTML5 est la plus appropriée pour un article de blog ou une actualité ?
A. <section>
B. <div>
C. <article>
D. <content>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<article> définit un contenu autonome qui peut être distribué indépendamment du reste du site.
QCM
2
Corrigé
Quelle propriété CSS définit l'espace entre les colonnes d'une grille (Grid) ?
A. grid-spacing
B. column-gap
C. grid-margin
D. cell-padding
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'column-gap' (ou 'grid-column-gap') définit spécifiquement l'espace entre les colonnes.
QCM
3
Corrigé
Quel attribut HTML permet de suggérer une valeur dans un champ texte sans l'imposer ?
A. value
B. placeholder
C. hint
D. title
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le 'placeholder' affiche un texte gris qui disparaît dès que l'utilisateur commence à écrire.
QCM
4
Corrigé
Comment sélectionner tous les éléments 'div' qui ont une classe 'box' ?
A. div #box
B. div.box
C. div > box
D. div + box
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'absence d'espace entre le nom de la balise et le point indique que l'élément doit avoir les deux.
QCM
5
Corrigé
Quelle valeur de 'display' transforme un élément en conteneur de grille ?
A. display: table;
B. display: block-grid;
C. display: grid;
D. display: matrix;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'display: grid' active le module CSS Grid Layout sur l'élément sélectionné.
QCM
6
Corrigé
Quelle balise HTML est utilisée pour afficher du code informatique ?
A. <pre>
B. <var>
C. <code>
D. <kbd>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La balise <code> est sémantiquement destinée à marquer des fragments de code.
QCM
7
Corrigé
Quelle règle CSS est utilisée pour appliquer des styles selon la taille de l'écran ?
A. @responsive
B. @screen
C. @media
D. @device
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Les 'media queries' (@media) permettent d'adapter le design aux différents supports (mobile, desktop).
QCM
8
Corrigé
Quel type d'input HTML5 est utilisé pour choisir une couleur ?
A. <input type='palette'>
B. <input type='color'>
C. <input type='rgb'>
D. <input type='hex'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'input 'color' ouvre un sélecteur de couleur natif du système d'exploitation.
QCM
9
Corrigé
Quelle propriété CSS permet de rendre une image responsive (ne dépasse pas son parent) ?
A. width: auto;
B. max-width: 100%;
C. min-width: 100%;
D. image-size: contain;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'max-width: 100%' empêche l'image d'être plus large que son conteneur tout en gardant ses proportions.
QCM
10
Corrigé
Quelle balise HTML5 définit un contenu tangent ou une barre latérale ?
A. <sidebar>
B. <aside>
C. <related>
D. <margin>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<aside> est utilisé pour les contenus indirectement liés au contenu principal (widgets, pubs, etc.).
QCM
11
Corrigé
En CSS, que fait 'font-weight: bold;' ?
A. Il agrandit la police
B. Il met le texte en italique
C. Il met le texte en gras
D. Il souligne le texte
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'font-weight' gère l'épaisseur (la graisse) des caractères.
QCM
12
Corrigé
Quel attribut HTML rend un champ de formulaire obligatoire ?
A. validate='true'
B. needed
C. required
D. must
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'attribut booléen 'required' empêche l'envoi du formulaire si le champ est vide.
QCM
13
Corrigé
Quelle propriété CSS permet d'ajouter une ombre portée à un texte ?
A. box-shadow
B. shadow-text
C. text-shadow
D. font-shadow
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'text-shadow' définit l'ombre des lettres, contrairement à 'box-shadow' qui agit sur le bloc.
QCM
14
Corrigé
Quelle balise HTML est utilisée pour dessiner des graphiques via JavaScript ?
A. <paint>
B. <draw>
C. <canvas>
D. <svg>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<canvas> crée une zone de dessin bitmap manipulable par des scripts.
QCM
15
Corrigé
Quelle propriété CSS contrôle la répétition d'une image d'arrière-plan ?
A. background-copy
B. background-repeat
C. image-repeat
D. repeat-style
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'background-repeat' permet de répéter l'image en X, Y, les deux, ou pas du tout (no-repeat).
QCM
16
Corrigé
Quelle est l'utilité de la balise <label> ?
A. Créer un titre de page
B. Afficher une info-bulle
C. Lier un texte explicatif à un champ de formulaire
D. Définir une catégorie CSS
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<label> améliore l'ergonomie : cliquer sur le texte active le champ associé.
QCM
17
Corrigé
Quelle propriété CSS change la transparence d'un élément ?
A. transparency
B. filter: alpha;
C. opacity
D. visible-level
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'opacity' prend une valeur entre 0 (invisible) et 1 (opaque).
QCM
18
Corrigé
Quel sélecteur CSS cible les liens sur lesquels on a déjà cliqué ?
A. a:active
B. a:focus
C. a:visited
D. a:link
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La pseudo-classe ':visited' permet de styliser les liens présents dans l'historique du navigateur.
QCM
19
Corrigé
En HTML, comment regrouper plusieurs options dans une liste déroulante ?
A. <fieldset>
B. <optgroup>
C. <group>
D. <category>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<optgroup> crée des sous-titres non cliquables au sein d'un menu <select>.
QCM
20
Corrigé
Quelle propriété CSS permet de forcer le passage à la ligne d'un long mot ?
A. overflow-wrap
B. text-break
C. line-break
D. word-style
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'overflow-wrap: break-word;' permet de casser les chaînes de caractères trop longues.
QCM
21
Corrigé
Quelle est la fonction de la propriété 'text-rendering' en CSS ?
A. Modifier la police de caractères.
B. Améliorer l'apparence du texte en privilégiant la vitesse, la lisibilité ou la précision des ligatures.
C. Convertir un texte en image vectorielle.
D. Ajouter un effet d'ombre portée sur chaque lettre.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elle permet au moteur de rendu du navigateur d'optimiser le texte (ex: 'optimizeLegibility') pour un meilleur affichage des polices complexes.
QCM
22
Corrigé
En CSS Grid, que permet de réaliser la fonction 'repeat(auto-fit, minmax(200px, 1fr))' ?
A. Créer exactement 200 colonnes de 1px.
B. Générer un nombre variable de colonnes qui s'étirent pour remplir tout l'espace disponible.
C. Forcer les colonnes à déborder du conteneur parent.
D. Fixer la hauteur des lignes à 200px.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'auto-fit' réduit les colonnes vides à zéro et étire les colonnes remplies pour occuper l'espace restant dans la grille.
QCM
23
Corrigé
Quelle propriété permet de définir l'espacement entre les cellules d'un tableau (lorsque border-collapse est à separate) ?
A. cell-padding
B. grid-gap
C. border-spacing
D. margin-table
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'border-spacing' contrôle l'espace entre les bordures des cellules adjacentes dans un tableau classique.
QCM
24
Corrigé
À quoi sert la propriété 'overscroll-behavior' ?
A. À définir la couleur de la barre de défilement.
B. À empêcher le défilement de la page parente lorsque l'on atteint la fin d'un scroll sur un élément enfant (modal/sidebar).
C. À accélérer la vitesse de scroll avec la souris.
D. À masquer le contenu qui dépasse du viewport.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La valeur 'contain' ou 'none' évite le phénomène de 'scroll chaining' où le parent se met à défiler une fois l'enfant arrivé au bout.
QCM
25
Corrigé
Quel sélecteur cible un élément <li> qui est le seul enfant de son parent ?
A. li:only-child
B. li:first-child
C. li:unique
D. li:single
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
':only-child' ne sélectionne l'élément que s'il n'a absolument aucun frère ou sœur dans son conteneur parent.
QCM
26
Corrigé
Quelle est la valeur par défaut de la propriété 'background-origin' ?
A. border-box
B. content-box
C. padding-box
D. margin-box
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Par défaut, l'image de fond commence au bord intérieur de la bordure (padding-box).
QCM
27
Corrigé
Quel sélecteur permet de cibler un élément <input> dont la valeur est invalide selon ses contraintes HTML5 (ex: type='email') ?
A. :error
B. :invalid
C. :wrong
D. :not-valid
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La pseudo-classe ':invalid' est activée dès que le contenu du champ ne respecte pas les attributs de validation (pattern, type, etc.).
QCM
28
Corrigé
Que fait la propriété 'shape-outside' ?
A. Elle change la forme géométrique d'un bouton.
B. Elle permet au texte de s'écouler autour d'une forme complexe (cercle, polygone) au lieu d'un rectangle.
C. Elle définit le masque de découpe d'une image.
D. Elle modifie l'ombre extérieure d'un bloc.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'shape-outside' est utilisée avec les flottants pour créer des mises en page organiques où le texte suit les contours d'une image.
QCM
29
Corrigé
Quelle propriété permet de contrôler si un élément est visible ou non lors d'une rotation à 180° (en 3D) ?
A. perspective
B. transform-style
C. backface-visibility
D. rotate-mode
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'backface-visibility: hidden' permet de masquer la face arrière d'un élément, essentiel pour les effets de cartes que l'on retourne.
QCM
30
Corrigé
En Flexbox, que fait 'flex-grow: 2' par rapport à 'flex-grow: 1' ?
A. L'élément sera deux fois plus grand que l'autre.
B. L'élément récupérera deux fois plus d'espace libre que celui ayant un ratio de 1.
C. L'élément aura une marge interne double.
D. L'élément sera placé deux positions plus loin.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'flex-grow' définit la répartition de l'espace positif résiduel entre les différents éléments flex.
QCM
31
Corrigé
Quel sélecteur cible un élément <div> uniquement s'il possède l'attribut 'data-role' ?
A. div[data-role]
B. div.data-role
C. div(data-role)
D. div::data-role
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Les crochets '[]' sont utilisés pour cibler la présence ou la valeur d'un attribut HTML.
QCM
32
Corrigé
À quoi sert la propriété 'tab-size' en CSS ?
A. À définir la taille des onglets dans un navigateur.
B. À spécifier la largeur visuelle du caractère de tabulation (Tab) dans un bloc de texte ou de code.
C. À limiter le nombre de caractères par ligne.
D. À modifier l'ordre du focus clavier.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Souvent utilisée dans les balises <pre> ou <code>, elle permet d'ajuster l'indentation du code affiché.
QCM
33
Corrigé
Quelle propriété permet de rendre le redimensionnement d'une image 'pixelisé' plutôt que 'lisse' ?
A. image-smoothing: off
B. filter: blur(0)
C. image-rendering: pixelated
D. object-fit: sharp
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Utile pour le pixel art ou les QR codes, cela évite l'interpolation floue effectuée par défaut par les navigateurs.
QCM
34
Corrigé
Quelle est la particularité du sélecteur ':root' ?
A. Il cible l'élément <body>.
B. Il cible l'élément le plus haut dans l'arbre (généralement <html>) et a une spécificité plus élevée que le sélecteur de balise.
C. Il permet de réinitialiser tous les styles du site.
D. Il cible les éléments sans ID ni classe.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
':root' est conventionnellement utilisé pour déclarer les variables CSS globales car il a une priorité plus forte que le sélecteur 'html'.
QCM
35
Corrigé
Que signifie la valeur 'nowrap' pour la propriété 'flex-wrap' ?
A. Les éléments flex ne peuvent pas déborder.
B. Les éléments flex sont forcés de rester sur une seule ligne, quitte à déborder du conteneur.
C. Le texte à l'intérieur des éléments ne revient pas à la ligne.
D. Les éléments sont affichés verticalement.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'nowrap' est la valeur par défaut ; elle empêche les éléments flex de passer à la ligne suivante.
QCM
36
Corrigé
Comment s'appelle l'espace entre le contenu d'un élément et sa bordure ?
A. Margin
B. Border
C. Padding
D. Gap
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le padding est l'espace intérieur d'un élément, situé entre le contenu et la bordure.
QCM
37
Corrigé
Quelle propriété permet d'ajouter un effet de flou sur l'ensemble d'un élément ?
A. blur: 5px
B. filter: blur(5px)
C. opacity: 0.5
D. backdrop-filter: blur(5px)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La fonction 'blur()' appartient à la propriété 'filter', qui gère divers effets visuels (contraste, gris, etc.).
QCM
38
Corrigé
Quel est le rôle de 'z-index' ?
A. Définir la position horizontale d'un élément.
B. Gérer l'ordre d'empilement des éléments sur l'axe de la profondeur (devant ou derrière).
C. Ajuster le niveau de zoom d'une page.
D. Définir la transparence de la bordure.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Un 'z-index' élevé place l'élément au-dessus de ceux ayant un index plus bas (nécessite une position non statique).
QCM
39
Corrigé
Quelle propriété définit la couleur de la bordure ?
A. border-style
B. color
C. border-color
D. outline-color
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'border-color' permet de définir la couleur des quatre bordures ou de chacune individuellement.
QCM
40
Corrigé
Que permet la pseudo-classe ':active' ?
A. Cibler un élément qui est en cours de chargement.
B. Styliser un élément au moment précis où l'utilisateur clique dessus (pression du bouton).
C. Cibler l'élément sélectionné dans un menu.
D. Activer les animations CSS.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
':active' représente l'état d'un élément pendant l'interaction de clic, avant que le bouton ne soit relâché.
Mots & Définitions
Consultez les définitions des termes importants.
Une balise sémantique décrit clairement le rôle du contenu qu’elle contient. Elle améliore la lisibilité du code, l’accessibilité et le référencement. Des exemples courants sont utilisés pour structurer logiquement une page web.
Un article représente un contenu autonome et indépendant, comme un billet de blog ou une actualité. Il peut être lu, partagé ou réutilisé séparément du reste de la page. Son usage renforce la structure sémantique du document.
CSS Grid est un système de mise en page bidimensionnel basé sur des lignes et des colonnes. Il permet d’organiser facilement des blocs complexes sur une page. Il offre un contrôle précis de l’alignement et de l’espacement.
Les media queries permettent d’adapter l’affichage d’un site selon la taille ou les caractéristiques de l’écran. Elles sont essentielles pour le design responsive. Elles rendent les interfaces utilisables sur tous les appareils.
Un sélecteur CSS permet de cibler un ou plusieurs éléments HTML afin de leur appliquer des styles. Il peut se baser sur le type d’élément, une classe, un identifiant ou une relation entre éléments. C’est la base du fonctionnement du CSS.
Le placeholder affiche un texte indicatif dans un champ de formulaire. Il guide l’utilisateur sur le type de donnée attendu sans imposer de valeur. Ce texte disparaît dès que l’utilisateur commence à saisir.
La valeur grid de la propriété display transforme un élément en conteneur de grille. Les éléments enfants peuvent alors être placés selon des lignes et des colonnes. Cette technique simplifie les mises en page complexes.
Une image responsive s’adapte automatiquement à la taille de son conteneur. Elle évite les débordements et améliore l’affichage sur mobile. Cette pratique est essentielle pour un design moderne.
L’élément aside contient des informations complémentaires liées au contenu principal. Il est souvent utilisé pour des barres latérales ou des encadrés. Son rôle est informatif mais secondaire.
Un formulaire permet de collecter des données saisies par l’utilisateur. Il regroupe différents champs et éléments interactifs. Sa bonne structuration améliore l’ergonomie et l’accessibilité.
L’ombre portée sur le texte améliore la lisibilité ou l’aspect visuel d’un contenu. Elle permet de créer des effets graphiques simples sans image. Son usage doit rester modéré pour conserver la clarté.
Cette propriété gère le comportement des mots trop longs dans un texte. Elle permet de forcer un retour à la ligne afin d’éviter les débordements. Elle est particulièrement utile dans les mises en page responsives.
À propos de ce QCM
Ces QCM couvrent les piliers indispensables du développement web côté client.
Du côté HTML, l’accent est mis sur la compréhension des balises fondamentales, qu’elles soient structurelles, sémantiques ou liées aux formulaires.
Savoir choisir la bonne balise permet de donner du sens au contenu, d’améliorer l’accessibilité et de faciliter le référencement naturel.
La gestion des attributs, comme ceux liés aux liens, aux champs de saisie ou aux médias, joue également un rôle central dans la création de pages fonctionnelles et cohérentes.
En CSS, les questions explorent les mécanismes essentiels de mise en forme et de mise en page.
Les notions de sélecteurs, de propriétés visuelles, de gestion des espacements et des dimensions sont abordées de manière progressive.
Une attention particulière est portée aux techniques modernes telles que Flexbox et Grid, qui permettent d’organiser les éléments avec précision et souplesse.
Les concepts de responsive design, notamment l’adaptation aux différentes tailles d’écran, occupent aussi une place importante.
Grâce à cet ensemble de questions, l’apprenant développe plusieurs compétences clés : une meilleure compréhension théorique des standards du web, la capacité à analyser un code existant, et l’aptitude à appliquer les bonnes pratiques dans des situations concrètes.
Ce travail favorise également l’auto-évaluation, en permettant d’identifier les notions maîtrisées et celles à approfondir, tout en constituant une préparation efficace aux examens, concours ou entretiens techniques liés au développement web.
Conclusion
Ces QCM constituent un outil pédagogique complet pour renforcer ses connaissances en HTML et CSS.
Ils permettent d’aborder de manière structurée les concepts essentiels, tout en développant une logique de raisonnement propre au développement web.
En s’entraînant régulièrement, l’utilisateur consolide ses acquis, gagne en confiance et améliore sa capacité à concevoir des interfaces claires, fonctionnelles et adaptées aux standards actuels.
Cette progression continue est un atout majeur pour réussir ses évaluations, mais aussi pour évoluer sereinement dans les métiers du web et du numérique.
