Chapter 8 Beginner 55 Questions

Practice Questions — Semantic HTML - header, nav, main, section, article, footer

← Back to Notes

17 Easy

14 Medium

8 Hard

Topic-Specific Questions

Question 1

Easy

Which tag represents the main navigation menu of a page?

Short for 'navigation'.

<nav>

Question 2

Easy

Which tag should wrap the unique main content of a page?

There should be only one of these per page.

<main>

Question 3

Easy

Convert this div soup to semantic HTML:

<div class="top">Logo</div>
<div class="middle">Content</div>
<div class="bottom">Copyright</div>

Use header, main, and footer.

<header>Logo</header>
<main>Content</main>
<footer>Copyright</footer>

Question 4

Easy

Which tag is used for a self-contained piece of content like a blog post?

It should make sense on its own.

<article>

Question 5

Easy

Create a page footer containing a copyright notice for 'Modern Age Coders' with the current year 2026.

Use footer and copyright entity.

<footer>
  <p>&copy; 2026 Modern Age Coders. All rights reserved.</p>
</footer>

Question 6

Easy

Which tag marks up a date in a machine-readable way?

It has a datetime attribute.

<time>

Question 7

Easy

Wrap this image with a figure and caption 'Figure 1: Our team photo'.

<img src="team.jpg" alt="Our team">

Use figure and figcaption.

<figure>
  <img src="team.jpg" alt="Our team">
  <figcaption>Figure 1: Our team photo</figcaption>
</figure>

Question 8

Easy

Which tag is for content related to but separate from the main content (like a sidebar)?

Think 'aside from the main'.

<aside>

Question 9

Easy

What is wrong with this HTML?

<main>
  <header>Site Logo</header>
  <p>Content</p>
</main>
<footer>Copyright</footer>

Where does the site-wide header belong?

The site header should be OUTSIDE the main tag, not inside. main is only for the unique content.

Question 10

Easy

Wrap this navigation list in a proper semantic tag:

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

Use the navigation tag.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Question 11

Easy

Which semantic tag should you use for a blog post's title, author, and publish date area?

It is the top of the article.

<header> (inside the <article>)

Question 12

Easy

Identify what is wrong:

<main>
  <h1>Welcome</h1>
</main>
<main>
  <h1>More Content</h1>
</main>

There is a rule about how many of this tag a page can have.

A page should have only ONE <main>. Combine them into one main with two sections.

Question 13

Medium

Create a semantic layout for a page with: site header containing nav (Home, Blog), main containing one article with title 'Hello World', and a footer with copyright.

header > nav, main > article, footer.

<header>
  <h1>My Site</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Hello World</h2>
    <p>This is my first blog post!</p>
  </article>
</main>
<footer>
  <p>&copy; 2026 My Site</p>
</footer>

Question 14

Medium

What is the difference between section and article?

Think about whether the content makes sense alone.

article = standalone content that could be reposted elsewhere (blog post). section = a thematic part of a page that only makes sense in context (Features section).

Question 15

Medium

Identify what semantic tag each div should become in this HTML:

<div class="top">logo and menu</div>
<div class="content">
  <div class="post">blog post</div>
  <div class="sidebar">related</div>
</div>
<div class="bottom">copyright</div>

top=header, content=main, post=article, sidebar=aside, bottom=footer.

<header>logo and menu</header>
<main>
  <article>blog post</article>
  <aside>related</aside>
</main>
<footer>copyright</footer>

Question 16

Medium

Why is semantic HTML good for SEO?

Think about what Google sees.

Google reads your HTML to understand page structure. Semantic tags tell Google what is a heading, what is navigation, what is the main content, and what is an article. This helps rank your page correctly.

Question 17

Medium

Build a semantic layout for a news article: the article has a header with h1 and publish time, 2 paragraphs, a figure with image and caption, and an address with the reporter's name.

article > header, p, p, figure, address.

<article>
  <header>
    <h1>Breaking News</h1>
    <time datetime="2026-04-11">11 April 2026</time>
  </header>
  <p>First paragraph of the story.</p>
  <p>More details follow.</p>
  <figure>
    <img src="news.jpg" alt="News photo">
    <figcaption>Photo from the scene.</figcaption>
  </figure>
  <address>Reported by Priya Sharma</address>
