HTML Layout

Semantic Headers और Footers

header element introductory content को represent करता है, जिसमें आमतौर पर logos, search inputs, या navigation menus होते हैं। footer element closing content, जैसे copyright info, contacts, या system links को mark करता है।

उदाहरण: Semantic Headers and Footers

<header>Site Logo</header>
<footer>&copy; 2024 My Site</footer>

Semantic Navigation (nav)

nav element एक खास container है जो website की मुख्य navigation links को group करने के लिए इस्तेमाल होता है। इस tag का इस्तेमाल करने से search engine crawlers और screen readers को संकेत मिलता है कि यह block page routing को handle करता है।

उदाहरण: Semantic Navigation (nav)

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

article और section से Main Content को Structure करना

main tag आपके page के unique, core topic को represent करता है। इसके अंदर, आप content को semantically group कर सकते हैं, article tag (blog posts जैसे standalone, self-contained elements के लिए) और section tag (जुड़े हुए features को group करने के लिए) का इस्तेमाल करके।

उदाहरण: Structuring Main Content with article and section

<main>
  <article>Blog post content</article>
  <section>Related features</section>
</main>

Sidebars और Callouts (aside)

aside element ऐसे content को represent करता है जो main page content से थोड़ा-बहुत related होता है, जैसे popular tools दिखाने वाला sidebar, quick tips, या callout advertisements।

उदाहरण: Sidebars and Callouts (aside)

<aside>Popular tools this week</aside>

Generic Dividers बनाम Semantic Tags

header, nav, और article जैसे semantic HTML tags आने से पहले, developers को हर section के लिए custom class names (जैसे div class="header") वाले generic div containers इस्तेमाल करने पड़ते थे।

हालांकि standard divs layout cards को style करने के लिए अभी भी बेहद उपयोगी हैं, लेकिन accessibility और search engine optimization के लिए semantic tags का इस्तेमाल करना कहीं बेहतर है।

उदाहरण: Generic Dividers vs. Semantic Tags

<div class="header">Old approach</div>
<header>Semantic approach</header>

Layout के लिए CSS Box Model

हर HTML element चार layers से बना एक rectangular box होता है: खुद content, content के चारों ओर padding, padding के चारों ओर एक border, और border के बाहर margin जो इसे दूसरे elements से अलग करता है।

किसी भी layout को सही तरीके से बनाने के लिए इस model को समझना सबसे बुनियादी बात है।

उदाहरण: CSS Box Model for Layout

<div style="padding: 10px; border: 1px solid black; margin: 20px;">
  Content
</div>

Flexbox की बुनियादी बातें

Flexbox एक CSS layout method है जो items को एक ही row या column में arrange करने और उनके बीच space को automatically बांटने के लिए बनाया गया है।

किसी container पर display: flex सेट करने से उसके direct children flexible items बन जाते हैं जो उस एक दिशा में grow, shrink, या align हो सकते हैं।

उदाहरण: Flexbox Basics

<div style="display: flex; justify-content: space-between;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

CSS Grid की बुनियादी बातें

CSS Grid two-dimensional layouts के लिए बना एक layout method है, जिससे आप rows और columns दोनों एक साथ define कर सकते हैं।

किसी container पर display: grid के साथ grid-template-columns सेट करने से आप items को एक precise grid structure में रख पाते हैं, जिसे flexbox आसानी से replicate नहीं कर सकता।

उदाहरण: CSS Grid Basics

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

सही Layout Method चुनना

एक row या column में items को arrange करने के लिए, जैसे कोई navigation bar या buttons की list, आमतौर पर flexbox सबसे सरल विकल्प होता है।

एक पूरे page structure को rows और columns के साथ लेआउट करने के लिए, जैसे sidebar, header, और main content area वाला कोई dashboard, CSS Grid आमतौर पर ज्यादा स्पष्ट और शक्तिशाली होता है।

उदाहरण: Choosing the Right Layout Method

<div style="display: grid; grid-template-columns: 200px 1fr;">
  <nav>Sidebar</nav>
  <div style="display: flex;">
    <button>Save</button>
    <button>Cancel</button>
  </div>
</div>