• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Layout

← Previous Next →

🔹 What is a Layout in HTML?

A layout is how content is structured and arranged on a webpage.
In modern HTML5, layout is created using semantic elements, divisions, and styled using CSS.

🔹 Common Layout Tags in HTML5

Tag Purpose
<header> Defines header of a section/page
<nav> Defines navigation links
<main> Main content of the document
<section> Section of content
<article> Self-contained content
<aside> Side content (ads, links, etc.)
<footer> Footer of a section/page

🔹 Basic Page Layout Structure

<body>
  <header>My Website Header</header>
  <nav>Home | About | Contact</nav>
  <main>
    <section>
      <article>
        <h2>Blog Post Title</h2>
        <p>Content goes here...</p>
      </article>
    </section>
    <aside>Related links or ads</aside>
  </main>
  <footer>Copyright © 2025</footer>
</body>

🔹 Layout with <div> and CSS

Older or custom layouts often use <div> elements combined with CSS.

<div class="container">
  <div class="header">Header</div>
  <div class="menu">Menu</div>
  <div class="content">Main Content</div>
  <div class="footer">Footer</div>
</div>

🔸 Example CSS

.container {
  width: 100%;
}

.header, .footer {
  background-color: #f1f1f1;
  padding: 10px;
}

.menu {
  background-color: #ccc;
  float: left;
  width: 20%;
  height: 300px;
}

.content {
  float: left;
  width: 80%;
  height: 300px;
  background-color: #e2e2e2;
}

🔹 Responsive Layout using Flexbox

<div class="flex-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

.flex-container {
  display: flex;
}

.box {
  flex: 1;
  padding: 20px;
  border: 1px solid #000;
}

Practice Questions

Q1. Create a layout with <header>, <nav>, <main>, and <footer>.

Q2. Add two <section> tags inside <main>, each with its own content.

Q3. Use <aside> to add a sidebar next to the main content.

Q4. Create a layout using <div> with four sections: header, menu, content, footer.

Q5. Use CSS to float menu on the left and content on the right.

Q6. Create a 3-column responsive layout using Flexbox.

Q7. Add a full-width header and footer with different background colors.

Q8. Use <article> inside <section> to structure blog posts.

Q9. Create a layout where the sidebar collapses on smaller screens.

Q10. Apply different heights to each layout section using CSS.

HTML Layout Quiz

Q1: Which HTML5 tag defines the top section of a page?

A. <top>
B. <main>
C. <header>
D. <section>

Q2: What tag is used for grouping navigation links?

A. <link>
B. <nav>
C. <aside>
D. <a>

Q3: Which tag represents the main content of a document?

A. <content>
B. <body>
C. <main>
D. <article>

Q4: What tag is used for self-contained pieces like blog posts?

A. <aside>
B. <div>
C. <article>
D. <footer>

Q5: Which HTML tag is meant for related links or sidebars?

A. <nav>
B. <aside>
C. <section>
D. <ul>

Q6: Which CSS property is used to create flexible box layout?

A. display: box;
B. position: flex;
C. display: flex;
D. flex-align: center;

Q7: Which element is commonly used to contain all layout parts?

A. <nav>
B. <footer>
C. <container>
D. <div>

Q8: What’s the purpose of the <footer> tag?

A. To add copyright
B. To display main content
C. To create menus
D. To define headings

Q9: Which HTML layout tag can contain multiple <article> elements?

A. <header>
B. <section>
C. <aside>
D. <main>

Q10: Which tag is best suited for main navigational links?

A. <a>
B. <header>
C. <menu>
D. <nav>
← Previous Next →
Login
Go Back Top