HTML Junior — Sémantique et accès

Q: Quelle est la bonne déclaration DOCTYPE pour un document HTML5 ?

Bonne réponse : . La déclaration DOCTYPE pour HTML5 est simplement <!DOCTYPE html>. Elle doit être placée tout en haut du document, avant la balise <html>.

Q: Que contient généralement la balise <head> d'une page HTML ?

Bonne réponse : Les métadonnées, le titre, les liens CSS, les scripts. La balise <head> contient des informations sur la page qui ne sont pas affichées directement : <title>, <meta>, <link> pour les CSS, <script>, etc.

Q: Comment définit-on le titre d'une page qui apparaît dans l'onglet du navigateur ?

Bonne réponse : Mon Titre. La balise <title> placée dans <head> définit le titre de la page, affiché dans l'onglet du navigateur, les favoris et les résultats de recherche.

Q: Quelle balise HTML5 est utilisée pour la navigation principale du site (menu) ?

Bonne réponse : . La balise <nav> (navigation) regroupe les liens de navigation principaux du site. Elle contient généralement des listes de liens (<ul> + <li> + <a>).

Q: Quelle balise HTML5 représente un contenu indépendant comme un article de blog, une actualité ou un commentaire ?

Bonne réponse : . La balise <article> représente un contenu autonome et indépendant, qui pourrait être distribué ou réutilisé séparément (article de blog, actualité, post de forum, commentaire).

Q: Quelle balise HTML5 est utilisée pour regrouper du contenu thématique (souvent avec un titre) ?

Bonne réponse : . La balise <section> regroupe un contenu thématique, généralement avec un titre (<h1> à <h6>). Exemple : les différents chapitres d'un document.

Q: Quelle balise HTML5 représente le contenu principal d'un document (unique par page) ?

Bonne réponse : . La balise <main> représente le contenu principal unique d'un document. Il ne doit y avoir qu'un seul <main> par page. Il exclut les éléments répétés (navigation, header, footer).

Q: Quelle balise HTML5 est utilisée pour du contenu lié indirectement au contenu principal (barre latérale, publicité) ?

Bonne réponse : . La balise <aside> représente du contenu indirectement lié au contenu principal : barre latérale, publicités, notes de bas de page, citations, etc.

Q: Comment crée-t-on un lien qui ouvre une nouvelle page dans un nouvel onglet ?

Bonne réponse : Lien. L'attribut target="_blank" ouvre le lien dans un nouvel onglet (ou nouvelle fenêtre selon la configuration du navigateur).

Q: Comment crée-t-on une ancre (lien interne vers un élément de la même page) ?

Bonne réponse : Aller à la section 1 puis .... Pour créer une ancre : 1) Donnez un id à l'élément cible (<div id="section1">). 2) Créez un lien avec href="#section1". Le # indique un lien interne vers l'ID correspondant.

Html Junior Quiz-Html-Junior Html5 Semantique Accessibilite-Web Wai-Aria Formulaires-Avances Balises-Video Balises-Audio Responsive-Design Qcm-Html-Junior Questions-Entretien-Html-Junior Seo-Html

Junior 🔀 Mixte 20 questions ⏱ 15 min

📝

HTML Junior — Sémantique et accès

20 questions HTML niveau junior : balises sémantiques HTML5, accessibilité (WAI-ARIA), formulaires avancés, médias (vidéo/audio), responsive design et bonnes pratiques du développement web moderne.

20 questions ⏱ ~15 min Niveau Junior

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 Junior — Sémantique et accès », 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.

(bonne réponse)

Explication : La déclaration DOCTYPE pour HTML5 est simplement <!DOCTYPE html>. Elle doit être placée tout en haut du document, avant la balise <html>.

Cette déclaration est insensible à la casse, mais on écrit généralement en minuscules.

Les métadonnées, le titre, les liens CSS, les scripts (bonne réponse)
Le contenu visible de la page
Les images et vidéos
Les formulaires

Explication : La balise <head> contient des informations sur la page qui ne sont pas affichées directement : <title>, <meta>, <link> pour les CSS, <script>, etc.

Le contenu visible de la page va dans <body>, pas dans <head>.

Mon Titre (bonne réponse)
Mon Titre
Mon Titre
Mon Titre

Explication : La balise <title> placée dans <head> définit le titre de la page, affiché dans l'onglet du navigateur, les favoris et les résultats de recherche.

Le titre doit être court, descriptif et unique pour chaque page (important pour le SEO).

(bonne réponse)

