QCMUP.COM

Liste QCM HTML/CSS Corrigé – Partie 7

Entraînez-vous avec des questions corrigées, progressez étape par étape, puis consolidez vos notions grâce aux définitions et explications.

40 questions Réponses expliquées Réviser → Pratiquer
Liste QCM HTML/CSS Corrigé – Partie 7 – HTML/CSS

Le développement web repose sur deux piliers essentiels : la structure du contenu et sa présentation visuelle.

HTML et CSS jouent un rôle central dans cette construction, en permettant de créer des pages claires, accessibles et agréables à consulter.

Maîtriser ces technologies est indispensable pour toute personne souhaitant concevoir des sites web modernes, qu’il s’agisse d’étudiants, de candidats à des examens techniques ou de futurs développeurs.

À travers ces QCM, les notions fondamentales du balisage HTML et de la mise en forme CSS sont abordées de manière progressive et cohérente.

On y retrouve les principes de structuration des pages, l’utilisation correcte des balises sémantiques, ainsi que les mécanismes de mise en page et d’interaction visuelle.

Cette approche permet au lecteur de consolider ses bases tout en comprenant la logique globale du fonctionnement d’une page web.

L’objectif est d’accompagner l’apprenant avec méthode, en l’aidant à gagner en rigueur et en confiance dans sa pratique du web.

Le développement web repose sur deux piliers essentiels : la structure du contenu et sa présentation visuelle.

HTML et CSS jouent un rôle central dans cette construction, en permettant de créer des pages claires, accessibles et agréables à consulter.

Maîtriser ces technologies est indispensable pour toute personne souhaitant concevoir des sites web modernes, qu’il s’agisse d’étudiants, de candidats à des examens techniques ou de futurs développeurs.

À travers ces QCM, les notions fondamentales du balisage HTML et de la mise en forme CSS sont abordées de manière progressive et cohérente.

On y retrouve les principes de structuration des pages, l’utilisation correcte des balises sémantiques, ainsi que les mécanismes de mise en page et d’interaction visuelle.

Cette approche permet au lecteur de consolider ses bases tout en comprenant la logique globale du fonctionnement d’une page web.

L’objectif est d’accompagner l’apprenant avec méthode, en l’aidant à gagner en rigueur et en confiance dans sa pratique du web.

QCM 1 Corrigé

Quelle balise HTML est utilisée pour définir une barre de navigation ?

A. <navigation>
B. <nav>
C. <menu>
D. <bar>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
La balise sémantique <nav> est spécifiquement conçue pour contenir des liens de navigation.

QCM 2 Corrigé

Quelle propriété CSS permet de changer le curseur de la souris ?

A. mouse-style
B. pointer
C. cursor
D. event-cursor
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
La propriété 'cursor' permet d'afficher une main (pointer), une croix, ou d'autres symboles.

QCM 3 Corrigé

Quelle est la fonction du sélecteur 'a:hover' ?

A. Cibler les liens déjà visités
B. Cibler un lien lors du passage de la souris
C. Cibler le lien actif au clic
D. Cibler tous les liens d'une page
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
':hover' est une pseudo-classe déclenchée quand l'utilisateur survole l'élément.

QCM 4 Corrigé

En HTML, à quoi sert l'attribut 'alt' dans une balise <img> ?

A. Afficher une légende sous l'image
B. Améliorer la résolution de l'image
C. Fournir un texte alternatif pour l'accessibilité
D. Définir la bordure de l'image
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
L'attribut 'alt' décrit l'image pour les lecteurs d'écran et si le fichier ne charge pas.

QCM 5 Corrigé

Quelle propriété CSS permet d'arrondir les coins d'un élément ?

A. corner-style
B. border-radius
C. border-round
D. radius-clip
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
'border-radius' définit le rayon des coins d'un bloc.

QCM 6 Corrigé

Quelle balise HTML contient les métadonnées de la page (non visibles) ?

