HTML में elements को उनके display behaviour के आधार पर दो categories में divide किया जाता है:
Block Elements और Inline Elements. इनका सही use page layout और content structure के लिए बहुत जरूरी होता है।
Block Elements क्या होते हैं
Block elements हमेशा नई line से शुरू होते हैं और available width को पूरी तरह cover करते हैं।
ये page का structural layout बनाते हैं।
Block Elements की Properties
नई line से start होते हैं
Full width लेते हैं
Width और height set की जा सकती है
Margin और padding सभी sides पर apply होती है
Common Block Elements
<address> <article> <aside> <blockquote> <canvas> <dd> <div><dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>Block Element Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
हर paragraph नई line में दिखाई देगा।
Inline Elements क्या होते हैं
Inline elements same line में रहते हैं और केवल उतनी ही space लेते हैं जितनी content को चाहिए होती है।
ये text के अंदर small parts को style या mark करने के लिए use होते हैं।
Inline Elements की Properties
नई line से start नहीं होते
Content जितनी width लेता है उतनी ही लेते हैं
Width और height set नहीं की जा सकती
Top और bottom margin काम नहीं करता
Common Inline Elements
<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 Example
<p>This is <strong>important</strong> text</p>strong element paragraph के अंदर same line में रहता है।
Block vs Inline Example
<div>Block Element</div>
<span>Inline Element</span>
<span>Inline Element</span>div नई line लेगा, जबकि span same line में दिखेगा।
Inline Elements के अंदर Block Elements
Inline elements के अंदर block elements रखना valid नहीं होता।
लेकिन block elements के अंदर inline elements रखे जा सकते हैं।
Wrong example:<span><p>Text</p></span>
Correct example:<p>This is <span>text</span></p>
Inline-Block क्या होता है
CSS का display: inline-block value दोनों का mix होता है।
Inline-block elements:
Same line में रहते हैं
Width और height set की जा सकती है
Inline-Block Example
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background: lightblue;
}
</style>
<div class="box"></div>
<div class="box"></div>दोनों boxes same line में दिखेंगे।
Block Elements को Inline बनाना
CSS से block elements को inline बनाया जा सकता है।
<style>
p {
display: inline;
}
</style>अब paragraph भी same line में दिखाई देगा।
Inline Elements को Block बनाना
<style>
a {
display: block;
}
</style>Navigation menus बनाने में यह बहुत common है।
Real World Use Cases
Page layout – block elements
Text styling – inline elements
Buttons – inline-block
Menus – inline + block combination
Common Mistakes
Block और inline difference न समझना
Inline element में width set करना
Invalid nesting करना
Overusing <div> और <span>
Best Practices
Layout के लिए block elements use करें
Text-level styling के लिए inline elements use करें
Semantic elements prefer करें
CSS display property का सही use करें
Summary
HTML Block elements layout बनाते हैं और नई line लेते हैं।
Inline elements text के अंदर same line में रहते हैं।
Block, inline और inline-block का सही use clean और professional web design के लिए जरूरी है।