HTML Layout: header, nav, main, footer की बनावट
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
अच्छी बनी हुई page साफ हिस्सों में बँटी होती है। HTML इसके लिए semantic layout elements देता है — ऐसे tag जिनके नाम ही बताते हैं कि वह हिस्सा क्या है। इन्हें इस्तेमाल करने से आपकी page पढ़ने में आसान होती है, Google के लिए बेहतर होती है, और screen reader के लिए navigate करना आसान हो जाता है।
Classic Layout — आम बनावट
<header>— page का सबसे ऊपर का हिस्सा: logo, site का नाम, और आमतौर पर navigation।<nav>— navigation menu, मुख्य pages के links के साथ।<main>— page की मुख्य content। एक page पर सिर्फ एक।<section>— main area के अंदर content का एक themed समूह।<article>— content का अपने-आप में पूरा टुकड़ा, जैसे blog post या news story।<aside>— side content: sidebar, related links, ad।<footer>— page का नीचे का हिस्सा: contact details, copyright, extra links।
Code में यह कैसा दिखता है
क्रम लगभग हमेशा एक ही होता है: header, nav, main (sections और articles के साथ), aside, footer। यह pattern इतना आम है कि visitor इसे बिना सोचे उम्मीद करते हैं — वे menu ऊपर और contact details नीचे बिना सोचे ढूँढते हैं।
Layout क्या है
Layout यह है कि page के हिस्से कैसे सजे हैं: ऊपर header, navigation menu, बीच में मुख्य content, शायद एक sidebar, और नीचे footer। Web के शुरुआती दिनों में लोग layout table से बनाते थे। आज हम हिस्सों के लिए semantic tags और जगह तय करने के लिए CSS — आमतौर पर Flexbox या Grid — इस्तेमाल करते हैं।
याद रखने की तरकीब: Header ऊपर, footer नीचे, main बीच में — layout की यही पहचान।
Syntax — Classic Layout का कोड
ज़्यादातर websites एक ही ढाँचा इस्तेमाल करती हैं। यह रहा semantic tags के साथ:
<header>Logo and site title</header> <nav>Home | Courses | Blog | Contact</nav> <main> <section>Main content goes here</section> <aside>Sidebar: links and ads</aside> </main> <footer>Copyright and contact info</footer>
हर tag का एक काम है: <header> page का ऊपर का हिस्सा है, <nav> में menu होता है, <main> में page की मुख्य content होती है (एक page पर सिर्फ एक), <aside> side content है, और <footer> नीचे का हिस्सा है।
<section> और <aside> वाला <main> तब तक ऊपर-नीचे ही रहेगा जब तक आप display: flex; जैसा CSS जोड़कर उन्हें अगल-बगल नहीं रखते।आम गलतियाँ
- Table से layout बनाना — table data के लिए होती है, page की बनावट के लिए नहीं।
- एक page पर दो
<main>element इस्तेमाल करना — सिर्फ एक होना चाहिए। - Navigation links को
<nav>के बजाय सादे div में रखना — screen reader तब menu नहीं पा सकते। - Mobile पर layout भूल जाना — desktop पर content के बगल में बैठने वाली sidebar phone पर उसके नीचे आनी चाहिए।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>
<header><h1>My Website</h1></header>
<nav><a href="#">Home</a> | <a href="#">About</a></nav>
<main>
<section><h2>Welcome</h2><p>Main content here.</p></section>
<aside><p>Sidebar: related links.</p></aside>
</main>
<footer><p>© 2026 My Website</p></footer>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. क्लासिक पेज लेआउट का क्रम क्या है?
ऊपर हेडर, फिर नेव, बीच में मुख्य कंटेंट और साइडबार, और सबसे नीचे फ़ुटर होता है।
2. एक पेज में मेन टैग कितनी बार आ सकता है?
एक पेज में सिर्फ़ एक मेन होता है, और पेज की सबसे ज़रूरी जानकारी उसी के अंदर होती है।
3. लेआउट के हिस्सों को बगल में कौन रखता है?
एचटीएमएल सिर्फ़ हिस्सों के नाम देता है, उन्हें बगल में रखने का काम सीएसएस करता है, वरना वे एक के नीचे एक दिखेंगे।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
