HTML Layout – Solved Practice Questions

By /

Introduction

An HTML layout defines the structure of a webpage using semantic elements such as header, nav, main, section, article, aside, and footer. A well-structured layout improves readability, accessibility, and SEO. In this chapter, you’ll practice creating simple HTML layouts through beginner-friendly solved examples.

Question 1

Problem Statement

Create a basic webpage layout using semantic HTML elements.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Layout</title>
</head>
<body>

    <header>
        <h1>My Website</h1>
    </header>

    <nav>
        Home | About | Contact
    </nav>

    <main>
        <h2>Welcome</h2>
        <p>This is the main content area.</p>
    </main>

    <footer>
        <p>© 2026 My Website</p>
    </footer>

</body>
</html>

Output

My Website

Home | About | Contact

Welcome

This is the main content area.

© 2026 My Website

Step-by-Step Explanation

  • <header> contains the website heading.
  • <nav> contains navigation links.
  • <main> holds the main content.
  • <footer> contains copyright information.

Question 2

Problem Statement

Create a webpage with a header and footer.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Header and Footer</title>
</head>
<body>

    <header>

        <h1>HTML Tutorial</h1>

    </header>

    <p>Welcome to the HTML course.</p>

    <footer>

        <p>Copyright © 2026</p>

    </footer>

</body>
</html>

Output

HTML Tutorial

Welcome to the HTML course.

Copyright © 2026

Step-by-Step Explanation

  • <header> appears at the top of the webpage.
  • <footer> appears at the bottom.
  • They organize the webpage structure.

Question 3

Problem Statement

Create a webpage with a navigation section.

HTML Code

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

    <header>

        <h1>My Blog</h1>

    </header>

    <nav>

        <a href="#">Home</a> |

        <a href="#">Articles</a> |

        <a href="#">Contact</a>

    </nav>

</body>
</html>

Output

My Blog

Home | Articles | Contact

Step-by-Step Explanation

  • <nav> groups navigation links.
  • Navigation helps users move between pages.
  • Links are placed inside the navigation section.

Question 4

Problem Statement

Create a webpage using the <section> element.

HTML Code

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

    <section>

        <h2>About HTML</h2>

        <p>HTML is the standard markup language for web pages.</p>

    </section>

</body>
</html>

Output

About HTML

HTML is the standard markup language for web pages.

Step-by-Step Explanation

  • <section> groups related content.
  • Each section usually has its own heading.
  • It improves page organization.

Question 5

Problem Statement

Create a webpage using the <article> element.

HTML Code

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

    <article>

        <h2>HTML Basics</h2>

        <p>HTML is used to create web pages.</p>

    </article>

</body>
</html>

Output

HTML Basics

HTML is used to create web pages.

Step-by-Step Explanation

  • <article> represents independent content.
  • It is commonly used for blog posts and news articles.
  • An article can be shared independently.

Question 6

Problem Statement

Create a webpage using the <aside> element.

HTML Code

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

    <main>

        <h2>HTML Tutorial</h2>

        <p>Learn HTML step by step.</p>

    </main>

    <aside>

        <h3>Related Topics</h3>

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

    </aside>

</body>
</html>

Output

HTML Tutorial

Learn HTML step by step.

Related Topics

• HTML Forms
• HTML Tables
• HTML Images

Step-by-Step Explanation

  • <aside> contains related or additional content.
  • It is commonly used for sidebars.
  • The main content remains inside <main>.

Question 7

Problem Statement

Create a webpage using the <header>, <nav>, and <main> elements.

HTML Code

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

<header>

    <h1>My Website</h1>

</header>

<nav>

    <a href="#">Home</a> |
    <a href="#">Courses</a> |
    <a href="#">Contact</a>

</nav>

<main>

    <h2>Welcome</h2>

    <p>This is the main content of the webpage.</p>

</main>

</body>
</html>

Output

My Website

Home | Courses | Contact

Welcome

This is the main content of the webpage.

Step-by-Step Explanation

  • <header> displays the website title.
  • <nav> contains navigation links.
  • <main> stores the primary webpage content.