A. <body>
B. <html>
C. <head>
D. <header>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
Le <head> contient le titre, les scripts, les styles et les balises meta.

QCM 7 Corrigé

Quel est l'effet de 'z-index' en CSS ?

A. Agrandir un élément sur l'axe Z
B. Gérer l'ordre d'empilement vertical des éléments
C. Modifier l'opacité d'un calque
D. Définir la vitesse d'une animation
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Le 'z-index' détermine quel élément apparaît devant ou derrière les autres.

QCM 8 Corrigé

Quelle balise est utilisée pour regrouper des options dans une liste déroulante ?

A. <group>
B. <optgroup>
C. <listgroup>
D. <select-group>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
<optgroup> permet de créer des sections labellisées dans un élément <select>.

QCM 9 Corrigé

Comment mettre tout le texte d'un élément en majuscules en CSS ?

A. text-transform: uppercase;
B. font-style: capitalize;
C. text-decoration: big;
D. case: upper;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
'text-transform: uppercase' transforme tous les caractères en majuscules.

QCM 10 Corrigé

Quel attribut lie un label à son champ de formulaire ?

A. id
B. name
C. for
D. link
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
L'attribut 'for' du <label> doit correspondre à l'ID de l'input associé.

QCM 11 Corrigé

Quel modèle de boîte CSS inclut le padding et la bordure dans la largeur totale ?

A. box-sizing: content-box;
B. box-sizing: border-box;
C. display: flex-box;
D. overflow: visible;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
Avec 'border-box', 'width' définit la largeur totale (bordure et padding inclus).

QCM 12 Corrigé

Quel sélecteur CSS cible les éléments impairs d'une liste ?

A. li:nth-child(even)
B. li:nth-child(odd)
C. li:nth-child(first)
D. li:only-child
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
'odd' signifie 'impair' en anglais, utilisé pour les styles alternés.

QCM 13 Corrigé

En HTML5, quelle balise définit le pied de page d'un document ?

A. <bottom>
B. <end>
C. <footer>
D. <section-end>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
La balise <footer> est utilisée pour les informations de bas de page.

QCM 14 Corrigé

Quelle propriété CSS permet de rendre un élément flexible ?

A. align: flex;
B. display: flex;
C. flex: true;
D. position: flex;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
'display: flex' active le mode Flexbox pour les enfants directs de l'élément.

QCM 15 Corrigé

Quelle balise est utilisée pour insérer une vidéo en HTML5 ?

A. <media>
B. <movie>
C. <video>
D. <embed>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
<video> est la balise native introduite en HTML5 pour le contenu vidéo.

QCM 16 Corrigé

Comment enlever le soulignement par défaut des liens ?

A. text-decoration: none;
B. underline: false;
C. link-style: none;
D. text-style: plain;
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
'text-decoration: none' supprime le trait de soulignement des balises <a>.

QCM 17 Corrigé

Quelle valeur de 'display' permet de cacher un élément du DOM ?

A. hidden
B. invisible
C. none
D. collapse
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
'display: none' retire l'élément du flux de la page comme s'il n'existait pas.

QCM 18 Corrigé

Quelle balise HTML définit une cellule d'en-tête de tableau ?

A. <td>
B. <head-cell>
C. <th>
D. <tr>
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
<th> signifie 'Table Header' et centre/met en gras le texte par défaut.

QCM 19 Corrigé

Quel sélecteur CSS permet de cibler le premier enfant d'un parent ?

A. :first-child
B. :start
C. :initial-child
D. :child(1)
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
La pseudo-classe ':first-child' cible spécifiquement le premier élément enfant.

QCM 20 Corrigé

Quelle propriété définit l'ordre de priorité des polices de secours ?

A. font-backup
B. font-stack
C. font-family
D. text-font
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
Dans 'font-family', on liste les polices de la plus préférée à la moins préférée.

QCM 21 Corrigé

Quel est l'impact de la propriété 'display: flow-root' sur un élément ?

