The HTML <div>
tag is a non-semantic tag that is used to define division in an HTML document. For example,
<div>
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
Browser Output
![HTML div Example HTML div element with some elements inside](http://devcdn.programiz.com/cdn/farfuture/_CcLvFom5PC6srSltFKDeg9AWcWNmjBZeOmGpSC0nXU/mtime:1677313377/sites/tutorial2program/files/html-div-example.png)
Here, you can see the <div>
tag is used like a container for HTML elements.
Usage of HTML <div>
The HTML <div>
tag is generally used to group content and provide CSS styles using class
or id
attributes. For example,
<div class="div1">
<h2>This is heading.</h2>
<p>This is a paragraph</p>
</div>
<div class="div2">
<h2>This is another heading.</h2>
<p>This is another paragraph</p>
</div>
<style>
.div1 {
color: red;
}
.div2 {
color: green;
}
</style>
Browser Output
![HTML Div CSS Example HTML div element styled with css](http://devcdn.programiz.com/cdn/farfuture/byzrLIwslyxwrP7iv7vgpuIcEaS2dfPcrFRdzHr2eeg/mtime:1677313381/sites/tutorial2program/files/html-div-css-example.png)
Here, the styling for the first two <div>
comes from selector .div1
and .div2
respectively.