</article>

Question 18

Medium

What does the datetime attribute on the time tag do?

It makes the date readable by computers.

It provides a machine-readable version of the date in ISO format (like 2026-04-11), even if the visible text is formatted differently.

Question 19

Medium

Priya wrote this but the page feels wrong semantically. What should the divs become?

<div class="header">
  <div class="title">Blog</div>
</div>
<div class="posts">
  <div class="post">Post 1</div>
  <div class="post">Post 2</div>
</div>

header for the header, main for posts, article for each post.

<header>
  <h1>Blog</h1>
</header>
<main>
  <article>Post 1</article>
  <article>Post 2</article>
</main>

Question 20

Medium

Should every img tag be wrapped in a figure?

Figure is for specific types of content.

No. Use

only for images that are meaningful content (illustrations, diagrams, photos with captions). Decorative images like logos and icons do not need figure.

Question 21

Hard

Build a complete semantic HTML page for a blog with: a site header (logo + nav), main area with 2 blog articles (each with own header and footer), an aside for related posts, and a site footer.

Combine header, nav, main, article, aside, footer.

<!DOCTYPE html>
<html>
<body>
<header>
  <h1>Tech Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <header>
      <h2>Post 1</h2>
      <time datetime="2026-04-10">10 April</time>
    </header>
    <p>First post content.</p>
    <footer>Tags: html</footer>
  </article>
  <article>
    <header>
      <h2>Post 2</h2>
      <time datetime="2026-04-09">9 April</time>
    </header>
    <p>Second post content.</p>
    <footer>Tags: css</footer>
  </article>
  <aside>
    <h3>Popular Posts</h3>
    <ul><li><a href="#">Link</a></li></ul>
  </aside>
</main>
<footer>
  <p>&copy; 2026 Tech Blog</p>
</footer>
</body>
</html>

Question 22

Hard

How do screen readers benefit from semantic HTML?

Screen readers announce things and let users navigate.

Screen readers can announce landmarks (header, nav, main, footer) and let users jump between them. Users can list all headings, skip to main, or find the nav — none of which works with plain divs.

Question 23

Hard

Rohan wrote this and claims it is semantic. What is still wrong?

<main>
  <header>Site Title</header>
  <nav>Menu</nav>
  <div>Article 1</div>
  <div>Article 2</div>
</main>

Two things: site header/nav in wrong place, and divs should be articles.

(1) The site header and nav should be OUTSIDE main, not inside. (2) The divs should be <article> tags since they represent standalone content.

Question 24

Hard

Is it valid to put a

inside an

Yes, and it has a specific purpose.

Yes, absolutely. An

can have its own

containing the article's title, author, and publish date. This is separate from the page's main header.

Mixed & Application Questions

Question 1

Easy

Which tag wraps the main navigation of a site?

Short for navigation.

<nav>

Question 2

Easy

Write a simple semantic structure: header with h1 'Hello', main with a paragraph 'Welcome', and footer with '2026'.

Three top-level tags.

<header>
  <h1>Hello</h1>
</header>
<main>
  <p>Welcome</p>
</main>
<footer>
  <p>2026</p>
</footer>

Question 3

Easy

What is the maximum number of

tags allowed on a page?

There is exactly one allowed.

One (exactly one main per page).

Question 4

Easy

Which tag is for a blog post, news article, or other standalone content?

It could be reposted elsewhere and still make sense.

<article>

Question 5

Easy

What semantic tag should replace the div?

<div>
  <p>&copy; 2026 My Site</p>
</div>

<footer>

Question 6

Medium

Create a semantic section with heading 'Our Services' containing 3 articles (service cards), each with its own h3 and paragraph.

section > h2, article, article, article.

<section>
  <h2>Our Services</h2>
  <article>
    <h3>Web Design</h3>
    <p>Beautiful websites.</p>
  </article>
  <article>
    <h3>App Development</h3>
    <p>Mobile apps for iOS and Android.</p>
  </article>
  <article>
    <h3>SEO</h3>
    <p>Rank higher on Google.</p>
  </article>
</section>

Question 7

Medium

True or false: an

can contain its own

and

Think about blog posts having titles and tags.