Question 8

Problem Statement

Create a webpage using header, section, article, and footer.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Complete Layout</title>
</head>
<body>

<header>

    <h1>Tech Blog</h1>

</header>

<section>

    <article>

        <h2>HTML Layout</h2>

        <p>Semantic HTML improves webpage structure.</p>

    </article>

</section>

<footer>

    <p>© 2026 Tech Blog</p>

</footer>

</body>
</html>

Output

Tech Blog

HTML Layout

Semantic HTML improves webpage structure.

© 2026 Tech Blog

Step-by-Step Explanation

  • <section> groups related content.
  • <article> contains independent content.
  • <footer> displays page information at the bottom.

Question 9

Problem Statement

Create a webpage layout using all common semantic elements.

HTML Code

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

<header>

    <h1>Learning HTML</h1>

</header>

<nav>

    Home | Tutorials | Contact

</nav>

<main>

    <section>

        <article>

            <h2>HTML Basics</h2>

            <p>HTML is the foundation of web development.</p>

        </article>

    </section>

    <aside>

        HTML Practice Questions

    </aside>

</main>

<footer>

    © 2026 HTML Tutorial

</footer>

</body>
</html>

Output

Learning HTML

Home | Tutorials | Contact

HTML Basics

HTML is the foundation of web development.

HTML Practice Questions

© 2026 HTML Tutorial

Step-by-Step Explanation

  • <header> contains the page title.
  • <nav> provides navigation.
  • <main> stores the main webpage content.
  • <section> groups related content.
  • <article> contains an independent topic.
  • <aside> displays related information.
  • <footer> contains the page footer.

Question 10

Problem Statement

Create a complete HTML webpage layout.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Layout Example</title>
</head>
<body>

<header>

    <h1>My Learning Website</h1>

</header>

<nav>

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

</nav>

<main>

    <section>

        <h2>Welcome</h2>

        <p>Learn HTML with simple examples.</p>

    </section>

    <aside>

        <h3>Quick Links</h3>

        <p>HTML Forms</p>

        <p>HTML Tables</p>

    </aside>

</main>

<footer>

    <p>© 2026 My Learning Website</p>

</footer>

</body>
</html>

Output

My Learning Website

Home | HTML | CSS | Contact

Welcome

Learn HTML with simple examples.

Quick Links

HTML Forms

HTML Tables

© 2026 My Learning Website

Step-by-Step Explanation

  • <header> displays the website title.
  • <nav> organizes navigation links.
  • <main> contains the primary webpage content.
  • <section> groups related information.
  • <aside> provides additional content.
  • <footer> displays copyright information.
  • Together, these elements create a clean semantic webpage layout.

Key Takeaways

  • HTML layout defines the overall structure of a webpage.
  • <header> contains introductory content.
  • <nav> groups navigation links.
  • <main> stores the primary webpage content.
  • <section> organizes related content.
  • <article> represents independent content.
  • <aside> displays related or sidebar information.
  • <footer> contains copyright and contact information.
  • Semantic HTML improves accessibility and SEO.
  • Modern webpages should use semantic layout elements instead of generic containers whenever possible.

Frequently Asked Questions (FAQs)

1. What is an HTML layout?

An HTML layout is the structure of a webpage created using semantic HTML elements.

2. Which element contains the main content?

The <main> element contains the primary content of a webpage.

3. What is the purpose of the <header> element?

It contains introductory content such as the website title, logo, or navigation.

4. What does the <nav> element do?

It groups navigation links for the website.

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

A <section> groups related content, while an <article> contains independent content that can stand alone.

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

It displays related information such as sidebars, advertisements, or quick links.

7. What information is usually placed inside <footer>?

Copyright notices, contact information, and additional links.

8. Why should I use semantic HTML elements?

They improve readability, accessibility, and search engine optimization (SEO).

9. Can a webpage have multiple <section> elements?

Yes. A webpage can contain multiple sections for different topics.

10. Are semantic layout elements supported by modern browsers?

Yes. All major modern browsers support HTML5 semantic layout elements.

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

Related Posts

Scroll to Top