Quelle est la différence entre une liste ordonnée <ol> et une liste non ordonnée <ul> ?

Bonne réponse : affiche des nombres/lettres, affiche des puces. <ol> (ordered list) génère une liste numérotée (1, 2, 3 ou A, B, C...). <ul> (unordered list) génère une liste avec des puces (•, ○, ■).

HTML Débutant — Balises et structure

Q: Que signifie l'acronyme HTML ?

Bonne réponse : HyperText Markup Language. HTML signifie HyperText Markup Language. C'est le langage de balisage standard utilisé pour créer et structurer le contenu des pages web.

Q: Quelle est la structure de base minimale d'un document HTML5 ?

Bonne réponse : TitreContenu. La structure minimale HTML5 comprend : <!DOCTYPE html> (déclaration du type de document), <html> (élément racine), <head> (métadonnées), <title> (titre de l'onglet), et <body> (contenu visible).

Q: Quelle balise HTML est utilisée pour créer un lien hypertexte ?

Bonne réponse : . La balise <a> (anchor) permet de créer des liens hypertexte. L'attribut href (hypertext reference) spécifie la destination du lien : <a href="https://exemple.com">Texte</a>.

Q: Comment insère-t-on une image dans une page HTML ?

Bonne réponse : . La balise <img> est auto-fermante. L'attribut src (source) indique le chemin de l'image, et l'attribut alt fournit un texte alternatif (obligatoire pour l'accessibilité).

Q: Quelle balise HTML5 est utilisée pour définir l'en-tête d'une page ou d'une section ?

Bonne réponse : . La balise <header> représente l'en-tête d'une page ou d'une section. Elle contient généralement des titres, logos, navigation. À ne pas confondre avec <head> qui contient les métadonnées.

Q: Quelle balise HTML5 définit le pied de page d'une page ou d'une section ?

Bonne réponse : . La balise <footer> représente le pied de page. Elle contient généralement des informations de copyright, mentions légales, liens de contact, etc.

Q: Quelles balises HTML permettent de créer des titres de différents niveaux ?

Bonne réponse : à. Les balises <h1> à <h6> représentent les titres de différents niveaux. <h1> est le plus important (titre principal), <h6> le moins important.

Q: Comment créer un paragraphe en HTML ?

Bonne réponse : Texte. La balise <p> (paragraph) est utilisée pour définir un paragraphe de texte. Les navigateurs ajoutent automatiquement des marges avant et après chaque paragraphe.

Q: Quelle balise HTML permet de créer une liste à puces (non ordonnée) ?

Bonne réponse : . La balise <ul> (unordered list) crée une liste à puces. Chaque élément de la liste est défini par la balise <li> (list item).

Html Debutant Quiz-Html-Debutant Balises-Html Structure-Html Formulaires-Html Tableaux-Html Liens-Hypertexte Images-Html Html5 Semantique Qcm-Html-Debutant Questions-Entretien-Html Front-End

Débutant 🔀 Mixte 20 questions ⏱ 15 min

📝

HTML Débutant — Balises et structure

20 questions essentielles HTML pour débutant : balises de base, structure de document, formulaires, tableaux, liens, images et sémantique HTML5. Idéal pour valider les bases du développement web.

20 questions ⏱ ~15 min Niveau Débutant

Publié/Développé par Mezgani Said

Développeur web full‑stack et formateur spécialisé en Angular, TypeScript et Node.js, il partage sur AngularForAll des ressources complètes pour les développeurs : tutoriels pratiques, guides pas‑à‑pas, outils gratuits, exercices, QCM techniques et retours d’expérience issus de projets réels (SaaS, micro‑frontends, architectures modulaires, applications d’entreprise).
Le site couvre l’ensemble de l’écosystème web : front‑end, intégration HTML/CSS, Composants réutilisables, SEO, back‑end, cloud, IA, CLI, productivité, bien‑être, outils web et métiers du digital.
Un espace pensé pour générer, apprendre, progresser et développer des projets modernes avec des bonnes pratiques professionnelles.

Banque de révision : les 25 questions corrigées

Voici l'intégralité des 25 questions de « HTML Débutant — Balises et structure », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.

