HTML Layout

HTML Tutorial: HTML Layout

Learn how to structure and organize HTML pages using divs, sections, headers, and footers with colorful examples

---

HTML layout helps organize content on a webpage. You can use div, section, header, footer elements for a clean structure.

---

1️⃣ Using Divs for Layout

INPUT:

<div style="background:#0077cc; color:white; padding:20px;">
  Header
</div>

<div style="background:#ff6600; color:white; padding:20px;">
  Main Content
</div>

<div style="background:#009933; color:white; padding:20px;">
  Footer
</div>

OUTPUT:

Header

Main Content

Footer

✔️ Use <div> to group sections ✔️ Add colors and padding for clarity

---

2️⃣ Using Semantic Sections

INPUT:

<header style="background:#0077cc; color:white; padding:20px;">
  Website Header
</header>

<section style="background:#ff6600; color:white; padding:20px;">
  Main Section Content
</section>

<footer style="background:#009933; color:white; padding:20px;">
  Website Footer
</footer>

OUTPUT:

Website Header

Main Section Content

Website Footer

✔️ <header>, <section>, <footer> are semantic elements ✔️ Helps SEO and accessibility

---

3️⃣ Nested Div Layout

INPUT:

<div style="display:flex;">
  <div style="background:#0077cc; color:white; padding:20px; width:50%;">
    Left Column
  </div>
  <div style="background:#ff6600; color:white; padding:20px; width:50%;">
    Right Column
  </div>
</div>

OUTPUT:

Left Column

Right Column

✔️ Flexbox allows side-by-side layout ✔️ Each div can have different colors, widths, and padding

---

4️⃣ Best Practices for Layout

• Use semantic elements (<header>, <section>, <footer>) for clarity and SEO
• Use div for general grouping
• Use CSS flex or grid for responsive layouts
• Keep consistent padding, margins, and colors
• Test on different screen sizes for responsiveness

---

🚀 What’s Next?

👉 HTML Responsive

Next lesson will cover:

• Making layouts adapt to different screen sizes
• Using media queries in CSS
• Responsive images and text scaling

---

HTML layout organizes your page content with divs and semantic elements, making websites structured, readable, and easier to style.