HTML Block and Inline Elements

Block Elements क्या हैं?

Block Elements जब भी वेब पेज में Show होते है, तो Always नई Line से Start होते हैं।

यह elements जहां से भी शुरू होते हैं वहाँ उपर की एक line को छोड़ देते हैं और जहां खतम होते हैं वहाँ last की एक line को छोड़ देता हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
      <title>Example of Block Elements</title>
</head>
<body>
      <h2>h2 Tag is a block element</h2>
      <p>p Tag is a block element.<p>
</body>
</html>

Output:

h2 Tag is a block element

p Tag is a block element.

जैसे की आप output में देख सकते हो की दोनों Tags h2 and p में by default space आ रहा हैं।
यही पहचान Block Elements की होती हैं।




Div Block Elements क्या हैं?

यह एक block element हैं।

Div Element एक container की तरह ही होता हैं।

इसके द्वारा HTML document को division या section में बंटा जाता हैं।

इसे division element भी कहा जाता है और इसको <div> Tag द्वारा define किया जाता हैं।

इसमें किसी भी tag या element की requirement नहीं होती हैं।

आप इसमें अपनी जरूरत के अनुसार tags लगा सकते हो।

Div element का खुद के कोई attribute नहीं होते है। लेकिन आप style और class attribute का use कर सकते हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
      <title>Example of Div Block Element</title>
</head>
<body>
    <div>
          <h2>Div Element:</h2>
          <p>Div Element is a Block Element.<p>
    </div>
</body>
</html>

Output:

Div Element:

Div Element is a Block Element.



Inline Elements क्या हैं?

Inline Element कभी भी नई line से Start नहीं होता हैं। बल्कि उसी पुरानी line में कुछ space ले लेता हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
      <title>Example of Inline Elements</title>
</head>
<body>
      <h2>h2 Tag is a block element</h2>
      <p>यह किसी <span style="border: 1px solid #000;">paragraph or heading<span> के text में एक container का काम करता हैं।<p>
</body>
</html>

Output:


Span Tag Use:

यह किसी paragraph या heading के text में एक container का काम करता हैं।

जैसा की आप output में देख सकते हैं की paragraph के बीच में span का उपयोग किया हैं।
इससे यह नई line से शरू नहीं हुआ हैं।
इसी लिए यह inline element है।




Span Element क्या हैं?

यह एक Inline Element हैं। यदि आप इस tag या element को use करते हैं तो वह उसी line में रहता हैं।

Span Element को HTML में <span> द्वारा define किया जाता हैं।

यह किसी paragraph या heading का text में एक container का काम करता हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
      <title>Example of Span Element:</title>
</head>
<body>
      <h2>Span Element:</h2>
      <p>यह किसी <span style="border: 1px solid #000;">paragraph or heading<span> के text में एक container का काम करता हैं।<p>
</body>
</html>

Output:

Span Element:

यह किसी paragraph या heading के text में एक container का काम करता हैं।

जैसा की आप output में देख सकते हैं की paragraph के बीच में span का उपयोग किया हैं।
इससे यह नई line से शरू नहीं हुआ हैं।
इसी लिए यह inline element है।