HyperText Markup Language (bonne réponse)
HighTech Modern Language
Hyper Transfer Markup Language
Home Tool Markup Language

Explication : HTML signifie HyperText Markup Language. C'est le langage de balisage standard utilisé pour créer et structurer le contenu des pages web.

Le "HyperText" fait référence aux liens qui connectent les pages web entre elles.

TitreContenu (bonne réponse)

Explication : La structure minimale HTML5 comprend : <!DOCTYPE html> (déclaration du type de document), <html> (élément racine), <head> (métadonnées), <title> (titre de l'onglet), et <body> (contenu visible).

La déclaration <!DOCTYPE html> est obligatoire pour activer le mode standard des navigateurs.

(bonne réponse)

Explication : La balise <a> (anchor) permet de créer des liens hypertexte. L'attribut href (hypertext reference) spécifie la destination du lien : <a href="https://exemple.com">Texte</a>.

Utilisez target="_blank" pour ouvrir le lien dans un nouvel onglet.

(bonne réponse)

Explication : La balise <img> est auto-fermante. L'attribut src (source) indique le chemin de l'image, et l'attribut alt fournit un texte alternatif (obligatoire pour l'accessibilité).

L'attribut alt est essentiel pour l'accessibilité et le SEO. Décrivez ce que montre l'image.

(bonne réponse)

Explication : La balise <header> représente l'en-tête d'une page ou d'une section. Elle contient généralement des titres, logos, navigation. À ne pas confondre avec <head> qui contient les métadonnées.

Une page peut avoir plusieurs balises <header> (une pour chaque section).

(bonne réponse)

Explication : La balise <footer> représente le pied de page. Elle contient généralement des informations de copyright, mentions légales, liens de contact, etc.

Comme pour <header>, on peut avoir plusieurs <footer> dans une page.

à
à (bonne réponse)
à
à

Explication : Les balises <h1> à <h6> représentent les titres de différents niveaux. <h1> est le plus important (titre principal), <h6> le moins important.

Il est recommandé de n'avoir qu'un seul <h1> par page pour le SEO et l'accessibilité.

Texte
Texte (bonne réponse)
Texte
Texte

Explication : La balise <p> (paragraph) est utilisée pour définir un paragraphe de texte. Les navigateurs ajoutent automatiquement des marges avant et après chaque paragraphe.

Évitez d'utiliser <br> multiples pour créer des paragraphes ; utilisez <p> pour une meilleure sémantique.

(bonne réponse)

Explication : La balise <ul> (unordered list) crée une liste à puces. Chaque élément de la liste est défini par la balise <li> (list item).

Pour une liste numérotée (ordonnée), utilisez <ol>. Les puces sont personnalisables avec CSS.

affiche des nombres/lettres, affiche des puces (bonne réponse)
est pour les listes horizontales, pour verticales
ne peut contenir que du texte, peut contenir des images
Il n'y a pas de différence

Explication : <ol> (ordered list) génère une liste numérotée (1, 2, 3 ou A, B, C...). <ul> (unordered list) génère une liste avec des puces (•, ○, ■).

Utilisez <ol> quand l'ordre est important (recettes, classements), <ul> pour des listes sans ordre particulier.

(bonne réponse)

Explication : La balise <hr> (horizontal rule) crée une ligne de séparation horizontale. C'est une balise auto-fermante qui n'a pas de balise de fermeture.

<hr> peut être stylisée avec CSS (couleur, épaisseur, style).

(bonne réponse)

Explication : La balise <br> (line break) crée un simple saut de ligne. C'est une balise auto-fermante. Elle est utile pour les adresses, les poèmes, etc.

N'abusez pas de <br> pour créer des espaces verticaux ; utilisez plutôt les marges CSS.

ou (bonne réponse)

Explication : <b> (bold) met le texte en gras sans signification sémantique particulière. <strong> met aussi en gras mais indique que le texte a une importance particulière (accessibilité, SEO).

Préférez <strong> pour l'importance sémantique, <b> pour un simple style visuel.

ou (bonne réponse)

