HTML Semantic Tags - Solved Practice Questions

Introduction

Semantic HTML tags clearly describe the purpose of different parts of a webpage. Common semantic elements include <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. These tags make HTML structure easier to understand and maintain. HTML semantic tags help to build concepts.

Question 1

Problem Statement

Create a webpage with a semantic <header> containing a website heading.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Header</title>
</head>
<body>

    <header>
        <h1>My Learning Website</h1>
        <p>Learn HTML step by step.</p>
    </header>

</body>
</html>

Output

My Learning Website
Learn HTML step by step.

Step-by-Step Explanation

<header> represents introductory content for a page or section.
The heading and introductory text are placed inside the header.
A page can have more than one header when different sections need their own introductory content.

Question 2

Problem Statement

Create a navigation menu using the semantic <nav> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Navigation</title>
</head>
<body>

    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Courses</a>
        <a href="#">Contact</a>
    </nav>

</body>
</html>

Output

Home   About   Courses   Contact

Step-by-Step Explanation

<nav> represents a section containing navigation links.
<a> creates the individual links.
<nav> helps browsers and assistive technologies understand that these links are navigation.

Question 3

Problem Statement

Create a webpage with a semantic <main> element containing the main heading and paragraph.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Main</title>
</head>
<body>

    <main>

        <h1>Learn HTML</h1>

        <p>
            HTML is used to create the structure of webpages.
        </p>

    </main>

</body>
</html>

Output

Learn HTML

HTML is used to create the structure of webpages.

Step-by-Step Explanation

<main> contains the primary content of the webpage.
A document should generally have only one <main> element.
Content repeated across pages, such as navigation or a footer, normally does not belong inside <main>.

Question 4

Problem Statement

Create a webpage with a semantic <section> for an HTML course.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Section</title>
</head>
<body>

    <section>

        <h2>HTML Course</h2>

        <p>
            Learn HTML elements, attributes, forms, tables, and more.
        </p>

    </section>

</body>
</html>

Output

HTML Course

Learn HTML elements, attributes, forms, tables, and more.

Step-by-Step Explanation

<section> represents a thematic grouping of content.
A section usually has a heading.
It can contain paragraphs, images, links, and other HTML elements.

Question 5

Problem Statement

Create a webpage containing a blog article using the semantic <article> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Article</title>
</head>
<body>

    <article>

        <h2>What is HTML?</h2>

        <p>
            HTML stands for HyperText Markup Language.
        </p>

        <p>
            It is used to structure content on webpages.
        </p>

    </article>

</body>
</html>

Output

What is HTML?

HTML stands for HyperText Markup Language.

It is used to structure content on webpages.

Step-by-Step Explanation

<article> represents a self-contained piece of content.
Blog posts, news articles, and forum posts are common examples.
An article should contain content that can make sense as an independent item.

Question 6

Problem Statement

Create a webpage with an <aside> containing related information next to the main content.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Aside</title>
</head>
<body>

    <main>

        <h1>Learn HTML</h1>

        <p>
            HTML is used to structure webpages.
        </p>

        <aside>
            <h2>Related Topic</h2>
            <p>CSS is used to style HTML webpages.</p>
        </aside>

    </main>

</body>
</html>

Output

Learn HTML

HTML is used to structure webpages.

Related Topic
CSS is used to style HTML webpages.

Step-by-Step Explanation

<aside> contains content related to the main content.
It can be used for related links, tips, advertisements, or side information.
The content inside <aside> is not the primary content.

Question 7

Problem Statement

Create a webpage with a semantic <footer> containing copyright information.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Footer</title>
</head>
<body>

    <main>
        <h1>My Website</h1>

        <p>Welcome to my HTML practice website.</p>
    </main>

    <footer>
        <p>© 2026 My Website. All Rights Reserved.</p>
    </footer>

</body>
</html>

Output

My Website

Welcome to my HTML practice website.

© 2026 My Website. All Rights Reserved.

Step-by-Step Explanation

<footer> represents footer information for a page or section.
It commonly contains copyright information, contact details, or related links.
A page or section can have its own footer.

Question 8

Problem Statement

Create a complete webpage structure using <header>, <nav>, <main>, <section>, and <footer>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Semantic Webpage</title>
</head>
<body>

    <header>
        <h1>Tech Learning</h1>
    </header>

    <nav>
        <a href="#">Home</a>
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">Contact</a>
    </nav>

    <main>

        <section>
            <h2>HTML Course</h2>

            <p>
                Learn HTML from basic elements to practical webpage structures.
            </p>
        </section>

    </main>

    <footer>
        <p>© 2026 Tech Learning</p>
    </footer>

</body>
</html>

Output

Tech Learning

Home   HTML   CSS   Contact

HTML Course

Learn HTML from basic elements to practical webpage structures.

© 2026 Tech Learning

Step-by-Step Explanation

<header> contains the website introduction.
<nav> contains the main navigation links.
<main> contains the primary page content.
<section> groups related course content.
<footer> contains the footer information.

Question 9

Problem Statement