True. An article commonly has an inner header (title, author, date) and inner footer (tags, share buttons).

Question 8

Medium

Wrap a date in a time tag: '20 March 2026' with a proper datetime attribute.

ISO format is YYYY-MM-DD.

<time datetime="2026-03-20">20 March 2026</time>

Question 9

Medium

What is div soup?

It describes a common mistake.

Using only

tags for everything on a page instead of semantic tags. It means nothing to browsers, search engines, or screen readers.

Question 10

Medium

Why is this wrong?

<section>
  <p>Just some random paragraphs.</p>
</section>

Section should usually have a heading.

A <section> should have a heading (h1-h6) that names its theme. Without a heading, a plain div is more appropriate.

Question 11

Medium

Create a figure with an image (placeholder) and a caption that says 'Our office building'.

figure > img, figcaption.

<figure>
  <img src="office.jpg" alt="Office building">
  <figcaption>Our office building</figcaption>
</figure>

Question 12

Hard

What is the purpose of the

tag?

Not for any address - only contact info.

It holds contact information for the nearest article or for the whole page — email, phone, or author name.

Question 13

Hard

Write the semantic markup for a product card: an article with a figure (image), h3 (product name), p (description), p (price), and a button (Buy now).

article > figure, h3, p, p, button.

<article>
  <figure>
    <img src="shoes.jpg" alt="Running shoes">
  </figure>
  <h3>Running Shoes</h3>
  <p>Comfortable shoes for daily runs.</p>
  <p>Price: Rs 2499</p>
  <button>Buy Now</button>
</article>

Question 14

Hard

Which three benefits does semantic HTML provide?

Think about search engines, users with disabilities, and other developers.

(1) Better SEO (search engines understand the structure). (2) Better accessibility (screen readers can navigate). (3) Better maintainability (easier to read and edit).

Question 15

Hard

This layout is not properly semantic. List the changes needed:

<div>Logo</div>
<div><ul><li>Home</li></ul></div>
<div>
  <div>Blog post content</div>
</div>
<div>Copyright</div>

5 divs to 5 semantic tags.

(1) First div → header. (2) Second div → nav. (3) Third div → main. (4) Inner div → article. (5) Last div → footer.

Multiple Choice Questions

MCQ 1

Which tag represents the navigation menu of a website?

A. <menu>
B. <nav>
C. <navigation>
D. <links>

Answer: B
B is correct. <nav> wraps the main navigation links of a site. <menu> exists but is rarely used and not for main nav.

MCQ 2

How many

tags should a page have?

A. Zero
B. Exactly one
C. One per section
D. Unlimited

Answer: B
B is correct. A page should have exactly one <main> containing the unique primary content.

MCQ 3

Which tag is for a standalone blog post?

A. <section>
B. <article>
C. <post>
D. <div>

Answer: B
B is correct. <article> is for self-contained content like blog posts, news articles, and product cards. <section> is for thematic groupings within a page.

MCQ 4

Which tag is for content related to but separate from the main content (like a sidebar)?

A. <side>
B. <sidebar>
C. <aside>
D. <extra>

Answer: C
C is correct. <aside> is for tangentially related content — sidebars, pull quotes, related links.

MCQ 5

What tag should wrap an image with a caption?

A. <caption>
B. <figure>
C. <img-caption>
D. <picture>

Answer: B
B is correct. <figure> wraps content (image, diagram, code) that has a caption using <figcaption>.

MCQ 6

Which tag holds a machine-readable date?

A. <date>
B. <time>
C. <datetime>
D. <clock>

Answer: B
B is correct. The <time> tag with a datetime attribute lets browsers and search engines understand dates.

MCQ 7

Which tag is used at the bottom of a page for copyright and site info?

A. <bottom>
B. <footer>
C. <end>
D. <copyright>

Answer: B
B is correct. <footer> wraps the bottom part of a page or section. Commonly holds copyright, contact info, and footer links.

MCQ 8

What is 'div soup'?

A. A type of CSS
B. A popular framework
C. Using only <div> tags instead of semantic tags
D. A way to style divs

Answer: C
C is correct. Div soup is slang for HTML that uses only div tags, giving the page no semantic meaning. Semantic HTML is the fix.

