HTML Layout

HTML Layout का मतलब होता है — वेबपेज पर चीज़ें कहाँ और कैसे रखी जाएँ जैसे:

Header (ऊपर वाला हिस्सा – Logo, Menu)
Navigation Bar (Menu / Links)
Main Content Area (Article / Section)
Sidebar (Side Info, Ads)
Footer (नीचे वाला हिस्सा – Copyright आदि)

आसान शब्दों में — Layout वह structure है जो वेबसाइट को सही shape और design देता है।

HTML Layout के Main Sections

आइए इन्हें एक-एक करके समझते हैं

Tag (टैग)	काम (Function)
<header>	ऊपर वाला हिस्सा (logo, title, navigation आदि)
<nav>	Navigation links (menu) के लिए
<section>	Webpage के अलग-अलग भाग (topics) के लिए
<article>	किसी स्वतंत्र content (blog post, news item) के लिए
<aside>	Side info या ads के लिए
<footer>	नीचे वाला हिस्सा (contact info, copyright आदि)
<main>	Page का मुख्य content area

Basic HTML Layout Structure

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Layout Example</title>
  <style>
    header, footer {
      background: #4caf50;
      color: white;
      text-align: center;
      padding: 10px;
    }
    nav {
      background: #333;
      color: white;
      padding: 8px;
      text-align: center;
    }
    nav a {
      color: white;
      margin: 10px;
      text-decoration: none;
      font-weight: bold;
    }
    section {
      display: flex;
      padding: 15px;
    }
    article {
      flex: 3;
      padding: 10px;
      background: #f4f4f4;
    }
    aside {
      flex: 1;
      padding: 10px;
      background: #ddd;
    }
    footer {
      font-size: 14px;
    }
  </style>
</head>
<body>

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

  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>

  <section>
    <article>
      <h2>Welcome to My Website</h2>
      <p>यह मेरा पहला HTML Layout है। इसमें header, nav, section, article, aside और footer सब कुछ है।</p>
      <p>HTML5 के इन semantic tags की मदद से वेबपेज को structure देना बहुत आसान हो जाता है।</p>
    </article>
    <aside>
      <h3>Sidebar</h3>
      <p>यहाँ आप ads, links या related content डाल सकते हैं।</p>
    </aside>
  </section>

  <footer>
    <p>Copyright © 2025 | Made with ❤️ in India</p>
  </footer>

</body>
</html>

Output: एक सुंदर structured webpage जिसमें सभी मुख्य हिस्से मौजूद हैं।

Layout Design को और बेहतर बनाना (CSS Grid या Flexbox से)

HTML अकेले structure देता है, पर layout को responsive और सुंदर बनाने के लिए हम CSS Grid या Flexbox का उपयोग करते हैं। Example (CSS Grid Layout):

<style>
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "nav nav"
    "main aside"
    "footer footer";
  grid-template-columns: 3fr 1fr;
  gap: 10px;
}

header { grid-area: header; background: #4caf50; color: white; text-align: center; padding: 10px; }
nav { grid-area: nav; background: #333; color: white; text-align: center; padding: 10px; }
main { grid-area: main; background: #f0f0f0; padding: 10px; }
aside { grid-area: aside; background: #ddd; padding: 10px; }
footer { grid-area: footer; background: #444; color: white; text-align: center; padding: 10px; }
</style>

<div class="container">
  <header><h1>My Website</h1></header>
  <nav>Home | About | Services | Contact</nav>
  <main>
    <h2>Main Content</h2>
    <p>यहाँ वेबसाइट का मुख्य content होगा।</p>
  </main>
  <aside>
    <h3>Sidebar</h3>
    <p>यहाँ related info या ads दिखा सकते हैं।</p>
  </aside>
  <footer>© 2025 My Website</footer>
</div>

Output: एक सुंदर, Grid-based responsive layout।

Semantic Layout क्यों जरूरी है?

Semantic elements जैसे <header>, <footer>, <nav> आदि से:

SEO बेहतर होता है
Screen readers को समझ आता है कि कौन सा भाग क्या है
कोड साफ और structured रहता है

Responsive Layout Tips

हमेशा <meta name="viewport"> जरूर लगाएँ
Width को % या flex units में रखें
Media queries का उपयोग करें
Sidebar को mobile view में नीचे दिखाएँ

Example (Responsive Behavior)

@media screen and (max-width: 768px) {
  section {
    flex-direction: column;
  }
  aside {
    order: 2;
  }
  article {
    order: 1;
  }
}

Example – Blog Page Layout

<header>
  <h1>Tech Blog</h1>
</header>

<nav>
  <a href="#">Home</a> | <a href="#">Tutorials</a> | <a href="#">About</a>
</nav>

<section>
  <article>
    <h2>HTML Layout Explained</h2>
    <p>HTML Layout से हम अपने webpage को structure देते हैं...</p>
  </article>

  <aside>
    <h3>Recent Posts</h3>
    <ul>
      <li>HTML Head Explained</li>
      <li>CSS Basics</li>
      <li>Responsive Design Tips</li>
    </ul>
  </aside>
</section>

<footer>
  <p>© 2025 Tech Blog | Designed by CodeKeet</p>
</footer>

Summary

<table>
        <thead>
            <tr>
                <th>Tag</th>
                <th>Description (विवरण)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>&lt;header&gt;</td>
                <td>Header section (logo/title/nav) - शीर्ष लेख अनुभाग (लोगो/शीर्षक/नेविगेशन)</td>
            </tr>
            <tr>
                <td>&lt;nav&gt;</td>
                <td>Navigation menu - नेविगेशन मेन्यू</td>
            </tr>
            <tr>
                <td>&lt;section&gt;</td>
                <td>Page sections - पेज के अनुभाग</td>
            </tr>
            <tr>
                <td>&lt;article&gt;</td>
                <td>Independent content - स्वतंत्र सामग्री</td>
            </tr>
            <tr>
                <td>&lt;aside&gt;</td>
                <td>Side info/ads - साइड की जानकारी/विज्ञापन</td>
            </tr>
            <tr>
                <td>&lt;footer&gt;</td>
                <td>Footer (contact/info) - पाद लेख (संपर्क/जानकारी)</td>
            </tr>
            <tr>
                <td>&lt;main&gt;</td>
                <td>Page का मुख्य content area - पेज का मुख्य सामग्री क्षेत्र</td>
            </tr>
        </tbody>
    </table>

Practice Task

एक Webpage बनाइए जिसमें:
ऊपर header में site title और navigation हो
बीच में main content और sidebar हो
नीचे footer हो
CSS से सुंदर color और spacing दें
और mobile view में layout responsive बने