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