MCQ 9

Which tag is used for the header of a page or article?

A. <head>
B. <top>
C. <header>
D. <h1>

Answer: C
C is correct. <header> is the semantic header tag. <head> is the meta-information section of an HTML document (not visible).

MCQ 10

What is the main benefit of using semantic HTML for SEO?

A. Faster loading
B. Helps search engines understand page structure
C. Automatic translations
D. Better CSS

Answer: B
B is correct. Search engines use semantic tags to understand what parts of your page are navigation, main content, headings, and so on. This helps them rank your page correctly.

MCQ 11

Where should the site-wide header and footer be placed relative to

A. Inside <main>
B. As siblings of <main>
C. Inside <body> but wrapped in <main>
D. Anywhere on the page

Answer: B
B is correct. The site header and footer are NOT part of the main content. They should be siblings of <main> (header above, footer below).

MCQ 12

Can an

contain its own

and

A. No, only the page can have a header
B. Yes, an article can have its own header and footer
C. Only if the article is the only one on the page
D. Only the header, not the footer

Answer: B
B is correct. Header and footer belong to their nearest containing element. An article can have its own header (title, author) and footer (tags, metadata).

MCQ 13

Which is correct for a list of blog posts on a homepage?

A. <main><div class='post'>...</div></main>
B. <main><article>...</article><article>...</article></main>
C. <main><section>Post 1</section><section>Post 2</section></main>
D. <article><main>Post 1</main><main>Post 2</main></article>

Answer: B
B is correct. Each blog post is a standalone piece of content, so wrap each in <article>. The main tag contains all the articles.

MCQ 14

Which tag should you use for the contact info of a page's author?

A. <contact>
B. <address>
C. <info>
D. <footer>

Answer: B
B is correct. <address> is specifically for the author's contact info. It is NOT for random postal addresses that are part of regular content.

MCQ 15

When should you use

over

A. Never
B. When the content has a heading and is a thematic group
C. For every container
D. Only in the main tag

Answer: B
B is correct. Use <section> when you have a thematic group of content, usually with a heading. Use <div> for purely presentational/styling wrappers that have no semantic meaning.

MCQ 16

What is the difference between article and section?

A. They are the same
B. Article is standalone content; section is a thematic part of a page
C. Section is for blog posts; article is for pages
D. Article is bigger than section

Answer: B
B is correct. Article = standalone content that could be reposted elsewhere. Section = a thematic group that only makes sense in context.

MCQ 17

Which semantic tag is best for the author and publish date of a blog post?

A. <aside>
B. <header> (inside the article)
C. <footer>
D. <section>

Answer: B
B is correct. The article's own <header> is the right place for its title, author, and publish date — the intro info for that article.

MCQ 18

Which tag pair is used to add a caption to an image?

A. <caption>...</caption>
B. <figure> with <figcaption>
C. <img-caption>
D. <alt>

Answer: B
B is correct. Wrap the image in <figure> and add a <figcaption> inside for the caption.

MCQ 19

Which is the MOST semantic structure for a news website homepage?

A. <div class='page'><div class='header'>...<div class='body'>...
B. <header><nav>...</nav></header><main><article>...</article></main><footer>...</footer>
C. <main><header>...</header><body>...</body><footer>...</footer></main>
D. <section><section>...</section><section>...</section></section>

Answer: B
B is correct. Proper semantic structure: site header (with nav) at the top, main containing articles, and site footer at the bottom. The header and footer are siblings of main, not inside it.

MCQ 20

Why is semantic HTML better than div soup for accessibility?

A. It is not, they are the same
B. Screen readers can navigate by landmark tags (header, nav, main, footer)
C. Semantic tags load faster
D. Divs don't work in modern browsers

Answer: B
B is correct. Screen readers use semantic landmarks to help users navigate quickly. Blind users can jump directly to the main content, skipping repetitive headers and navs. Divs offer no such shortcut.

MCQ 21

Which of these is the BEST use case for the

A. The main navigation bar
B. A related posts sidebar next to a blog article
C. The page footer
D. The primary heading of the page

Answer: B
B is correct. <aside> is for content that is related to the main content but not essential — a related posts sidebar fits perfectly. Navigation is for <nav>.

