L
e développement web moderne repose sur une compréhension solide des mécanismes fondamentaux de HTML et CSS, qui constituent la base de toute interface web fiable et accessible.
Ces technologies permettent non seulement de structurer correctement l’information, mais aussi de contrôler finement la présentation, l’interaction et l’expérience utilisateur.
Dans un contexte académique, professionnel ou lors de concours techniques, la maîtrise de ces notions est devenue incontournable.
Les QCM proposés explorent des concepts essentiels liés à la structuration sémantique des pages, à la gestion des styles, à la hiérarchisation des règles CSS et au comportement des éléments dans différents contextes d’affichage.
Ils invitent à raisonner sur des situations concrètes rencontrées lors de la création d’interfaces modernes, performantes et maintenables.
Cette approche progressive permet au lecteur de consolider ses bases tout en développant une vision plus rigoureuse et professionnelle du développement front-end.
Le développement web moderne repose sur une compréhension solide des mécanismes fondamentaux de HTML et CSS, qui constituent la base de toute interface web fiable et accessible.
Ces technologies permettent non seulement de structurer correctement l’information, mais aussi de contrôler finement la présentation, l’interaction et l’expérience utilisateur.
Dans un contexte académique, professionnel ou lors de concours techniques, la maîtrise de ces notions est devenue incontournable.
Les QCM proposés explorent des concepts essentiels liés à la structuration sémantique des pages, à la gestion des styles, à la hiérarchisation des règles CSS et au comportement des éléments dans différents contextes d’affichage.
Ils invitent à raisonner sur des situations concrètes rencontrées lors de la création d’interfaces modernes, performantes et maintenables.
Cette approche progressive permet au lecteur de consolider ses bases tout en développant une vision plus rigoureuse et professionnelle du développement front-end.
QCM
1
Corrigé
Quel sélecteur a la plus forte spécificité (poids) en CSS ?
A. Le sélecteur de type (ex: div)
B. Le sélecteur de classe (ex: .my-class)
C. Le sélecteur d'identifiant (ex: #my-id)
D. Le sélecteur universel (*)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'identifiant (#id) l'emporte toujours sur les classes et les types de balises dans le calcul de la spécificité.
QCM
2
Corrigé
Quelle balise HTML est la plus appropriée pour définir des informations de contact ?
A. <contact>
B. <footer>
C. <address>
D. <info>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
La balise <address> est sémantiquement réservée aux informations de contact pour un article ou un document entier.
QCM
3
Corrigé
Quelle propriété CSS permet de changer l'apparence des majuscules en 'petites capitales' ?
A. text-transform: small-caps;
B. font-variant: small-caps;
C. font-style: caps;
D. text-variant: uppercase;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
'font-variant' permet d'utiliser des variantes de glyphes comme les petites capitales.
QCM
4
Corrigé
Comment s'appelle l'espace entre le contenu et la bordure d'un élément ?
A. Margin
B. Border-width
C. Padding
D. Outline
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le padding est la marge interne qui sépare le contenu de sa propre bordure.
QCM
5
Corrigé
Quel attribut HTML permet de spécifier le jeu de caractères du document (souvent UTF-8) ?
A. <meta charset='...'>
B. <meta type='...'>
C. <meta encoding='...'>
D. <meta lang='...'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
La balise <meta charset='UTF-8'> dans le <head> assure que les caractères spéciaux s'affichent correctement.
QCM
6
Corrigé
En CSS, que fait 'font-style: italic;' ?
A. Il souligne le texte
B. Il met le texte en gras
C. Il incline les caractères
D. Il change la police
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'font-style' est principalement utilisé pour l'italique ou l'oblique.
QCM
7
Corrigé
Quel attribut HTML5 permet de charger un script de manière asynchrone ?
A. defer
B. async
C. wait
D. load
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'attribut 'async' permet au script de se charger en parallèle sans bloquer l'analyse du HTML.
QCM
8
Corrigé
Quelle propriété CSS permet de définir l'image de fond d'un élément ?
A. background-image
B. image-source
C. bg-img
D. source-image
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
On utilise background-image: url('chemin/image.jpg'); pour appliquer un fond.
QCM
9
Corrigé
Quelle balise HTML définit une zone de texte multi-ligne dans un formulaire ?
A. <input type='text-area'>
B. <text>
C. <textarea>
D. <field-text>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
<textarea> contrairement à <input> permet d'écrire de longs paragraphes.
QCM
10
Corrigé
Quelle propriété CSS permet d'ajouter un effet de transition à la couleur de fond ?
A. transition: background-color 0.3s;
B. animate: background 0.3s;
C. speed: color 0.3s;
D. transform: color 0.3s;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
La propriété transition définit la propriété à animer et sa durée.
QCM
11
Corrigé
Quel sélecteur CSS cible tous les éléments ayant l'attribut 'title' ?
A. [title]
B. .title
C. #title
D. *title
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Les crochets [] sont utilisés pour cibler des éléments en fonction de leurs attributs.
QCM
12
Corrigé
Quelle est la valeur par défaut de la propriété 'background-repeat' ?
A. no-repeat
B. repeat-x
C. repeat
D. repeat-y
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Par défaut, une image de fond se répète horizontalement et verticalement pour remplir le bloc.
QCM
13
Corrigé
Quel type d'input HTML5 est conçu pour les numéros de téléphone ?
A. <input type='phone'>
B. <input type='tel'>
C. <input type='mobile'>
D. <input type='call'>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'input 'tel' permet aux claviers mobiles d'afficher le pavé numérique.
QCM
14
Corrigé
Quelle propriété CSS permet de définir si un texte peut être sélectionné par l'utilisateur ?
A. user-select
B. text-selection
C. pointer-events
D. content-editable
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
'user-select: none;' empêche l'utilisateur de copier/surligner le texte.
QCM
15
Corrigé
En HTML, quelle balise est utilisée pour créer une ligne horizontale de séparation ?
A. <line>
B. <hr>
C. <br>
D. <separator>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<hr> (Horizontal Rule) crée une coupure thématique visuelle entre deux sections.
QCM
16
Corrigé
Quelle propriété CSS permet de forcer un élément à rester à la ligne suivante (briser le flottement) ?
A. float: none;
B. clear
C. break
D. display: block;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La propriété 'clear: both;' empêche un élément de monter à côté d'un élément flottant.
QCM
17
Corrigé
Quelle unité CSS est égale à la hauteur de la ligne (line-height) courante ?
A. em
B. lh
C. ex
D. rem
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité 'lh' est utile pour aligner des éléments sur le rythme de la ligne de texte.
QCM
18
Corrigé
Quelle balise HTML5 est utilisée pour définir le contenu principal unique de la page ?
A. <section>
B. <content>
C. <main>
D. <body>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Il ne doit y avoir qu'une seule balise <main> visible par document HTML.
QCM
19
Corrigé
Quelle propriété CSS permet de définir le style des bordures (pointillés, tirets, plein) ?
A. border-type
B. border-style
C. border-variant
D. border-line
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les valeurs incluent 'solid', 'dashed', 'dotted', 'double', etc.
QCM
20
Corrigé
Que fait 'list-style-position: inside;' ?
A. Cache les puces
B. Place la puce à l'intérieur du bloc de texte de l'élément
C. Centre la liste
D. Aligne les puces à droite
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Cela modifie la façon dont la puce interagit avec le retour à la ligne du texte de la liste.
Mots & Définitions
Consultez les définitions des termes importants.
La spécificité est une règle de priorité utilisée par le navigateur pour déterminer quel style CSS s’applique lorsqu’il y a des conflits. Elle dépend du type de sélecteur utilisé, comme les identifiants, les classes ou les balises. Plus la spécificité est élevée, plus la règle est prioritaire.
Le sélecteur d’identifiant cible un élément unique à l’aide de son attribut id. Il possède un poids élevé en CSS, ce qui lui permet souvent de l’emporter sur d’autres règles. Son usage doit rester limité pour conserver un code maintenable.
Le padding correspond à l’espace intérieur situé entre le contenu d’un élément et sa bordure. Il influence directement la lisibilité et le confort visuel. Contrairement à la marge, il fait partie de la zone cliquable de l’élément.
La balise address est utilisée pour représenter des informations de contact liées à un auteur ou à un contenu. Elle a une valeur sémantique importante pour les moteurs de recherche et l’accessibilité. Son usage améliore la structure du document HTML.
L’encodage de caractères définit la manière dont les textes sont interprétés par le navigateur. L’UTF-8 est le plus courant car il supporte de nombreuses langues et symboles. Il est généralement défini dans une balise meta.
Un script chargé de manière asynchrone s’exécute sans bloquer le chargement de la page. Cela améliore les performances et la rapidité d’affichage. Ce mécanisme est particulièrement utile pour les scripts non essentiels au rendu initial.
Le sélecteur d’attribut permet de cibler des éléments HTML en fonction de la présence ou de la valeur d’un attribut. Il offre une grande précision dans l’application des styles. C’est un outil puissant pour gérer des cas spécifiques sans ajouter de classes.
La balise main représente le contenu principal et unique d’une page web. Elle aide les lecteurs d’écran et les moteurs de recherche à identifier l’information centrale. Son utilisation renforce la sémantique du document.
La propriété font-variant permet de modifier l’apparence typographique du texte, notamment pour afficher des petites capitales. Elle agit sans changer le contenu réel du texte. Cela permet d’améliorer l’esthétique tout en conservant l’accessibilité.
L’outline est un contour visuel ajouté autour d’un élément sans affecter sa taille ou sa mise en page. Il est souvent utilisé pour l’accessibilité, par exemple lors de la navigation au clavier. Contrairement à la bordure, il ne prend pas d’espace.
La propriété clear est utilisée pour gérer le comportement des éléments flottants. Elle permet de forcer un élément à se placer sous des éléments float précédents. C’est une notion clé pour maîtriser les mises en page classiques.
Une pseudo-classe permet de cibler un élément selon son état ou sa position dans le document. Elle est couramment utilisée pour gérer les interactions utilisateur ou la structure du DOM. Cela rend les styles plus dynamiques et contextuels.
À propos de ce QCM
C
ette série de QCM s’inscrit dans une démarche pédagogique visant à approfondir la compréhension des mécanismes clés du HTML et du CSS, au-delà de leur simple syntaxe.
Les notions abordées couvrent la structuration sémantique des documents, la gestion des styles, ainsi que les règles qui régissent les priorités et le comportement visuel des éléments.
Une attention particulière est portée à la spécificité CSS, concept central pour comprendre comment le navigateur arbitre les conflits entre différentes règles de style.
La maîtrise de ce principe permet d’écrire des feuilles de style plus propres, prévisibles et faciles à maintenir.
Les questions abordent également les sélecteurs avancés, les pseudo-classes et les sélecteurs d’attributs, outils indispensables pour cibler précisément les éléments sans alourdir le code HTML.
Sur le plan du HTML, l’accent est mis sur les balises sémantiques et structurelles, essentielles pour l’accessibilité, le référencement naturel et la clarté du document.
La compréhension du rôle de balises comme celles dédiées au contenu principal, aux informations de contact ou aux zones de formulaire permet de produire des pages conformes aux bonnes pratiques actuelles.
Ces QCM favorisent aussi le développement de compétences transversales : capacité d’analyse, lecture critique du code, identification des erreurs courantes et choix de solutions adaptées à un contexte donné.
Ils constituent ainsi un outil efficace d’auto-évaluation et de préparation aux examens, en aidant l’apprenant à consolider ses acquis et à gagner en assurance face aux problématiques courantes du développement web.
Conclusion
L
’ensemble de ces QCM offre une approche structurée et progressive pour renforcer les bases indispensables du HTML et du CSS.
En travaillant régulièrement sur ces questions, l’apprenant développe une meilleure compréhension des mécanismes internes du navigateur et des bonnes pratiques de mise en page.
Cette démarche permet de consolider les connaissances théoriques tout en améliorant la capacité à résoudre des situations concrètes.
L’entraînement régulier favorise une montée en compétence durable, essentielle pour réussir examens, concours ou projets professionnels dans le domaine du développement web.
