HTML Block & Inline In Hindi | Mayank Salvi

प्रत्येक HTML element का एक default display value होता है, जो इस बात पर निर्भर करता है कि वह किस प्रकार का element है।
Mayank Salvi

HTML Block and Inline Elements

प्रत्येक HTML element का एक default display value होता है, जो इस बात पर निर्भर करता है कि वह किस प्रकार का element है।

दो display value हैं: block और inline

block-level element

एक block-level element हमेशा एक new line पर start होता है।

एक block-level element हमेशा available full width लेता है (जहां तक ​​​​यह left और right तक फैला हुआ है)।

एक block level element में top और bottom margin होता है, जबकि एक inline element में नहीं होता है।

<Div> element एक block-level element है।

Example


<div>Hello World</div>
Copy Code

यहाँ HTML के सभी block-level element हैं:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

inline element

एक inline element new line से start नहीं होता।

एक inline element उतनी ही width लेता है जितनी आवश्यक हो।

यह एक के अंदर एक <span> element है ।

Example


<span>Hello World</span>
Copy Code

यहाँ HTML के सभी inline element हैं:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

 नोट: inline element में block-level element नहीं हो सकता है!

<div> element

<div> element अक्सर अन्य HTML elements के लिए एक container के रूप में प्रयोग किया जाता है।

<div> element को attributes की आवश्यकता नहीं है, लेकिन style, class और id common हैं।

CSS के साथ प्रयोग किया जाये, तो <div> element का उपयोग content के block को style करने के लिए किया जा सकता है:

Example


<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Copy Code

The <span> Element

<span> element एक inline container है इसका प्रयोग एक text, या किसी document का एक part या part के एक हिस्से को mark करने के लिए किया जाता है।

<span> element को attributes की आवश्यकता नहीं है, लेकिन style, class और id common हैं।

CSS के साथ प्रयोग किया जाये, तो <span> element का उपयोग text के कुछ parts को style करने के लिए किया जा सकता है:

Example


<p>My mother has <span style="color:#005af0; font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Copy Code

Chapter Summary

  • दो display value हैं: block और inline
  • एक block-level element हमेशा एक new line पर start होता है और available full width लेता है
  • एक inline element एक new line से start नहीं होता है और यह उतनी ही width लेता है जितनी आवश्यक हो
  • <div> एक block level element है और अक्सर अन्य HTML elements के लिए एक container के रूप में प्रयोग किया जाता है
  • <span> element एक inline container है इसका प्रयोग एक text, या किसी document का एक part या part के एक हिस्से को mark करने के लिए किया जाता है।

HTML Tags

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

Also Read: 

Complete HTML Series In Hindi:  Click Here