Div Tag in HTML in Hindi - Block Level Element क्या होता है?

Table of Contents hide

1 HTML Div Tag in Hindi

1.1 block element क्या होता है ?

1.2 Block Element का features क्या है?

2 अन्य HTML tutorial

HTML Div Tag in Hindi

Div Tag एक container की तरह html में इस्तेमाल होता है जिसमे कई सारे अन्य tags को लिखे जातें हैं | <div> tag एक division tag है जो html पेज को कई section में बांटता है |

जैसे एक घर जब बनता है तो उसे कई हिस्सों में बाँट कर पूरा किआ जाता है | वैसे ही पूरा html पेज कई हिस्सों में बंटा होता है | और हर हिस्सों में अलग अलग content रखी जाती है |

div tag एक container की तरह कई tags को एक साथ रखता है | जिससे फिर एक साथ उन सभी tags को आसानी से मैनेज किया जा सकता है | एक साथ एक तरह का css लगाया जा सकता है |

उदाहरण के लिए कई सारे tags को एक जैसा style देना है, या एक तरह का javascript function लगाना है, तो उन सारे tags को एक div में रखी जाती है | div tag की खुदकी कोई attribute नहीं होती | <div> में लिखे सारे contents को एक ग्रुप की तरह इस्तेमाल करता है |

उदाहरण :

<div style="background-color: black; color:white;">
  this is new text<br>
  this is another text<br>
  <h1>Welcome To New Example of Div</h1>
</div>

Output:

div tag screen की पूरी width को ले लेता है | नयी div या कोई और tag को फिर नयी line में लिखी जाती है | इसीलिए div tag एक block tag है |

उदाहरण:

<div style="background-color:blue; color:white;">
 <h1>this is first div</h1>
</div>
<div style="background-color:blue; color:white;">
 <h1>this is second div</h1>
</div>
<div style="background-color:blue; color:white;">
 <h1>this is third div</h1>
</div>

Output:

*html page में कोई भी div tag से पहले के और बाद में एक नयी लाइन Default set रहती है |

block element क्या होता है ?

block tag वो है जो हमेसा एक नयी line से सुरु होता है | और ये container का 100% width ले लेता है | block tag के बगल में कोई और tag को रखी नहीं जा सकती है |

div tag एक block tag है ये हमेसा एक नयी line से सुरु होती है |

div tag एक closing tag या pair tag है | जिसकी closing tag होना जरुरी है मतलब या <div>..</div> pair से लिखी जायेगी |

अन्य block tag के उदाहरण है

Block Element का features क्या है?

Block Element को जिस भी container में राखी जाती है वो उस में 100% width लेती है |
Block Element हमेसा एक नयी लाइन से सुरु होती है और इस वजह से इसके साथ वाले elements automatically नयी लाइन से सुरु होती है |
Block Element का default width 100% होता है, पर इसकी dimension, css property के जरिये adjust की जा सकती है |

उदाहरण

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Block Element Example</title>
    <style>
        .parentDiv{
         background-color: #ccc;
        }
        .childDiv{
            background-color:blue; color:white;
        }
        #div2
        {
            background-color:rgb(0, 255, 34);
            color:white;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="parentDiv">
        <div class="childDiv">
            <h3>this is first div</h3>
        </div>
        <div id="div2">
            <h3>this is second div</h3>
        </div>
        <div class="childDiv">
            <h3>this is third div</h3>
        </div>
    </div>       
</body>
</html>

उदाहरण में देखिये दूसरी div tag की width property के जरिये हमने इसकी dimension को control किया है |

output