A. Il transforme l'élément en conteneur Flexbox.
B. Il crée un nouveau contexte de formatage de bloc (BFC), résolvant les problèmes de débordement de flottants.
C. Il force l'élément à ignorer les marges de ses parents.
D. Il permet l'utilisation des propriétés Grid sur un élément en ligne.
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
'flow-root' est la méthode moderne pour contenir les flottants sans les effets secondaires de 'overflow: hidden'.

QCM 22 Corrigé

Quelle propriété CSS permet de définir l'espace entre les colonnes d'un texte réparti via 'column-count' ?

A. column-gap
B. grid-gap
C. margin-columns
D. padding-between
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
'column-gap' définit la gouttière entre les colonnes dans un système multi-colonnes ou une grille.

QCM 23 Corrigé

À quoi sert la pseudo-classe ':target' ?

A. Cibter l'élément sur lequel l'utilisateur vient de cliquer.
B. Styliser un élément dont l'ID correspond à l'ancre présente dans l'URL actuelle.
C. Définir la cible d'un lien hypertexte.
D. Cibler le prochain élément dans l'ordre de tabulation.
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
':target' permet de créer des effets (onglets, modales) basés uniquement sur les ancres d'URL sans JavaScript.

QCM 24 Corrigé

Quel mot-clé de 'will-change' est recommandé pour optimiser les animations de déplacement ?

A. will-change: left
B. will-change: position
C. will-change: transform
D. will-change: auto
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
Le GPU traite plus efficacement les 'transformations' que les modifications de coordonnées de flux (left/top).

QCM 25 Corrigé

Quelle est la fonction de 'border-image-outset' ?

A. Étendre la zone de l'image de bordure au-delà de la boîte de bordure de l'élément.
B. Définir la largeur de la bordure interne.
C. Créer un espace entre la bordure et le contenu (padding).
D. Répéter l'image de bordure pour combler les vides.
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
Cette propriété permet de faire déborder visuellement une bordure décorative sans affecter la taille de la boîte réelle.

QCM 26 Corrigé

En CSS Grid, comment forcer un élément à occuper toute la largeur d'une ligne, quel que soit le nombre de colonnes ?

A. grid-column: 1 / 100
B. grid-column: 1 / span all
C. grid-column: 1 / -1
D. grid-column: full-width
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
L'index '-1' représente la dernière ligne de la grille, permettant de couvrir toute la largeur dynamiquement.

QCM 27 Corrigé

Que permet d'ajuster la propriété 'font-variation-settings' ?

A. Le chargement de polices de secours.
B. Les paramètres des polices variables (Variable Fonts) comme le poids ou l'inclinaison précise.
C. La taille de la police en fonction du viewport.
D. L'interlignage automatique des paragraphes.
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
C'est l'interface de bas niveau pour contrôler les axes personnalisés des polices variables modernes.

QCM 28 Corrigé

Quel sélecteur cible un élément <li> qui est le deuxième de sa liste ?

A. li:nth-child(2)
B. li:second-child
C. li:at(2)
D. li:index(1)
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
':nth-child(n)' commence l'indexation à 1 pour cibler l'élément à une position précise.

QCM 29 Corrigé

Quelle valeur de 'white-space' permet de conserver les espaces et retours à la ligne du code HTML tout en permettant le retour à la ligne automatique ?

A. nowrap
B. pre
C. pre-wrap
D. normal
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
'pre-wrap' combine la conservation des espaces du texte brut et la flexibilité du wrapping CSS.

QCM 30 Corrigé

Que fait 'overflow-wrap: break-word' (anciennement word-wrap) ?

A. Il coupe les mots n'importe où pour éviter le débordement du conteneur.
B. Il ajoute un tiret à chaque fin de ligne.
C. Il réduit la taille de la police si le mot est trop long.
D. Il masque le texte qui dépasse.
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
Cette propriété permet de briser des chaînes de caractères très longues (URL, code) qui sinon briseraient la mise en page.

