HTML लेआउट्स

परिचय

HTML लेआउट्स HTML वेब पेज पर घटकों की व्यवस्था को निर्दिष्ट करते हैं। कई HTML सिमेंटिक एलिमेंट्स हैं जो वेब पेज के विभिन्न खंडों को परिभाषित करते हैं।

लेआउट के लिए सिमेंटिक HTML एलिमेंट्स

वेब पेज लेआउट के लिए तकनीकें

• CSS Float प्रॉपर्टी - पारंपरिक विधि, अब कम उपयोग होती है
• CSS Flexbox - एक-आयामी लेआउट के लिए आधुनिक, लचीला तरीका
• CSS Grid - दो-आयामी लेआउट के लिए शक्तिशाली सिस्टम
• CSS फ्रेमवर्क - Bootstrap, Tailwind, Foundation आदि
• HTML टेबल्स - लेआउट के लिए अनुशंसित नहीं (केवल टेबुलर डेटा के लिए)

उदाहरण: फ्लोट-आधारित लेआउट

<!DOCTYPE html>
<html>
<style>
  * { box-sizing: border-box; }
  body {
    color: #000;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  header {
    background-color: #000;
    padding: 20px;
    text-align: center;
    color: white;
  }
  nav {
    float: left;
    width: 20%;
    height: 200px;
    background: #282828;
    padding: 60px 10px;
  }
  nav ul { list-style-type: none; padding: 0; }
  nav ul li a { text-decoration: none; color: #fff; display: block; margin: 10px 0; }
  article {
    float: left;
    padding: 80px 10px;
    width: 80%;
    background-color: #fff;
    height: 200px;
    text-align: center;
  }
  section::after {
    content: "";
    display: table;
    clear: both;
  }
  footer {
    background-color: #000;
    padding: 20px;
    text-align: center;
    color: white;
    clear: both;
  }
</style>
<body>
<h1>HTML लेआउट्स डेमो</h1>
<header>यह हेडर है</header>
<section>
  <nav>
    <ul>
      <li><a href="#">होम</a></li>
      <li><a href="#">अबाउट</a></li>
      <li><a href="#">संपर्क</a></li>
    </ul>
  </nav>
  <article>यह एक आर्टिकल एलिमेंट है।</article>
</section>
<footer>यह फुटर है</footer>
</body>
</html>

आउटपुट

एक क्लासिक लेआउट दिखाई देगा: शीर्ष पर हेडर, बाएं साइडबार (नेव), दाएं मुख्य सामग्री (आर्टिकल), नीचे फुटर।

आधुनिक लेआउट उदाहरण (Flexbox)

.container {
  display: flex;
  min-height: 100vh;
}
nav { width: 250px; flex-shrink: 0; }
main { flex: 1; padding: 2rem; }
@media (max-width: 768px) {
  .container { flex-direction: column; }
  nav { width: 100%; }
}

आधुनिक लेआउट उदाहरण (Grid)

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }

सिमेंटिक HTML के लाभ

• SEO: खोज इंजन कंटेंट संरचना बेहतर समझते हैं
• एक्सेसिबिलिटी: स्क्रीन रीडर पेज नेविगेट कर सकते हैं
• रखरखाव: कोड पठनीय और व्यवस्थित होता है
• भविष्य-प्रूफ: नए डिवाइस/उपकरण बेहतर पार्स कर सकते हैं

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़रों में सिमेंटिक एलिमेंट्स और Flexbox/Grid का पूर्ण समर्थन।