MCQ 22

can only exist once per page. True or false?

A. True
B. False - you can have as many articles as you want
C. True - only one article is allowed
D. Only if inside main

Answer: B
B is correct. You can have unlimited <article> tags on a page. Blog homepages often have many articles — one for each post. Only <main> has the one-per-page rule.

MCQ 23

Which statement about semantic HTML is FALSE?

A. It helps SEO
B. It helps accessibility
C. It makes code harder to maintain
D. It gives HTML meaning

Answer: C
C is false (and therefore the correct answer). Semantic HTML makes code EASIER to maintain, not harder. Tags like <article> are self-explanatory compared to <div class="box-3">.

MCQ 24

Which attribute on makes the date machine-readable?

A. date
B. datetime
C. value
D. content

Answer: B
B is correct. <time datetime="2026-04-11">. The datetime attribute holds the ISO-formatted date that computers can parse.

MCQ 25

If a page has a sidebar with related articles beside the main content, which two tags should you use?

A. <main> and <section>
B. <main> and <aside>
C. <article> and <div>
D. <section> and <footer>

Use section for grouping, article for each card, figure for images.

<!DOCTYPE html>
<html>
<head>
  <title>Products</title>
  <style>
    body { font-family: Arial; margin: 0; }
    header, footer { background: #1a1a2e; color: white; padding: 15px 20px; }
    .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; padding: 20px; }
    article { background: white; border: 1px solid #ddd; padding: 15px; border-radius: 8px; }
    figure { margin: 0; }
    figure img { width: 100%; border-radius: 5px; }
    button { background: #22c55e; color: white; border: none; padding: 8px 15px; cursor: pointer; border-radius: 4px; }
  </style>
</head>
<body>
  <header>
    <h1>Shop</h1>
    <nav>
      <a href="/" style="color:white">Home</a>
    </nav>
  </header>
  <main>
    <section>
      <h2 style="padding: 20px;">Our Products</h2>
      <div class="products">
        <article>
          <figure><img src="https://via.placeholder.com/200" alt="Product 1"></figure>
          <h3>Running Shoes</h3>
          <p>Comfortable for daily runs.</p>
          <p><strong>Rs 2499</strong></p>
          <button>Add to Cart</button>
        </article>
        <article>
          <figure><img src="https://via.placeholder.com/200" alt="Product 2"></figure>
          <h3>Backpack</h3>
          <p>Spacious and durable.</p>
          <p><strong>Rs 1299</strong></p>
          <button>Add to Cart</button>
        </article>
        <article>
          <figure><img src="https://via.placeholder.com/200" alt="Product 3"></figure>
          <h3>Headphones</h3>
          <p>Noise cancelling.</p>
          <p><strong>Rs 3999</strong></p>
          <button>Add to Cart</button>
        </article>
        <article>
          <figure><img src="https://via.placeholder.com/200" alt="Product 4"></figure>
          <h3>Water Bottle</h3>
          <p>Keeps water cold for 24 hours.</p>
          <p><strong>Rs 699</strong></p>
          <button>Add to Cart</button>
        </article>
      </div>
    </section>
  </main>
  <footer>
    <p>&copy; 2026 Shop</p>
  </footer>
</body>
</html>

Challenge 8: Convert Div Soup to Semantic HTML

Hard

Take this div-based HTML and rewrite it as fully semantic HTML:

<div id='top'>Logo</div><div id='menu'>...links...</div><div id='content'><div class='card'>Post 1</div><div class='card'>Post 2</div></div><div id='side'>Ads</div><div id='bottom'>Copyright</div>

Sample Input

The div-based HTML above

Sample Output

Fully semantic version with header, nav, main, article, aside, footer.

Preserve the layout but use only semantic tags (no divs).

<!DOCTYPE html>
<html>
<body>
  <header>
    <h1>Site Logo</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Post 1</h2>
      <p>First post content.</p>
    </article>
    <article>
      <h2>Post 2</h2>
      <p>Second post content.</p>
    </article>
    <aside>
      <h3>Ads</h3>
      <p>Advertisement area.</p>
    </aside>
  </main>
  <footer>
    <p>&copy; 2026 My Site</p>
  </footer>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass