Le développement web repose sur des bases solides qui permettent de créer des pages claires, accessibles et bien structurées.
HTML et CSS constituent le socle fondamental de toute interface web moderne.
Leur maîtrise est indispensable pour les étudiants, les débutants en développement, mais aussi pour toute personne préparant un examen, un concours ou une reconversion dans les métiers du numérique.
Ces technologies permettent de transformer une simple idée en une page visible, lisible et agréable pour l’utilisateur.
À travers ces QCM, l’apprenant est amené à comprendre comment organiser le contenu d’une page, définir sa structure logique et améliorer sa présentation visuelle.
Les notions abordées concernent aussi bien la sémantique des balises que la mise en forme du texte, le positionnement des éléments et la gestion de l’espace.
Cette approche progressive aide à acquérir des réflexes essentiels et à construire des bases fiables pour évoluer vers des projets web plus complexes.
Le développement web repose sur des bases solides qui permettent de créer des pages claires, accessibles et bien structurées.
HTML et CSS constituent le socle fondamental de toute interface web moderne.
Leur maîtrise est indispensable pour les étudiants, les débutants en développement, mais aussi pour toute personne préparant un examen, un concours ou une reconversion dans les métiers du numérique.
Ces technologies permettent de transformer une simple idée en une page visible, lisible et agréable pour l’utilisateur.
À travers ces QCM, l’apprenant est amené à comprendre comment organiser le contenu d’une page, définir sa structure logique et améliorer sa présentation visuelle.
Les notions abordées concernent aussi bien la sémantique des balises que la mise en forme du texte, le positionnement des éléments et la gestion de l’espace.
Cette approche progressive aide à acquérir des réflexes essentiels et à construire des bases fiables pour évoluer vers des projets web plus complexes.
QCM
1
Corrigé
Que signifie l'acronyme HTML ?
A. Hyper Text Markup Language
B. High Text Machine Language
C. Hyperlinks and Text Management Language
D. Home Tool Markup Language
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
HTML est le langage de balisage standard pour créer des pages web.
QCM
2
Corrigé
Quelle balise HTML est utilisée pour insérer un saut de ligne ?
A. <lb>
B. <break>
C. <br>
D. <hr>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La balise <br> est une balise orpheline utilisée pour forcer un retour à la ligne.
QCM
3
Corrigé
Quel attribut est utilisé pour définir le lien d'une image ?
A. href
B. src
C. link
D. alt
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'attribut 'src' (source) spécifie le chemin vers le fichier image.
QCM
4
Corrigé
En CSS, comment sélectionnez-vous un élément avec l'id 'header' ?
A. .header
B. header
C. *header
D. #header
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Le symbole '#' est utilisé pour cibler un identifiant unique (ID) en CSS.
QCM
5
Corrigé
Quelle propriété CSS change la couleur du texte ?
A. background-color
B. text-style
C. color
D. font-color
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La propriété 'color' définit la couleur de la police d'un élément.
QCM
6
Corrigé
Quelle balise est utilisée pour créer une liste à puces (non ordonnée) ?
A. <ul>
B. <ol>
C. <li>
D. <list>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
<ul> signifie 'unordered list' (liste non ordonnée).
QCM
7
Corrigé
Où est le bon endroit pour insérer une feuille de style externe ?
A. Dans la section <body>
B. À la fin du document
C. Dans la section <head>
D. Dans la section <footer>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Les liens vers le CSS se placent dans le <head> pour que le style charge avant le contenu.
QCM
8
Corrigé
Quelle propriété CSS contrôle la taille du texte ?
A. text-size
B. font-style
C. text-style
D. font-size
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
'font-size' est la propriété standard pour ajuster la taille des caractères.
QCM
9
Corrigé
Quelle est la valeur par défaut de la propriété 'position' ?
A. relative
B. fixed
C. static
D. absolute
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Par défaut, tous les éléments HTML sont positionnés en 'static' (flux normal).
QCM
10
Corrigé
Comment rendre un texte en gras en HTML ?
A. <bold>
B. <strong>
C. <italic>
D. <weight>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<strong> donne une importance sémantique et affiche le texte en gras par défaut.
QCM
11
Corrigé
Quelle propriété permet d'ajouter de l'espace à l'intérieur d'une bordure ?
A. margin
B. spacing
C. padding
D. border-width
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le 'padding' (marge interne) définit l'espace entre le contenu et sa bordure.
QCM
12
Corrigé
Comment commenter du code en CSS ?
A. // ceci est un commentaire
B. /* ceci est un commentaire */
C. /// ceci est un commentaire
D. ' ceci est un commentaire
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les commentaires CSS utilisent les symboles /* et */.
QCM
13
Corrigé
Quelle balise HTML définit le titre de la page affiché dans l'onglet du navigateur ?
A. <meta>
B. <head>
C. <header>
D. <title>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
La balise <title> est indispensable pour le SEO et l'affichage dans le navigateur.
QCM
14
Corrigé
Quel sélecteur CSS cible tous les éléments <p> ?
A. #p
B. p
C. .p
D. <p>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
On utilise simplement le nom de la balise comme sélecteur de type.
QCM
15
Corrigé
Comment centrer horizontalement un élément de type block avec des marges ?
A. margin: center;
B. margin: 0 auto;
C. horizontal-align: center;
D. align: middle;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La valeur 'auto' sur les marges gauche et droite centre l'élément dans son parent.
QCM
16
Corrigé
Quel attribut HTML est utilisé pour ouvrir un lien dans une nouvelle fenêtre ?
A. target='_blank'
B. target='new'
C. window='new'
D. href='_blank'
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
L'attribut target avec la valeur '_blank' force l'ouverture dans un nouvel onglet.
QCM
17
Corrigé
Quelle propriété CSS est utilisée pour changer la police d'un texte ?
A. font-weight
B. text-family
C. font-family
D. typeface
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'font-family' permet de lister les polices prioritaires pour l'affichage.
QCM
18
Corrigé
En HTML, quel est l'en-tête le plus important ?
A. <h6>
B. <head>
C. <h0>
D. <h1>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
<h1> est le titre de niveau 1, crucial pour la structure sémantique.
QCM
19
Corrigé
Quelle propriété CSS permet de masquer un élément sans supprimer sa place dans le layout ?
A. display: none;
B. visibility: hidden;
C. opacity: 1;
D. show: false;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'visibility: hidden' cache l'élément mais préserve l'espace qu'il occupe.
QCM
20
Corrigé
Quelle unité CSS est relative à la taille de la police de l'élément racine (<html>) ?
A. em
B. px
C. rem
D. %
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'rem' signifie 'root em', basé sur la taille définie au niveau de la racine.
QCM
21
Corrigé
Quelle est la principale différence entre :is() et :where() en termes de spécificité ?
A. :is() est réservé aux sélecteurs d'ID alors que :where() cible uniquement les classes.
B. :where() a toujours une spécificité nulle, contrairement à :is() qui prend celle de son argument le plus fort.
C. :is() additionne les spécificités de tous ses arguments pour surpasser les styles inline.
D. Il n'y a aucune différence, :where() est simplement l'ancienne syntaxe de :is().
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:where() permet de grouper des sélecteurs sans augmenter leur poids, facilitant les surcharges ultérieures.
QCM
22
Corrigé
En CSS Grid, que permet d'accomplir la valeur 'subgrid' appliquée à grid-template-columns ?
A. Elle divise chaque cellule en quatre sous-cellules égales de manière récursive.
B. Elle force l'élément enfant à définir ses propres colonnes sans lien avec le parent.
C. Elle permet à l'élément enfant d'utiliser les pistes (tracks) définies sur son parent direct.
D. Elle crée une grille indépendante du flux principal pour les éléments en position fixe.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le subgrid permet d'aligner des descendants profonds sur la structure de la grille parente, assurant une cohérence visuelle parfaite.
QCM
23
Corrigé
Quel sélecteur permet de cibler un élément parent uniquement s'il contient un enfant spécifique ?
A. :parent-of
B. :within
C. :contains
D. :has()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
La pseudo-classe :has() est le sélecteur relationnel qui permet de styliser un élément en fonction de ses descendants ou de ses frères.
QCM
24
Corrigé
Dans le modèle de boîte 'border-box', si width=400px, padding=40px et border=10px, quelle est la largeur totale de l'élément ?
A. 400px
B. 500px
C. 450px
D. 300px
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Avec 'border-box', le padding et la bordure sont inclus à l'intérieur de la largeur (width) définie.
QCM
25
Corrigé
Quelle propriété CSS permet d'optimiser le rendu en sautant le calcul des éléments hors écran ?
A. content-visibility: auto
B. render-strategy: lazy
C. display: skip-offscreen
D. will-change: scroll
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Cette propriété permet au navigateur d'ignorer le rendu d'un bloc tant qu'il n'approche pas du viewport, améliorant les performances.
QCM
26
Corrigé
À quoi sert la propriété 'isolation: isolate' en CSS ?
A. À bloquer l'héritage des variables CSS vers les éléments enfants.
B. À créer un nouveau contexte d'empilement (stacking context) sans modifier le z-index.
C. À empêcher le texte d'être sélectionné par l'utilisateur via la souris.
D. À retirer l'élément du flux normal du document pour l'isoler visuellement.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Isolate permet de confiner les mix-blend-mode et les z-index internes sans affecter le positionnement global.
QCM
27
Corrigé
L'unité 'ch' est basée sur quelle mesure typographique précise ?
A. La hauteur moyenne des lettres minuscules (x-height).
B. La largeur du caractère '0' (zéro) de la police actuelle.
C. La hauteur de la ligne de base (baseline) multipliée par deux.
D. La largeur totale du glyphe 'M' majuscule.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité ch est idéale pour limiter la largeur des paragraphes à un nombre de caractères confortable pour la lecture.
QCM
28
Corrigé
Quelle valeur de 'object-fit' conserve le ratio d'une image en remplissant le conteneur, au risque de la rogner ?
A. contain
B. fill
C. none
D. cover
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Cover redimensionne l'image pour couvrir tout le conteneur en gardant ses proportions, idéal pour les headers.
QCM
29
Corrigé
À quoi sert la propriété 'scroll-margin-top' ?
A. Ajouter une marge externe au sommet de la page pour le mode impression.
B. Définir un décalage pour qu'un élément ancré ne soit pas caché par un header fixe.
C. Ralentir la vitesse de défilement vers le haut de 50%.
D. Empêcher le défilement horizontal sur les appareils tactiles.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est la solution standard pour éviter que les barres de navigation 'sticky' ne recouvrent la cible d'un lien d'ancre.
QCM
30
Corrigé
Quel sélecteur cible un lien <a> dont l'attribut href commence exactement 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 :
L'opérateur ^= sélectionne les attributs dont la valeur commence par la chaîne de caractères spécifiée.
QCM
31
Corrigé
Que fait 'flex-basis: 0' par rapport à 'flex-basis: auto' ?
A. Il masque l'élément s'il n'y a pas assez de place dans le conteneur.
B. Il ignore la taille du contenu pour distribuer l'espace de manière égale selon flex-grow.
C. Il force l'élément à prendre 100% de la largeur du parent par défaut.
D. Il empêche l'élément de rétrécir si le conteneur est trop petit.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
En mettant la base à 0, Flexbox ne tient plus compte de la taille intrinsèque du contenu pour calculer la distribution.
QCM
32
Corrigé
Quel pseudo-élément permet de styliser spécifiquement le texte sélectionné par l'utilisateur ?
A. ::text-select
B. ::highlight
C. ::selection
D. ::active-text
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
::selection permet de modifier la couleur de fond et du texte lors de la sélection active sur la page.
QCM
33
Corrigé
Quelle propriété permet d'appliquer un flou sur les éléments situés DERRIÈRE un bloc semi-transparent ?
A. filter: blur()
B. background-filter: 10px
C. backdrop-filter: blur(10px)
D. opacity-blur: true
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Backdrop-filter applique des effets à la zone située derrière l'élément, créant l'effet 'verre dépoli' (frosted glass).
QCM
34
Corrigé
Comment s'appelle le mécanisme où les marges verticales de deux blocs adjacents fusionnent en une seule ?
A. Margin nesting
B. Margin overflow
C. Margin collapse
D. Margin grouping
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le margin collapse (fusion des marges) fait que seule la plus grande marge entre deux éléments successifs est conservée.
QCM
35
Corrigé
Quelle est la particularité des Container Queries (@container) ?
A. Elles ne fonctionnent que sur les images de type vectoriel SVG.
B. Elles adaptent le style selon la taille du parent immédiat et non du viewport global.
C. Elles sont traitées exclusivement par le processeur graphique (GPU).
D. Elles nécessitent l'utilisation obligatoire de l'unité 'rem' uniquement.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les Container Queries permettent de créer des composants modulaires qui s'adaptent à l'espace alloué par leur parent.
QCM
36
Corrigé
Quel mot-clé de 'background-repeat' répète une image sans la couper, en ajustant l'espacement entre elles ?
A. round
B. space
C. stretch
D. fill
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La valeur 'space' répartit les répétitions de l'image uniformément pour qu'elles tiennent sans être tronquées.
QCM
37
Corrigé
En CSS, que permet de réaliser la fonction clamp(1rem, 5vw, 2rem) ?
A. Forcer le texte à rester sur une seule ligne quel que soit le zoom.
B. Définir une valeur fluide qui ne descend jamais sous 1rem et ne dépasse pas 2rem.
C. Arrondir les pixels à l'entier le plus proche pour éviter le flou visuel.
D. Multiplier la taille de la police par 5 selon la largeur de l'écran.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Clamp est l'outil ultime pour la typographie fluide, limitant les tailles minimale et maximale sans media queries.
QCM
38
Corrigé
Quelle propriété permet de définir l'ordre de priorité d'affichage sur l'axe Z (profondeur) ?
A. depth-index
B. layer-order
C. z-index
D. stack-priority
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le z-index gère la superposition des éléments (nécessite une position autre que 'static').
QCM
39
Corrigé
Quel sélecteur cible tous les éléments <li> qui suivent un autre <li> à n'importe quel niveau de même parent ?
A. li + li
B. li || li
C. li > li
D. li ~ li
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L'opérateur '~' est le combinateur de frères généraux, ciblant tous les voisins suivants de même niveau.
QCM
40
Corrigé
Que signifie précisément l'unité 'rem' ?
A. Relative Element Margin.
B. Root em : relatif à la taille de police de l'élément racine (html).
C. Real Electronic Measure.
D. Ratio Em : calculé selon la densité de pixels de l'écran.
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Contrairement à 'em', 'rem' évite les problèmes d'héritage en cascade en se référant toujours à la racine du document.
Mots & Définitions
Consultez les définitions des termes importants.
HTML est un langage de balisage utilisé pour structurer le contenu d’une page web. Il permet de définir les titres, paragraphes, images, liens et autres éléments visibles dans un navigateur. HTML constitue la base de toute page web.
Une balise HTML est un mot-clé entouré de chevrons servant à définir un élément de la page. Elle indique au navigateur comment afficher ou organiser le contenu. La plupart des balises fonctionnent par paires, avec une ouverture et une fermeture.
Un attribut HTML apporte des informations supplémentaires à une balise. Il permet par exemple de préciser la source d’une image ou la destination d’un lien. Les attributs améliorent le comportement et la signification des éléments.
CSS est un langage utilisé pour gérer l’apparence visuelle des pages web. Il permet de définir les couleurs, les tailles, les espacements et la mise en page. Grâce au CSS, le contenu et le design sont clairement séparés.
Un sélecteur CSS sert à cibler un ou plusieurs éléments HTML auxquels appliquer un style. Il peut désigner un type de balise, une classe ou un identifiant. C’est le point de départ de toute règle CSS.
Un identifiant est un attribut unique attribué à un élément HTML. Il permet de cibler précisément cet élément en CSS ou en JavaScript. Un même identifiant ne doit jamais être utilisé plusieurs fois sur une page.
Une classe est un attribut permettant de regrouper plusieurs éléments sous un même style. Contrairement à l’identifiant, une classe peut être utilisée plusieurs fois. Elle facilite la mise en forme cohérente de la page.
Une propriété CSS définit un aspect précis du style d’un élément, comme la couleur ou la taille du texte. Elle est associée à une valeur qui précise son effet. L’ensemble forme une règle de mise en forme.
Le box model représente la structure d’un élément HTML sous forme de boîte. Il est composé du contenu, du padding, de la bordure et de la marge. Comprendre ce modèle est essentiel pour maîtriser la mise en page.
Le positionnement CSS détermine la manière dont un élément est placé dans la page. Il permet de contrôler son emplacement par rapport au flux normal du document. C’est un outil clé pour créer des mises en page avancées.
Une feuille de style externe est un fichier CSS séparé du fichier HTML. Elle permet de centraliser les styles et de les réutiliser sur plusieurs pages. Cette méthode améliore la lisibilité et la maintenance du code.
Une unité relative en CSS s’adapte à la taille d’un autre élément ou du document. Elle permet de créer des designs plus flexibles et responsives. Ces unités sont essentielles pour l’adaptation aux différents écrans.
À propos de ce QCM
Les QCM proposés couvrent les notions essentielles du développement front-end, en mettant l’accent sur la complémentarité entre HTML et CSS.
HTML permet de structurer le contenu d’une page web en définissant clairement les titres, paragraphes, images, liens et listes.
Comprendre le rôle des balises et de leurs attributs est indispensable pour créer une structure cohérente et accessible, respectant les bonnes pratiques du web.
CSS intervient ensuite pour gérer l’apparence visuelle de cette structure.
Il permet de contrôler la couleur du texte, la taille des polices, les espacements internes et externes, ainsi que l’alignement des éléments.
Les sélecteurs jouent un rôle central en ciblant précisément les éléments à styliser, qu’il s’agisse de balises, de classes ou d’identifiants.
Cette logique renforce la lisibilité du code et facilite sa maintenance.
Les questions abordent également des notions clés de mise en page, comme le modèle de boîte, le positionnement des éléments et la gestion de la visibilité.
Ces concepts sont essentiels pour comprendre comment un navigateur interprète et affiche une page.
La distinction entre marges, bordures et espacements internes permet d’éviter de nombreuses erreurs courantes chez les débutants.
Enfin, l’utilisation correcte des feuilles de style externes et des unités relatives favorise la création de sites plus flexibles et adaptables à différents écrans.
Grâce à ces QCM, l’utilisateur développe une compréhension théorique solide, s’entraîne de manière ciblée, évalue son niveau et se prépare efficacement aux examens ou aux projets pratiques en développement web.
Conclusion
Cette série de QCM constitue un excellent outil pour consolider les bases du HTML et du CSS.
Elle permet de mieux comprendre la structure des pages web et les mécanismes de mise en forme qui influencent directement l’expérience utilisateur.
En s’exerçant régulièrement, l’apprenant renforce ses connaissances, corrige ses erreurs et gagne en assurance.
Cette progression continue facilite la réussite académique, la préparation aux concours et la réalisation de projets web plus aboutis.
Maîtriser ces fondamentaux est une étape essentielle vers un développement web clair, structuré et professionnel.
