HTML डिव टैग | HTML Div Tag in Hindi

3004

HTML <div> tag का इस्तेमाल HTML elements के एक बड़े भाग को एक समूह में इकट्ठा रखने के लिये होता है|

जैसा कि हम जानते हैं कि प्रत्येक टैग का एक खास उद्देश्य होता है जैसे p tag का इस्तेमाल paragraph को specify करने के लिये होता है, <h1> से <h6> टैग का इस्तेमाल headings को specify करने के लिये होता है पर <div> tag एक container की तरह होता है जिसका इस्तेमाल दूसरे page elements को encapsulate करने के लिये होता है और यह HTML documents को sections में बांटता है|

div tag आमतौर पर web developers के द्वारा HTML elements को एक साथ समूह में रखने और एक साथ कई elements पर CSS styles apply करने के लिये किया जाता है| उदाहरण के लिये अगर आप paragraph elements के set को div element में wrap करते हो तो CSS styles का फायदा उठा सकते हो और एक साथ सभी paragraphs पर font style apply कर सकते हो; प्रत्येक paragraph element के लिये अलग से एक ही style code करने की जरुरत नही होती|

  1. <div style=“border:1px solid pink;padding:20px;font-size:20px”>
  2. <p>Welcome to Javatpoint.com, Here you get tutorials on latest technologies.</p>
  3. <p>This is second paragraph</p>
  4. </div>

ट्राई करें

Output

Welcome to Javatpoint.com, Here you get tutorials on latest technologies.

This is second paragraph

HTML div tag और span tag में अंतर

div tag span tag
HTML div एक block element हैं| HTML span एक inline element है|
HTML div element का इस्तेमाल elements के बड़े भागों को wrap करने के लिये होता है| HTML span element का इस्तेमाल texts के छोटे भागों और चित्र आदि को wrap करने के लिये होता है|

HTML div का उदाहरण: Login Form

इस उदाहरण में हम div tag का इस्तेमाल करते हुए box बना रहें हैं| box के अन्दर एक login form है| आओ CSS और HTML code देखें|

CSS Code:

  1. .loginform{
  2.     padding:10px;
  3.     border:1px solid pink;
  4.     border-radius:10px;
  5.     float:right;
  6.     margin-top:10px;
  7. }
  8. .formheading{
  9.     background-color:red;
  10.     color:white;
  11.     padding:4px;
  12.     text-align:center;
  13. }
  14. .sub{
  15. background-color:blue;
  16. padding: 7px 40px 7px 40px;
  17. color:white;
  18. font-weight:bold;
  19. margin-left:70px;
  20. border-radius:5px;
  21. }

HTML Code:

  1. <div class=“loginform”>
  2. <h3 class=“formheading”>Please Login</h3>
  3. <form action=“LoginServlet” method=“post”>
  4. <table>
  5. <tr><td>Email:</td><td><input type=“email” name=“email”/></td></tr>
  6. <tr><td>Password:</td><td><input type=“password” name=“password”/></td></tr>
  7. <tr><td colspan=“2” style=“text-align:center”><input class=“sub” type=“submit” value=“login”/></td></tr>
  8. </table>
  9. </form>
  10. </div>

ट्राई करें

Output

Please Login

Email:
Password:

Supporting Browsers

Element chrome  Chrome ie  IE firefox  Firefox opera  Opera safari  Safari
<div> Yes Yes Yes Yes Yes