लोड हो रहा है...

HTML लेआउट

सिमेंटिक्स के बाद लेआउट: क्षेत्रों को जोड़ना; CSS जगह तय करता है।

पहले संरचना, फिर दृश्य स्थान

कहानी स्पष्ट करें; फिर कॉलम — विशाल टेबल नहीं।

सीधा उत्तर

landmarks कंकाल। अद्वितीय सामग्री main में। कॉलम CSS से। लेआउट table नहीं।

📊 HTML structure vs CSS visuals

Layer	Responsibility	Examples
HTML landmarks	Name page regions by meaning	header, nav, main, aside, footer
HTML wrappers	Optional styling hooks with no landmark role	div class="row"
CSS	Visual columns, gaps, widths, order on screen	flex, grid, margin, width
Avoid	Fake layout with data tables	table/tr/td for the whole site chrome

landmark पेज कंकाल

header, पंक्ति, main+article, aside, footer। div.row केवल CSS हुक।

Landmark layout skeleton

html

HTML Code

<body>
<header>
<h1>News</h1>
<nav>
<a href="index.html">Home</a>
<a href="local.html">Local</a>
</nav>
</header>
<div class="row">
<main>
<article>
<h2>Story</h2>
<p>Primary article content goes here.</p>
</article>
</main>
<aside>
<h2>Related</h2>
<p>Side links and notes.</p>
</aside>
</div>
<footer>
<p>Contact</p>
</footer>
</body>

कंकाल पढ़ें

कहानी main में
aside संबंधित
बिना CSS लंबवत ढेर

कॉलम के लिए छोटा CSS

वही landmarks; .row पर flex।

Layout skeleton with flex row

html

HTML Code

<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Primary content.</p></article>
</main>
<aside><h2>Related</h2><p>Side note.</p></aside>
</div>
<footer><p>Contact</p></footer>
<style>
.row { display: flex; gap: 16px; }
main { flex: 2; }
aside { flex: 1; }
</style>
</body>

flex पूर्वावलोकन

अर्थ वही
main चौड़ा
कॉलम के लिए td नहीं

टेबल डेटा के लिए, पेज फ्रेम के लिए नहीं

लेआउट टेबल से बचें।

अभ्यास

header/main/aside/footer
article केवल main में
लेआउट टेबल नहीं

आसान गलतियाँ

लेआउट टेबल
main छोड़ना
row को landmark समझना

सार

HTML नाम; CSS जगह
लेआउट टेबल नहीं
अगला: रेस्पॉन्सिव

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा