🔴 Advanced · Lesson 36

Page Layout Techniques

Layout = Arranging the Blocks

Page layout is deciding WHERE each big block sits — header on top, navigation, main content, a sidebar, footer at the bottom. HTML's job is to create these blocks with the right semantic tags in the right ORDER; CSS's job is to POSITION them (side by side, stacked, responsive). Think of building a house: HTML lays out the rooms in a sensible sequence; CSS arranges the furniture. This chapter is about the HTML skeleton — the structural foundation good CSS needs.

The Standard Page Skeleton — the shape almost every site shares

┌─────────────────────────────────────┐
│ header (logo + nav)                 │
├──────────────────────┬──────────────┤
│                      │              │
│   main               │   aside      │
│   (the real content) │   (sidebar)  │
│                      │              │
├──────────────────────┴──────────────┤
│ footer (copyright, links)           │
└─────────────────────────────────────┘

Open almost any website and you'll recognise this pattern: a top bar, a big content area, often a sidebar, and a footer. Learning this one skeleton means you can structure 90% of pages. The semantic tags you learned earlier map onto it exactly — header, nav, main, aside, footer.

Not Tables — the History Lesson (important for interviews)

❌ THE OLD WAY (1990s-2000s):
<table>
    <tr><td colspan="2">Header</td></tr>
    <tr><td>Sidebar</td><td>Content</td></tr>
</table>

✅ THE MODERN WAY:
<header>...</header>
<main>...</main>
<aside>...</aside>   ← positioned with CSS, not table cells

Why the change matters: tables for layout were rigid (hard to make responsive), heavy (nested tables everywhere), and meaningless to screen readers (which announced "table, row, cell" for what was just a page section). The modern split — semantic HTML for structure, CSS for positioning — is flexible, accessible, and mobile-ready. Interviewers ask this specifically to check you're not stuck in the table-layout era. Tables are ONLY for tabular data (marksheets, timetables).

How CSS Actually Positions Blocks (a preview)

CSS tool	What it does	Use for
Flexbox	Arranges items in a row or column, flexibly	Nav bars, card rows, centering
Grid	A true 2D rows-and-columns layout	Whole-page layouts, galleries
display: block/inline	Stacking vs flowing (you met this)	Basic flow control

These are CSS topics with full chapters in our CSS course — mentioned here so you understand the division of labour: your HTML supplies clean semantic blocks; flexbox and grid then arrange them into any layout, responsively. The better your HTML structure, the easier the CSS.

A Complete Layout Skeleton (copy-ready)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine Public School</title>
</head>
<body>
    <header>
        <h1>Alpine Public School</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/admission/">Admission</a>
            <a href="/contact/">Contact</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>Welcome</h2>
            <p>Main page content goes here...</p>
        </article>

        <aside>
            <h2>Notices</h2>
            <p>Admissions open for 2026-27</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 Alpine Public School, Khurja</p>
    </footer>
</body>
</html>

This is a complete, valid, accessible, SEO-friendly page skeleton — every tag you've learned, in its proper place. Add CSS (flexbox/grid) and it becomes any design you want. This is the structural blueprint you'll start real projects from.

Exam Corner

Q: What are the standard layout sections of a web page? header, nav, main, aside (sidebar), footer.

Q: Why shouldn't tables be used for layout? Rigid, not responsive, inaccessible, and semantically wrong — tables are for tabular data only.

Q: Which CSS tools position layout blocks? Flexbox (1D rows/columns) and Grid (2D layouts).

Q: What's the division of labour? HTML defines semantic structure; CSS positions it.

Q: Where does the main page content go? Inside the <main> element (one per page).

Layout = Blocks सजाना

Page layout का मतलब है बड़े-बड़े हिस्सों को सही जगह रखना — ऊपर header, बगल में sidebar, बीच में content, नीचे footer. यहाँ एक अहम बात समझिए: HTML का काम सिर्फ यह बताना है कि कौन-सा हिस्सा क्या है; उन्हें कहाँ रखना है यह CSS तय करती है. HTML में आप semantic tags से "यह header है, यह main content है" घोषित करते हैं. फिर CSS (flexbox या grid) उन blocks को पन्ने पर सजाती है. इसीलिए साफ HTML structure अच्छे layout की पहली शर्त है.

Standard Page Skeleton

<body>
    <header>         <!-- logo, site ka naam -->
        <nav>...</nav>   <!-- mukhya navigation -->
    </header>

    <main>           <!-- page ka asli content, sirf EK baar -->
        <article>...</article>
        <aside>...</aside>    <!-- sidebar / sambandhit link -->
    </main>

    <footer>...</footer>
</body>

लगभग हर website इसी ढाँचे पर बनी है. <header> ऊपर की पट्टी, उसके अंदर <nav>. <main> में वह content जो इस page को अनोखा बनाता है — यह पूरे page पर सिर्फ एक बार आना चाहिए, और इसमें header/footer नहीं आते. <article> स्वतंत्र content (blog post, news item), <aside> उससे जुड़ा पर अलग हिस्सा (sidebar, ads). <footer> सबसे नीचे. Screen readers और Google दोनों इन tags को पहचानकर page की रूपरेखा तुरंत समझ लेते हैं.

Tables नहीं — इतिहास का सबक

<!-- ✗ 1998 ka tarika — layout ke liye table -->
<table>
  <tr>
    <td width="200">Sidebar</td>
    <td>Main content</td>
  </tr>
</table>

CSS से पहले के ज़माने में लोग layout बनाने के लिए tables use करते थे. आज यह गंभीर गलती मानी जाती है: screen reader इसे data table समझकर "row 1, column 2" पढ़ता है; mobile पर यह ठीक से नहीं सिकुड़ता; और code बदलना दुःस्वप्न बन जाता है. Tables सिर्फ असली tabular data के लिए हैं — marks sheet, price list, timetable. Layout के लिए semantic tags + CSS flexbox/grid ही सही रास्ता है.

CSS असल में Blocks कैसे रखती है

/* Header ke andar logo left, nav right */
header { display: flex; justify-content: space-between; }

/* Main ko do column me baanto: content + sidebar */
main {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
}

/* Mobile par ek column */
@media (max-width: 768px) {
    main { grid-template-columns: 1fr; }
}

यहाँ HTML और CSS का मेल साफ दिखता है. HTML ने बस बताया कि <main> के अंदर <article> और <aside> हैं. CSS ने grid-template-columns: 1fr 300px से उन्हें content + sidebar में बाँट दिया, और media query से mobile पर एक-दूसरे के नीचे कर दिया. HTML बदले बिना पूरा layout बदल गया. यही separation of concerns का असली फायदा है — और यही कारण है कि आप CSS course में flexbox और grid सीखेंगे.

पूरा Layout Skeleton

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Alpine Public School</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Latest News</h2>
            <p>...</p>
        </article>
        <aside>
            <h3>Quick Links</h3>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 Alpine Public School</p>
    </footer>
</body>
</html>

यह पूरा skeleton copy कीजिए और किसी भी नए project की शुरुआत इससे कीजिए. इसमें सब कुछ है: DOCTYPE, lang, charset, viewport, title, linked CSS, और semantic structure. अब सिर्फ content भरिए और CSS से सजाइए.

Exam Corner

Q: Layout में HTML और CSS की भूमिका क्या है? HTML बताता है कौन-सा हिस्सा क्या है; CSS तय करती है उन्हें कहाँ रखना है.

Q: एक page में <main> कितनी बार आना चाहिए? सिर्फ एक बार.

Q: Layout के लिए table क्यों नहीं? Screen readers गलत पढ़ते हैं, mobile पर नहीं सिकुड़ता, और maintain करना कठिन है.

Q: <article> और <aside> में अंतर? article स्वतंत्र content है; aside उससे जुड़ा पर अलग हिस्सा (sidebar).

Q: Nav links किसके अंदर रखे जाते हैं? <nav> के अंदर एक <ul> में.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.