Semantic HTML Structure Mastery Quiz Quiz

1. Identifying Landmark Elements

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

   1. u003Cnavu003E
   2. u003Cmainu003E
   3. u003Casideu003E
   4. u003Cfigcaptionu003E
   5. u003Cfooteru003E

2. The Role of u003Cheaderu003E

   What is the primary purpose of the u003Cheaderu003E element in semantic HTML?

   1. To group introductory content, logos, and main navigation at the top of a page
   2. To set the page's title and metadata
   3. To create a section for user comments
   4. To display captions for images or figures
   5. To define the main content area of a section

3. Distinguishing Semantic from Non-Semantic

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

   1. u003Cdivu003E
   2. u003Cfooteru003E
   3. u003Csectionu003E
   4. u003Carticleu003E
   5. u003Cnavu003E

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?

   1. u003Cmainu003E
   2. u003Casideu003E
   3. u003Carticleu003E
   4. u003Cnavu003E
   5. u003Cspanu003E

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?

   1. u003Carticleu003E
   2. u003Cdetailsu003E
   3. u003Csectionu003E
   4. u003Cdtu003E
   5. u003Cfooteru003E

6. Purpose of u003Cfigcaptionu003E

   In the code snippet u003Cfigureu003Eu003Cimg src='img.jpg'u003Eu003Cfigcaptionu003EA mountain viewu003C/figcaptionu003Eu003C/figureu003E, what does the u003Cfigcaptionu003E element provide?

   1. A caption or description for the image or figure
   2. A heading for the section
   3. A navigation bar for related images
   4. A sidebar for additional notes
   5. A table of contents

7. Heading Hierarchy

   Which is the correct guideline for using heading elements (u003Ch1u003E to u003Ch6u003E) in semantic HTML?

   1. Use one u003Ch1u003E per page for the main topic, then organize subtopics with lower-level headings
   2. Use u003Ch1u003E tags for every paragraph
   3. Use headings only for styling, regardless of order
   4. Never use more than two heading levels
   5. Place headings inside the u003Cfooteru003E element

8. The Function of u003Casideu003E

   What type of content should be placed inside an u003Casideu003E element?

   1. Content tangentially related to the main content, such as sidebars or related links
   2. The primary text and images of the page
   3. Main navigation links
   4. Lists of key-value pairs
   5. Audio and video controls

9. Semantic Benefits for Accessibility

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

   1. By providing meaningful structure and landmarks that help screen readers navigate content
   2. By adding decorative color and fonts
   3. By speeding up page loading
   4. By disabling keyboard navigation
   5. By storing user preferences

10. Lists and Their Types

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

    1. u003Cdlu003E and u003Cdtu003E/u003Cddu003E
    2. u003Culu003E and u003Cliu003E
    3. u003Colu003E and u003Cliu003E
    4. u003Csectionu003E and u003Cpu003E
    5. u003Cheaderu003E and u003Ch1u003E