← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 5 of 26

HTML Block & Inline

HTML elements को building blocks बनाम strings के साथ खेलने की तरह सोचें। कुछ elements heavy concrete blocks की तरह व्यवहार करते हैं; वे wide होते हैं, एक-दूसरे के ऊपर stack होते हैं, और हमेशा बिल्कुल नई row पर शुरू होते हैं। दूसरे elements decorative strings की तरह व्यवहार करते हैं। उन्हें नई line की जरूरत नहीं होती, और वे text की एक ही line के अंदर साफ-सुथरे side-by-side बैठते हैं। यह समझना कि ये elements कैसे interact करते हैं, layout design की कुंजी है। यह आपके text, buttons, और graphics को screen पर अचानक इधर-उधर कूदने से रोकता है।

In this page:

  1. Block-Level Elements को समझना
  2. Inline Elements को समझना
  3. Valid Nesting Rules
  4. Generic Block Container (div)
  5. Generic Inline Container (span)
Syntax
markup 
<div>Block content</div>
<span>Inline content</span>

Block-Level Elements को समझना

Block-level elements हमेशा नई line पर शुरू होते हैं, और ब्राउज़र स्वचालित रूप से उनके पहले और बाद में कुछ spacing जोड़ता है। वे अपने parent container की पूरी width ले लेते हैं, बाईं ओर से दाईं ओर तक पूरी तरह फैले हुए।

Note: आम block elements में div, p, sections, और h1 से h6 तक की headings जैसे main tags शामिल हैं।
Warning: Block elements किसी भी adjacent elements को नई line पर धकेल देंगे, जो horizontal inline layouts को तोड़ सकता है।

उदाहरण: Understanding Block-Level Elements

markup 
<div>Block element one</div>
<div>Block element two, starts on a new line</div>

Inline Elements को समझना

Inline elements नई line पर शुरू नहीं होते। वे सिर्फ उतनी ही width लेते हैं जितनी उनके content को चाहिए, जिससे कई inline elements text की एक ही line में side-by-side बैठ सकते हैं।

Note: आम inline elements में span, anchor links (a), strong, em, और images (img) शामिल हैं।
Warning: आप inline elements पर vertical margins, padding, width, या height settings apply नहीं कर सकते; browser उन्हें नजरअंदाज कर देगा।

उदाहरण: Understanding Inline Elements

markup 
<p><span>Inline</span> <span>elements</span> sit side by side.</p>

Valid Nesting Rules

HTML standards के अनुसार, block-level elements दूसरे block-level elements और inline elements रख सकते हैं। हालांकि, inline elements सिर्फ दूसरे inline elements रख सकते हैं; वे कभी भी block-level elements नहीं रख सकते।

Note: अपने code को valid और clean रखने के लिए inline items को हमेशा block containers के अंदर लपेटें।
Warning: किसी anchor link या span tag के अंदर div या heading रखना invalid HTML है और layout bugs पैदा कर सकता है।

उदाहरण: Valid Nesting Rules

markup 
<div>
  <span>Inline inside block is valid</span>
</div>

Generic Block Container (div)

div element एक generic, non-semantic block-level container है। इसका कोई अर्थ नहीं होता, लेकिन यह elements को साथ group करने, custom styles apply करने, और CSS के साथ web layouts बनाने के लिए बेहद उपयोगी है।

Note: अलग-अलग components को logical, styleable container cards में group करने के लिए div elements का उपयोग करें।
Warning: जब header, footer, या section जैसे semantic HTML elements आपके layout को बेहतर describe कर सकते हैं तो div tags को overuse न करें।

उदाहरण: Generic Block Container (div)

markup 
<div style="border: 1px solid black;">
  A generic container for grouping content
</div>

Generic Inline Container (span)

span element एक generic, non-semantic inline container है। इसका उपयोग text flow को तोड़े बिना किसी sentence या heading के अंदर specific शब्दों या characters को custom styles या script behavior के लिए target करने में किया जाता है।

Note: जब आप किसी paragraph के अंदर सिर्फ एक शब्द का रंग या style बदलना चाहें, तो span tag का उपयोग करें।
Warning: block-level content को group करने के लिए span elements का उपयोग न करें, क्योंकि इससे HTML validation टूट जाता है।

उदाहरण: Generic Inline Container (span)

markup 
<p>Change the color of <span style="color: red;">one word</span> in a sentence.</p>
Live Example
Related Topics

HTML Lists · HTML Comments · HTML Tables · HTML Colors

{# 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. #}
🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Other Lists / Description Lists Next Lesson → HTML Comments

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.