Explication : La balise <nav> (navigation) regroupe les liens de navigation principaux du site. Elle contient généralement des listes de liens (<ul> + <li> + <a>).

Tous les groupes de liens ne doivent pas être dans <nav> (ex: liens de footer, liens sociaux).

(bonne réponse)

Explication : La balise <article> représente un contenu autonome et indépendant, qui pourrait être distribué ou réutilisé séparément (article de blog, actualité, post de forum, commentaire).

Un article peut contenir des titres (<h1> à <h6>), des paragraphes, des images, etc.

(bonne réponse)

Explication : La balise <section> regroupe un contenu thématique, généralement avec un titre (<h1> à <h6>). Exemple : les différents chapitres d'un document.

Si vous avez besoin d'un conteneur uniquement pour le style, utilisez <div> plutôt que <section>.

(bonne réponse)

Explication : La balise <main> représente le contenu principal unique d'un document. Il ne doit y avoir qu'un seul <main> par page. Il exclut les éléments répétés (navigation, header, footer).

Le <main> ne doit pas être descendant d'un <article>, <aside>, <footer>, <header> ou <nav>.

(bonne réponse)

Explication : La balise <aside> représente du contenu indirectement lié au contenu principal : barre latérale, publicités, notes de bas de page, citations, etc.

Dans un article, <aside> peut contenir une biographie de l'auteur, des liens connexes, etc.

Lien (bonne réponse)
Lien
Lien
Lien

Explication : L'attribut target="_blank" ouvre le lien dans un nouvel onglet (ou nouvelle fenêtre selon la configuration du navigateur).

Ajoutez rel="noopener noreferrer" pour des raisons de sécurité lorsque vous utilisez target="_blank".

Aller à la section 1 puis ... (bonne réponse)
Aller à la section 1
...
Aller

Explication : Pour créer une ancre : 1) Donnez un id à l'élément cible (<div id="section1">). 2) Créez un lien avec href="#section1". Le # indique un lien interne vers l'ID correspondant.

Les ancres fonctionnent aussi vers d'autres pages : <a href="autrepage.html#section1">.

dans (bonne réponse)

Explication : Le favicon se définit dans <head> avec <link rel="icon" type="image/x-icon" href="chemin/favicon.ico">. Les formats PNG, SVG sont aussi supportés.

Placez un fichier nommé favicon.ico à la racine du site ; la plupart des navigateurs le trouveront automatiquement.

Titre ... (bonne réponse)
Titre ...
Titre ...
Titre

Explication : <fieldset> regroupe des champs de formulaire, et <legend> fournit une légende (titre) pour ce groupe. Exemple typique : coordonnées personnelles, adresse de livraison, etc.

<fieldset> dessine généralement une bordure autour du groupe. Utile pour l'accessibilité.

(bonne réponse)

Explication : La balise <label> associe un libellé à un champ de formulaire. L'attribut for doit correspondre à l'id du champ. Exemple : <label for="nom">Nom :</label> <input id="nom">.

Cliquer sur un <label> focus le champ associé (meilleure expérience utilisateur).

Texte par défaut (bonne réponse)

Explication : La balise <textarea> crée une zone de texte multiligne. Les attributs rows et cols définissent sa taille. Le contenu entre les balises est le texte par défaut.

Contrairement à <input>, <textarea> est une balise avec contenu, pas auto-fermante.

(bonne réponse)

Explication : La balise <progress> affiche une barre de progression. value indique la progression actuelle, max la valeur maximale. Exemple : <progress value="70" max="100">70%</progress>.

Pour afficher une mesure (comme un score ou une jauge), utilisez <meter> plutôt que <progress>.

Les deux réponses A et B sont correctes (bonne réponse)

Explication : La balise <video> permet d'intégrer nativement des vidéos. On peut utiliser src directement ou la balise <source> pour plusieurs formats. L'attribut controls ajoute les commandes de lecture.

Fournissez plusieurs formats (mp4, webm, ogg) pour la compatibilité entre navigateurs.

Les deux réponses A et B sont correctes (bonne réponse)

Explication : La balise <audio> fonctionne comme <video>. L'attribut controls affiche les commandes de lecture (play/pause, volume). On peut aussi utiliser <source> pour plusieurs formats.

