HTML Inline Element and Block Element

HTML Block vs Inline Elements

Jab aap HTML code likhte ho, toh har element browser mein kisi na kisi layout behavior ke saath render hota hai. Ye behavior do tarah ka hota hai:

1. Block Elements
2. Inline Elements

Dono ke roles web page design mein alag hote hain. Aaiye inhe detail mein samajhte hain, simple examples ke saath.

1. Block Elements Kya Hote Hain?

Block elements HTML ke wo elements hote hain jo browser mein poori line occupy karte hain, aur automatically next content ko nayi line se start karte hain.

Jaise hi aap ek block element likhte ho, wo page par ek rectangle ya block banata hai .

Common Block Elements:

• <div>
• <p>
• <h1> to <h6>
• <header>, <footer>, <section>, <article>
• <ul>, <ol>, <li>

Example:

<p>This is a paragraph.</p>
<p>This is second paragraph which will start from second line.</p>

Output mein dono paragraphs alag-alag lines mein dikhai denge.

2. Inline Elements Kya Hote Hain?

Inline elements wo hote hain jo sirf utni hi jagah lete hain jitni unhe content ke liye chahiye hoti hai. Ye elements same line mein hi render hote hain, jab tak unke liye jagah ho.

Ye kisi block ke andar bhi use ho sakte hain bina naye line mein jaaye.

Common Inline Elements:

• <span>
• <a>
• <strong>, <em>
• <img>
• <label>, <input>

Example:

<p>This is an <strong>important</strong> text.</p>

Yahan <strong> tag inline hai, isliye “important” word bold hoga, lekin paragraph ke flow mein hi rahega.

Block aur Inline ke Beech Main Difference

• Block element ek naya section ya layout block banata hai.
• Inline element content ko highlight ya decorate karta hai bina layout badle.
• Block elements ke andar inline elements use ho sakte hain, lekin reverse nahi (mostly).
• CSS ke through kisi element ka behavior change bhi kiya ja sakta hai.

Real-World Example

<div>
  <h2>My Hobbies</h2>
  <p>I like <span style="color:blue;">coding</span> and <span style="color:green;">reading</span>.</p>
</div>

• <div>, <h2>, <p> = block elements – ye layout banate hain
• <span> = inline element – ye text ko color de raha hai bina line break kare

CSS se Behavior Change Karna

Agar aap chaho toh CSS se kisi element ko inline ya block bana sakte ho:

<p style="display: inline;">This will behave like inline.</p>
<span style="display: block;">This will behave like block.</span>

Lekin yaad rahe, default behavior hi most of the time best hota hai, jab tak koi special design requirement na ho tab tak element ka behaviour change nhi karna chahiya.

Conclusion

HTML ke block aur inline elements ko samajhna layout aur styling ke foundation ko samajhne ke liye zaroori hai. Jab aap ye samajh jaate ho ki kaunsa element kya behavior show karta hai, tab aapka web design clean, organized aur responsive ban jata hai.

Quick Recap:

• Block elements: naye section banate hain, full width lete hain
• Inline elements: same line mein rehte hain, layout break nahi karte
• CSS se aap inka behavior override kar sakte ho (agar zarurat ho)