HTML Layout Elements and Techniques का उपयोग web page के structure और design को organize करने के लिए किया जाता है।
Layout यह तय करता है कि page पर content कहाँ और कैसे दिखाई देगा।
Modern HTML में layout के लिए semantic elements और CSS techniques का उपयोग किया जाता है।
HTML Layout क्या होता है
HTML Layout web page का skeleton होता है।
यह header, navigation, main content, sidebar और footer जैसे sections को define करता है।
Good layout से:
Content readable बनता है.
User experience improve होता है.
SEO और accessibility बेहतर होती है.
HTML Semantic Layout Elements
Semantic elements meaningful tags होते हैं जो content का purpose बताते हैं।
Header Element
<header> page या section का header define करता है।
<header>
<h1>Website Title</h1>
</header>
यह logo, heading या top navigation के लिए use होता है।
Nav Element
<nav> navigation links के लिए use होता है।
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
Menus और navigation bars के लिए best practice है।
Section Element
<section> related content को group करता है।
<section>
<h2>News</h2>
<p>Latest updates</p>
</section>
Long pages को logical parts में divide करने में helpful है।
Article Element
<article> independent content define करता है।
<article>
<h2>Blog Post</h2>
<p>Post content</p>
</article>
Blog posts, news articles और cards के लिए use होता है।
Aside Element
<aside> side content या sidebar के लिए use होता है।
<aside>
Related Links
</aside>
Ads, widgets और related info के लिए common है।
Footer Element
<footer> page या section का footer define करता है।
<footer>
© 2025 My Website
</footer>
Copyright, links और credits के लिए use होता है।
Traditional Layout with Div
Semantic elements आने से पहले layouts div से बनाए जाते थे।
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
अब भी div layout containers के लिए use होती है, लेकिन semantics prefer किए जाते हैं।
CSS Layout Techniques
HTML structure के साथ CSS layout techniques use की जाती हैं।
Float Based Layout
Float layout पुराना तरीका है।
<style>
.left {
float: left;
width: 70%;
}
.right {
float: right;
width: 30%;
}
</style>
Modern layouts में floats avoid किए जाते हैं।
Flexbox Layout
Flexbox modern और flexible layout technique है।
<style>
.container {
display: flex;
}
</style>
Flexbox features:
Easy alignment
Responsive design
One-dimensional layout
Flexbox Example
<div class="container">
<div>Left</div>
<div>Right</div>
</div>
Rows और columns easily manage होते हैं।
CSS Grid Layout
CSS Grid advanced layout system है।
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
</style>
Complex layouts के लिए grid best option है।
Grid Example
<div class="grid">
<div>Header</div>
<div>Main</div>
<div>Sidebar</div>
</div>
Two-dimensional layouts grid से easily बनते हैं।
Responsive Layout Techniques
Responsive layout different screen sizes पर adjust होता है।
Common techniques:
Percentage widths
Flexbox
CSS Grid
Media queries
Media Query Example
<style>
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
Mobile-friendly layouts के लिए essential है।
Layout और Accessibility
Semantic elements screen readers को page structure समझने में मदद करते हैं।
Correct layout accessibility improve करता है।
Common Mistakes
Semantic tags का misuse
Too many nested divs
Responsive design ignore करना
Old float layouts use करना
Best Practices
Semantic HTML elements use करें
Flexbox और Grid prefer करें
Responsive design plan करें
Clean और readable structure रखें
Summary
HTML Layout Elements page का structure define करते हैं।
Semantic tags और modern CSS techniques clean और responsive layouts बनाते हैं।
Proper layout website usability, accessibility और SEO तीनों improve करता है।