सोचिए आप अपनी 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 कर सकें।
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 हो जाएंगे।
कई 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 को तोड़ सकते हैं।
चूंकि 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 के रूप में कभी न करें।
{# 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. #}