Create a blog webpage containing two independent articles inside the main content.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Blog Articles</title>
</head>
<body>

    <header>
        <h1>My Tech Blog</h1>
    </header>

    <main>

        <article>
            <h2>Introduction to HTML</h2>

            <p>
                HTML provides the basic structure of a webpage.
            </p>
        </article>

        <article>
            <h2>Introduction to CSS</h2>

            <p>
                CSS is used to control the presentation and design of webpages.
            </p>
        </article>

    </main>

    <footer>
        <p>© 2026 My Tech Blog</p>
    </footer>

</body>
</html>

Output

My Tech Blog

Introduction to HTML

HTML provides the basic structure of a webpage.

Introduction to CSS

CSS is used to control the presentation and design of webpages.

© 2026 My Tech Blog

Step-by-Step Explanation

<main> contains the primary blog content.
Each <article> represents an independent piece of content.
The two articles can be understood separately.
<header> and <footer> provide the overall page structure.

Question 10

Problem Statement

Create a complete semantic webpage using <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Complete Semantic HTML</title>
</head>
<body>

    <header>
        <h1>Learn Web Development</h1>
        <p>Practice HTML with solved questions.</p>
    </header>

    <nav>
        <a href="#">Home</a>
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">JavaScript</a>
    </nav>

    <main>

        <section>

            <h2>HTML Practice</h2>

            <article>

                <h3>HTML Semantic Tags</h3>

                <p>
                    Semantic elements clearly describe the purpose
                    of different parts of a webpage.
                </p>

            </article>

            <article>

                <h3>Why Use Semantic HTML?</h3>

                <p>
                    Semantic HTML makes webpage structure easier
                    to understand and maintain.
                </p>

            </article>

        </section>

        <aside>

            <h2>Related Topics</h2>

            <ul>
                <li>HTML Forms</li>
                <li>HTML Tables</li>
                <li>HTML Lists</li>
            </ul>

        </aside>

    </main>

    <footer>
        <p>© 2026 Learn Web Development</p>
    </footer>

</body>
</html>

Output

Learn Web Development
Practice HTML with solved questions.

Home   HTML   CSS   JavaScript

HTML Practice

HTML Semantic Tags
Semantic elements clearly describe the purpose
of different parts of a webpage.

Why Use Semantic HTML?
Semantic HTML makes webpage structure easier
to understand and maintain.

Related Topics
• HTML Forms
• HTML Tables
• HTML Lists

© 2026 Learn Web Development

Step-by-Step Explanation

<header> contains the introductory website content.
<nav> contains navigation links.
<main> contains the primary content.
<section> groups the HTML practice content.
<article> contains independent pieces of information.
<aside> contains related information.
<footer> contains the page’s footer information.
These elements make the structure more meaningful than using <div> everywhere.

Key Takeaways

Semantic tags describe the meaning or purpose of webpage content.
<header> represents introductory content.
<nav> represents navigation links.
<main> contains the primary content.
<section> groups related content.
<article> represents self-contained content.
<aside> contains related or secondary content.
<footer> represents footer information.
Semantic HTML creates a clearer document structure.
Semantic elements can make webpages easier for browsers, developers, and assistive technologies to understand.

Frequently Asked Questions (FAQs)

1. What are semantic HTML tags?

Semantic HTML tags are elements whose names describe the purpose of their content, such as <header>, <nav>, <main>, and <article>.

2. What is the purpose of the `<header>` tag?

<header> contains introductory content for a webpage or a particular section.

3. What is the purpose of `<nav>`?

<nav> identifies a section containing important navigation links.

4. What does the `<main>` element represent?

<main> contains the primary content of a webpage. A document should generally have only one <main> element.

5. What is the difference between `<section>` and `<article>`?

A <section> groups related content, while an <article> represents self-contained content that can generally stand on its own.

6. What is the `<aside>` element used for?

<aside> contains related or secondary information, such as related links, tips, or side content.

7. What is the purpose of `<footer>`?

<footer> contains footer information for a webpage or section, such as copyright information and related links.

8. Are semantic tags required in HTML?

No. A webpage can work without them, but semantic elements provide a clearer and more meaningful structure.

9. Are semantic tags better than using only `<div>` elements?

For appropriate content, yes. Semantic tags communicate the purpose of the content instead of using a generic container everywhere.

10. Do semantic tags automatically change the webpage design?

No. Semantic tags mainly describe structure and meaning. CSS is used to control the visual design.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar

Introduction

Question 1

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 2

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 3

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 4

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 5

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 6

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 7

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 8

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 9

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 10

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Key Takeaways

Frequently Asked Questions (FAQs)

1. What are semantic HTML tags?

2. What is the purpose of the <header> tag?

3. What is the purpose of <nav>?

4. What does the <main> element represent?

5. What is the difference between <section> and <article>?

6. What is the <aside> element used for?

7. What is the purpose of <footer>?

8. Are semantic tags required in HTML?

9. Are semantic tags better than using only <div> elements?

10. Do semantic tags automatically change the webpage design?

Related Posts

2. What is the purpose of the `<header>` tag?

3. What is the purpose of `<nav>`?

4. What does the `<main>` element represent?

5. What is the difference between `<section>` and `<article>`?

6. What is the `<aside>` element used for?

7. What is the purpose of `<footer>`?

9. Are semantic tags better than using only `<div>` elements?