← Back to HTML Course | Chapter 3: Page Structure | Lesson 11 of 12

HTML डिव

सोचिए आप अपनी shop के लिए एक बड़ी display shelf बना रहे हैं। अगर आप बस items को shelf पर loose ढेर कर दें, तो वे लुढ़क जाएंगे और cluttered दिखेंगे। उन्हें organize करने के लिए, आप lightweight plastic bins का उपयोग करके related items को एक साथ group करते हैं, जैसे सभी blue marker pens एक bin में और red pens दूसरे में रखना। HTML div element वही organizational plastic bin है। यह एक पूरी तरह generic, non-semantic block container है जो खुद अपने आप में कोई मतलब नहीं रखता। इसका काम related elements को एक साथ group करना है, ताकि आप उन सभी पर styles, borders, margins, या script controls को एक single, साफ package की तरह apply कर सकें।

In this page:

  1. Generic div Container
  2. CSS से Divisions को Style करना
  3. Flexbox से Flexible Column Grids
  4. Consistent Indentation और Nesting
  5. Div Accessibility और ARIA
Syntax
markup 
<div class="classname">
  Content
</div>

Generic div Container

div tag एक generic block-level division या container define करता है। इसका कोई semantic अर्थ नहीं होता, लेकिन elements को group करने, sections को अलग करने, और CSS layout rules लागू करने के लिए यह बेहद उपयोगी है।

Note: मुख्य page columns के लिए semantic layout tags (जैसे header या section) इस्तेमाल करें, और div elements को visual styling और spacing के लिए बचाकर रखें।
Warning: semantic containers की जगह plain div tags का ज्यादा उपयोग आपकी site की SEO ranking पर नकारात्मक असर डाल सकता है।

उदाहरण: The Generic div Container

markup 
<div>Grouped content with no semantic meaning</div>

CSS से Divisions को Style करना

चूंकि div एक generic block container है, इसलिए यह आपके page पर custom visual cards, boxes, borders, और margins बनाने के लिए CSS classes लगाने के लिए एकदम सही element है।

Note: अपनी stylesheet rules को व्यवस्थित रखने के लिए अपने div tags पर एक descriptive class name इस्तेमाल करें।
Warning: हर single div पर inline styles apply करने से बचें; अपने code को साफ रखने के लिए external stylesheet में classes का उपयोग करें।

उदाहरण: Styling Divisions with CSS

markup 
<div class="card">Styled card content</div>

Flexbox से Flexible Column Grids

आप modern, flexible column grids बनाने के लिए div tags इस्तेमाल कर सकते हैं। किसी parent div की display property को flex पर सेट करके, आप उसकी child divs को साफ-सुथरे तरीके से side-by-side arrange कर सकते हैं और उनका alignment control कर सकते हैं।

Note: अलग-अलग screen sizes के हिसाब से अपने-आप adjust होने वाले fluid, responsive layouts बनाने के लिए Flexbox इस्तेमाल करें।
Warning: सुनिश्चित करें कि आप अपने columns पर fixed pixel widths सेट न करें, क्योंकि वे mobile screens पर overflow हो जाएंगे।

उदाहरण: Flexible Column Grids with Flexbox

markup 
<div style="display: flex;">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Consistent Indentation और Nesting

कई divs को एक-दूसरे के अंदर nest करना complex web pages बनाने की चाबी है। अपना कोड साफ रखने के लिए, हमेशा clear indentation इस्तेमाल करें ताकि दिखे कि कौन-सी divs किन divs के अंदर nested हैं।

Note: लंबे layouts को पढ़ना आसान बनाने के लिए अपने closing div tags के पास छोटे comment markers (जैसे /nested-box) जोड़ें।
Warning: closing div tag लिखना भूल जाने से बाद के elements गलत तरीके से merge हो सकते हैं और आपके page layout को तोड़ सकते हैं।

उदाहरण: Consistent Indentation and Nesting

markup 
<div class="outer">
  <div class="inner">
    Nested content
  </div>
</div>

Div Accessibility और ARIA

चूंकि div एक पूरी तरह generic, non-semantic element है, इसलिए screen readers जैसे assistive devices इसे पूरी तरह अनदेखा कर देते हैं।

अगर आप किसी interactive component (जैसे custom button या modal) बनाने के लिए div इस्तेमाल करते हैं, तो उसे accessible रखने के लिए आपको standard ARIA roles जोड़ने होंगे।

Note: focus और keyboard support built-in पाने के लिए interactive components के लिए styled divs के बजाय native, semantic elements (जैसे button) को प्राथमिकता दें।
Warning: जरूरी ARIA roles जोड़े बिना styled divs का उपयोग standard buttons और links के replacement के रूप में कभी न करें।

उदाहरण: Div Accessibility and ARIA

markup 
<div role="button" tabindex="0" aria-label="Close dialog">X</div>
Live Example
Related Topics

एचटीएमएल कंप्यूटरकोड · HTML बटन · HTML रिस्पॉन्सिव · HTML लेआउट

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. semantic layout tags के बजाय हर चीज़ के लिए plain, generic div elements इस्तेमाल करना।
  2. closing div tag लिखना भूल जाना, जिससे बाद के elements merge हो जाते हैं और layouts टूट जाते हैं।
  3. ज़रूरी ARIA roles या keyboard focus support जोड़े बिना styled div containers को interactive buttons की तरह इस्तेमाल करना।
चैप्टर सारांश
  • div tag एक generic block-level container define करता है जिसमें कोई semantic meaning नहीं होती।
  • elements को group करने, sections अलग करने, और CSS styling या Flexbox layouts साफ तरीके से लागू करने के लिए divs इस्तेमाल करें।
  • अपने layouts को organized और maintain करने में आसान रखने के लिए हमेशा साफ indentation और closing tags लिखें।
ब्राउज़र सपोर्ट

standard div elements और block-level styling rules सभी web browsers में natively supported हैं।

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson HTML Computercode Next Lesson → HTML Buttons

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.