Attributs utiles : autoplay (attention aux navigateurs qui bloquent l'autoplay), loop (répétition), muted (muet).

(bonne réponse)

Explication : La balise <pre> (preformatted text) affiche le texte exactement tel qu'il est écrit, avec les espaces, tabulations et sauts de ligne. Utilisez-la pour du code source ou de la poésie.

<pre> utilise généralement une police à chasse fixe (monospace).

(bonne réponse)

Explication : <blockquote> représente une citation longue, généralement affichée avec une marge (indentation). Pour les citations courtes dans le texte, utilisez <q>.

Utilisez l'attribut cite pour donner l'URL de la source de la citation.

HTML (bonne réponse)

Explication : La balise <abbr> (abbreviation) permet de définir une abréviation. L'attribut title fournit la signification complète, affichée au survol. Exemple : <abbr title="World Wide Web">WWW</abbr>.

La balise <acronym> est dépréciée. Utilisez toujours <abbr>.

(bonne réponse)

Explication : Une structure HTML5 typique : <header> (en-tête), <nav> (navigation), <main> (contenu principal), <article> (article), <aside> (barre latérale), <footer> (pied de page).

Ces balises sémantiques améliorent le SEO et l'accessibilité. Utilisez-les plutôt que des <div> génériques.

(bonne réponse)

Explication : L'attribut booléen required rend un champ de formulaire obligatoire. Le formulaire ne pourra pas être envoyé tant que ce champ n'est pas rempli.

L'attribut required fonctionne avec <input>, <select>, et <textarea>.

(bonne réponse)

Explication : <code> est utilisé pour afficher du code informatique en police monospace. Pour du code sur plusieurs lignes, combinez-le avec <pre> : <pre><code>...</code></pre>.

<samp> = sortie de programme, <kbd> = saisie utilisateur (clavier), <var> = variable.

(bonne réponse)

Explication : L'attribut colspan (column span) fusionne des cellules sur plusieurs colonnes. Exemple : <td colspan="2"> occupe l'espace de 2 colonnes.

Pour fusionner verticalement, utilisez rowspan. Exemple : <td rowspan="3"> fusionne 3 lignes.

(bonne réponse)

Explication : La balise <caption> définit la légende (titre) d'un tableau. Elle doit être placée immédiatement après la balise <table> ouvrante.

La légende est affichée centrée au-dessus du tableau par défaut, mais peut être stylisée avec CSS.

HTML Junior — Sémantique et accès

Partager

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

Q1. Quelle est la bonne déclaration DOCTYPE pour un document HTML5 ?

Q2. Que contient généralement la balise &lt;head&gt; d'une page HTML ?

Q3. Comment définit-on le titre d'une page qui apparaît dans l'onglet du navigateur ?

Q4. Quelle balise HTML5 est utilisée pour la navigation principale du site (menu) ?

Q5. Quelle balise HTML5 représente un contenu indépendant comme un article de blog, une actualité ou un commentaire ?

Q6. Quelle balise HTML5 est utilisée pour regrouper du contenu thématique (souvent avec un titre) ?

Q7. Quelle balise HTML5 représente le contenu principal d'un document (unique par page) ?

Q8. Quelle balise HTML5 est utilisée pour du contenu lié indirectement au contenu principal (barre latérale, publicité) ?

Q9. Comment crée-t-on un lien qui ouvre une nouvelle page dans un nouvel onglet ?

Q10. Comment crée-t-on une ancre (lien interne vers un élément de la même page) ?

Q11. Comment ajouter un favicon (icône dans l'onglet du navigateur) ?

Q12. Comment regrouper visuellement plusieurs champs d'un formulaire avec une légende ?

Q13. Quelle balise HTML associe un libellé (texte) à un champ de formulaire ?

Q14. Comment créer une zone de texte multiligne (textarea) ?

Q15. Quelle balise HTML permet d'afficher une barre de progression ?

Q16. Comment intégrer une vidéo dans une page HTML5 sans plugin ?

Q17. Comment intégrer un fichier audio dans une page HTML5 ?

Q18. Quelle balise HTML est utilisée pour le texte qui ne respecte pas la casse (affiche tel quel avec espaces) ?

Q19. Quelle balise HTML est utilisée pour les citations longues (bloc indenté) ?

Q20. Quelle balise HTML est utilisée pour définir une abréviation (avec explication au survol) ?

Q21. Comment structurer une page HTML avec les nouvelles balises sémantiques HTML5 ?

Q22. Comment rendre un champ de formulaire obligatoire ?

Q23. Quelle balise HTML est utilisée pour afficher du code informatique (police monospace) ?

Q24. Comment fusionner deux cellules horizontalement dans un tableau HTML ?

Q25. Quelle balise HTML est utilisée pour ajouter une légende à un tableau ?

Voir aussi

Explorer par mot clé