Semantic HTML Structure Mastery Quiz — Questions & Answers

This quiz contains 10 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Identifying Landmark Elements

   Which semantic HTML tag best represents the main navigation links of a website?

   • <nav>
   • <main>
   • <aside>
   • <figcaption>
   • <footer>
   Show correct answer

   Correct answer: <nav>

2. Question 2: The Role of <header>

   What is the primary purpose of the <header> element in semantic HTML?

   • To group introductory content, logos, and main navigation at the top of a page
   • To set the page's title and metadata
   • To create a section for user comments
   • To display captions for images or figures
   • To define the main content area of a section
   Show correct answer

   Correct answer: To group introductory content, logos, and main navigation at the top of a page

3. Question 3: Distinguishing Semantic from Non-Semantic

   Which of the following elements is NON-semantic, providing no information about its contents?

   • <div>
   • <footer>
   • <section>
   • <article>
   • <nav>
   Show correct answer

   Correct answer: <div>

4. Question 4: Choosing the Right Main Content Tag

   When you want to identify the primary topic or central content of a web page, which tag should you use?

   • <main>
   • <aside>
   • <article>
   • <nav>
   • <span>
   Show correct answer

   Correct answer: <main>

5. Question 5: Self-contained Content

   Suppose you are marking up a blog post that could stand alone or be shared. Which semantic tag is most appropriate?

   • <article>
   • <details>
   • <section>
   • <dt>
   • <footer>
   Show correct answer

   Correct answer: <article>

6. Question 6: Purpose of <figcaption>

   In the code snippet <figure><img src='img.jpg'><figcaption>A mountain view</figcaption></figure>, what does the <figcaption> element provide?

   • A caption or description for the image or figure
   • A heading for the section
   • A navigation bar for related images
   • A sidebar for additional notes
   • A table of contents
   Show correct answer

   Correct answer: A caption or description for the image or figure

7. Question 7: Heading Hierarchy

   Which is the correct guideline for using heading elements (<h1> to <h6>) in semantic HTML?

   • Use one <h1> per page for the main topic, then organize subtopics with lower-level headings
   • Use <h1> tags for every paragraph
   • Use headings only for styling, regardless of order
   • Never use more than two heading levels
   • Place headings inside the <footer> element
   Show correct answer

   Correct answer: Use one <h1> per page for the main topic, then organize subtopics with lower-level headings

8. Question 8: The Function of <aside>

   What type of content should be placed inside an <aside> element?

   • Content tangentially related to the main content, such as sidebars or related links
   • The primary text and images of the page
   • Main navigation links
   • Lists of key-value pairs
   • Audio and video controls
   Show correct answer

   Correct answer: Content tangentially related to the main content, such as sidebars or related links

9. Question 9: Semantic Benefits for Accessibility

   How do semantic HTML elements enhance web accessibility for users who rely on assistive technologies?

   • By providing meaningful structure and landmarks that help screen readers navigate content
   • By adding decorative color and fonts
   • By speeding up page loading
   • By disabling keyboard navigation
   • By storing user preferences
   Show correct answer

   Correct answer: By providing meaningful structure and landmarks that help screen readers navigate content

10. Question 10: Lists and Their Types

    Which semantic HTML tag pair would you use for a list of definitions and their explanations?

    • <dl> and <dt>/<dd>
    • <ul> and <li>
    • <ol> and <li>
    • <section> and <p>
    • <header> and <h1>
    Show correct answer

    Correct answer: <dl> and <dt>/<dd>