• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top