QCM 31 Corrigé

Quelle propriété permet de définir l'espacement entre les lignes de texte ?

A. line-spacing
B. letter-spacing
C. text-indent
D. line-height
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : D

Justification :
'line-height' définit la hauteur de la boîte de ligne, gérant ainsi l'espace vertical entre les lignes.

QCM 32 Corrigé

À quoi sert la pseudo-classe ':not(p)' ?

A. À cibler uniquement les paragraphes.
B. À cibler tous les éléments sauf les paragraphes.
C. À supprimer tous les paragraphes du document.
D. À styliser les paragraphes vides.
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
':not()' est une pseudo-classe de négation qui exclut les éléments correspondant au sélecteur entre parenthèses.

QCM 33 Corrigé

Quelle propriété CSS est utilisée pour créer des ombres à l'intérieur d'un élément ?

A. box-shadow avec le mot-clé 'inset'
B. inner-shadow
C. text-shadow
D. filter: brightness()
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
Le paramètre 'inset' dans 'box-shadow' inverse l'ombre pour la placer à l'intérieur de la boîte.

QCM 34 Corrigé

En Flexbox, quelle est la fonction de 'align-self' ?

A. Aligner tous les enfants en même temps.
B. Permettre à un élément enfant spécifique de surcharger l'alignement défini par le parent.
C. Définir la largeur de l'élément.
D. Inverser l'ordre des éléments.
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
'align-self' permet un contrôle individuel de l'alignement sur l'axe transversal pour un élément flex.

QCM 35 Corrigé

Quelle propriété contrôle la répétition d'une image de fond ?

A. background-repeat
B. background-size
C. background-iteration
D. background-fill
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
'background-repeat' permet de définir si l'image doit être répétée en X, Y, les deux ou pas du tout.

QCM 36 Corrigé

Quel est l'effet de 'text-transform: capitalize' ?

A. Mettre tout le texte en majuscules.
B. Mettre la première lettre de chaque mot en majuscule.
C. Mettre uniquement la première lettre de la phrase en majuscule.
D. Réduire la taille des majuscules.
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
'capitalize' transforme la première lettre de chaque mot séparé par un espace en capitale.

QCM 37 Corrigé

Quelle unité est basée sur la largeur du viewport ?

A. vh
B. vw
C. px
D. em
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : B

Justification :
1vw (Viewport Width) est égal à 1% de la largeur totale de la fenêtre du navigateur.

QCM 38 Corrigé

Quelle propriété permet d'ajouter un contour autour du texte (et non de la boîte) ?

A. text-outline
B. border-text
C. -webkit-text-stroke
D. font-weight
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
Bien que non standard à l'origine, 'text-stroke' est largement supporté pour dessiner un contour sur les glyphes.

QCM 39 Corrigé

Quel sélecteur cible tous les éléments <a> situés n'importe où à l'intérieur d'un <nav> ?

A. nav > a
B. nav + a
C. nav a
D. nav .a
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : C

Justification :
L'espace entre deux sélecteurs est le combinateur de descendant (n'importe quel niveau d'imbrication).

QCM 40 Corrigé

Que signifie la valeur 'border-box' pour 'box-sizing' ?

A. La largeur inclut le contenu, le padding et la bordure.
B. La bordure est dessinée à l'extérieur de la boîte.
C. Le padding est ignoré dans le calcul de la taille.
D. L'élément est forcé de devenir un carré.
Afficher la réponse Cliquez pour voir la correction

Réponse correcte : A

Justification :
'border-box' simplifie la mise en page en incluant padding et bordures dans la largeur/hauteur définie.

Mots & Définitions
Consultez les définitions des termes importants.

La balise nav est un élément sémantique HTML utilisé pour regrouper les liens de navigation principaux d’un site. Elle permet de structurer clairement les menus et d’améliorer l’accessibilité ainsi que la compréhension de la page par les moteurs de recherche.

