HTML Layout

🏗️ What is HTML Layout?

HTML layout refers to how elements are visually arranged on a webpage. A well-structured layout improves both usability and appearance. It’s like planning the blueprint of a building — structure first, content second! 🧱

>>“Content is king, but layout is the kingdom.” 👑

🧰 Common Layout Techniques

  • HTML5 Semantic Elements — Clean, accessible structure using tags like <header>, <nav>, <section>, etc.
  • CSS Flexbox — 1D layout: align items horizontally or vertically
  • CSS Grid — 2D layout: place items in rows and columns
  • <div> Tag — Generic container, useful with classes and IDs

🧩 HTML5 Semantic Layout Structure

Semantic HTML Layout Example

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

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
  </ul>
</nav>

<main>
  <section>
    <h2>Welcome</h2>
    <p>This is a simple layout.</p>
  </section>
</main>

<footer>
  <p>&copy; 2025 My Website</p>
</footer>

Note

💡 Semantic tags help search engines and screen readers understand your content structure better!

📦 Using <div> for Layout

Before semantic HTML, layouts were built mostly using <div> and CSS classes.

Layout Using divs

<div class="header">Header</div>
<div class="nav">Navigation</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>

Note

⚠️ Use <div> only when no semantic element fits your need.

🎯 CSS for Layout Control

1️⃣ Flexbox Example

Flexbox Layout

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
2️⃣ Grid Example

Grid Layout

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

🔍 Layout vs Styling

📌 Layout = positioning of elements
🎨 Styling = visual presentation (colors, fonts, borders)

📊 Semantic Layout Elements Overview

TagDescription
<header>Defines the header for a page or section
<nav>Contains navigation links
<main>Represents the main content
<section>Groups related content together
<article>Self-contained content like blog posts
<aside>Sidebar or related information
<footer>Defines footer for page or section

🔗 Useful Resources

>>“A strong layout turns content into an experience.” 🎨🧠