Explication : <i> (italic) met le texte en italique sans signification sémantique. <em> (emphasis) met aussi en italique mais indique une emphase sémantique (accessibilité).

Les lecteurs d'écran changent le ton de voix pour <em>, mais pas pour <i>.

Une information supplémentaire qui modifie le comportement d'une balise (bonne réponse)
Une autre balise HTML
Une propriété CSS
Un commentaire dans le code

Explication : Les attributs HTML fournissent des informations supplémentaires sur les éléments HTML. Ils sont placés dans la balise ouvrante, sous forme nom="valeur". Exemple : <img src="image.jpg" alt="description">.

Tous les éléments HTML peuvent avoir des attributs. Certains sont globaux (class, id, style), d'autres spécifiques (src, href, alt).

Fournir un texte alternatif décrivant l'image (accessibilité, SEO) (bonne réponse)
Définir la largeur de l'image
Spécifier le chemin de l'image
Ajouter une légende à l'image

Explication : L'attribut alt (alternatif) fournit un texte descriptif de l'image. Il est affiché si l'image ne charge pas, et est utilisé par les lecteurs d'écran pour les malvoyants. Il est obligatoire pour une bonne accessibilité.

Pour une image décorative, utilisez alt="" (vide) pour que les lecteurs d'écran l'ignorent.

(bonne réponse)

Explication : La balise <div> (division) est un conteneur générique de niveau bloc. Elle est utilisée pour regrouper des éléments et appliquer du CSS ou du JavaScript.

Pour un conteneur en ligne (inline), utilisez <span>. Contrairement à <div>, <span> ne crée pas de saut de ligne.

(bonne réponse)

Explication : La balise <table> crée un tableau. Les lignes sont définies avec <tr> (table row), les cellules avec <td> (table data) et les en-têtes avec <th> (table header).

Utilisez <thead>, <tbody>, <tfoot> pour structurer sémantiquement votre tableau.

(bonne réponse)

Explication : La balise <form> définit un formulaire HTML utilisé pour collecter des données utilisateur. Elle contient des champs comme <input>, <select>, <textarea>, etc.

Les attributs action (où envoyer les données) et method (GET ou POST) sont importants pour le fonctionnement du formulaire.

(bonne réponse)

Explication : La balise <input type="text"> crée un champ de saisie de texte sur une seule ligne. Pour du texte multiligne, utilisez <textarea>.

Utilisez placeholder pour afficher un texte indicatif, et name pour identifier le champ lors de l'envoi du formulaire.

(bonne réponse)

Explication : La balise <input type="checkbox"> crée une case à cocher. Utilisez l'attribut checked pour qu'elle soit cochée par défaut.

Pour permettre plusieurs sélections, donnez le même name à plusieurs checkboxes.

(bonne réponse)

Explication : La balise <input type="radio"> crée un bouton radio. Pour qu'ils soient mutuellement exclusifs (un seul sélectionnable), donnez le même attribut name à tous les boutons radio du groupe.

Utilisez checked pour présélectionner un bouton radio par défaut.

avec (bonne réponse)
avec

Explication : Une liste déroulante se crée avec <select> et ses options avec <option>. Exemple : <select><option>Option 1</option></select>.

L'attribut multiple permet la sélection multiple. L'attribut selected présélectionne une option.

(bonne réponse)
// commentaire
/* commentaire */
# commentaire

Explication : Les commentaires HTML s'écrivent . Ils ne sont pas affichés dans la page mais sont visibles dans le code source. Utiles pour documenter le code.

Les commentaires peuvent être sur plusieurs lignes. Ils sont ignorés par les navigateurs.

pour du contenu autonome (post, actualité), pour regrouper des contenus thématiques (bonne réponse)
est plus grand que
est pour les blogs, pour les sites vitrines
Il n'y a pas de différence

Explication : <article> représente un contenu indépendant et autonome (article de blog, actualité, commentaire) qui pourrait être distribué séparément. <section> regroupe des contenus thématiques à l'intérieur d'une page.

Si vous hésitez, demandez-vous : "Ce contenu a-t-il du sens tout seul ?" Si oui, utilisez <article>. Sinon, <section>.