La propriété CSS cursor permet de modifier l’apparence du pointeur de la souris lorsqu’il survole un élément. Elle est souvent utilisée pour indiquer qu’un élément est cliquable ou interactif.

La pseudo-classe :hover s’applique lorsqu’un utilisateur survole un élément avec la souris. Elle est couramment utilisée pour créer des effets visuels dynamiques sur les liens ou les boutons.

L’attribut alt fournit une description textuelle d’une image lorsque celle-ci ne peut pas être affichée. Il est essentiel pour l’accessibilité et permet aux lecteurs d’écran de décrire l’image aux utilisateurs.

La propriété border-radius permet d’arrondir les coins d’un élément HTML. Elle contribue à une présentation visuelle plus moderne et plus agréable des interfaces.

La propriété z-index contrôle l’ordre d’empilement des éléments positionnés sur l’axe vertical. Elle détermine quel élément apparaît au-dessus ou en dessous des autres.

La balise optgroup est utilisée pour regrouper des options similaires dans une liste déroulante. Elle améliore la lisibilité et l’organisation des menus de sélection.

La propriété text-transform permet de modifier la casse du texte, comme l’affichage en majuscules ou en minuscules. Elle est utile pour harmoniser l’apparence du contenu sans modifier le texte source.

La propriété box-sizing définit la manière dont la largeur et la hauteur d’un élément sont calculées. Avec la valeur border-box, le padding et la bordure sont inclus dans les dimensions totales.

Flexbox est un modèle de mise en page CSS conçu pour organiser facilement les éléments sur un axe principal. Il permet d’aligner, de répartir et d’adapter les composants de manière flexible.

Le sélecteur :first-child cible le premier élément enfant d’un parent donné. Il est utilisé pour appliquer un style spécifique au premier élément d’une liste ou d’un groupe.

La propriété font-family permet de définir une liste de polices de caractères par ordre de priorité. Elle assure une apparence cohérente du texte même si certaines polices ne sont pas disponibles.

À propos de ce QCM

Ces QCM couvrent les notions essentielles nécessaires pour comprendre et utiliser efficacement HTML et CSS dans un contexte professionnel ou académique.

Côté HTML, l’accent est mis sur la structure du document, l’usage des balises sémantiques et l’organisation logique du contenu.

Comprendre le rôle des balises dédiées à la navigation, aux sections, aux formulaires ou aux médias permet de créer des pages plus lisibles, accessibles et conformes aux standards du web.

Du côté de CSS, les questions abordent les principes de mise en forme, de positionnement et d’interaction visuelle.

Les propriétés liées à l’affichage, à l’alignement, à la gestion des dimensions ou à l’empilement des éléments sont essentielles pour maîtriser la présentation d’une interface.

Les notions de Flexbox, de gestion des états interactifs et de hiérarchie visuelle permettent d’aller au-delà d’un simple habillage graphique et de concevoir des mises en page adaptables et cohérentes.

En travaillant ces QCM, l’utilisateur développe une compréhension théorique solide tout en renforçant sa capacité à analyser et corriger du code existant.

L’entraînement favorise l’autonomie, l’auto-évaluation et la préparation efficace aux examens ou aux tests techniques.

Chaque thème abordé contribue à une vision globale du développement front-end, en reliant la structure du contenu à son rendu visuel et à l’expérience utilisateur.

Conclusion

Ces QCM constituent un excellent support pour consolider les bases du HTML et du CSS, deux compétences incontournables dans le développement web.

Ils permettent de revoir les concepts clés, d’identifier les points à renforcer et de progresser de manière structurée.

En s’exerçant régulièrement, l’apprenant améliore sa compréhension des mécanismes du web et gagne en assurance dans la lecture et l’écriture du code.

Cette pratique régulière favorise une montée en compétence durable et prépare efficacement aux examens, aux projets personnels ou aux exigences du monde professionnel.