The
<div>tag defines a division or section in an HTML document.
It is a block-level container used to group content for styling (CSS) or scripting (JavaScript).It is one of the most commonly used HTML tags.
Syntax
<div>
Content goes here...
</div>Attributes
| Attribute | Description |
|---|---|
id | Specifies a unique identifier for the <div> |
class | Assigns a class name for CSS styling |
style | Adds inline CSS styles |
title | Adds tooltip text |
hidden | Specifies that the element should be hidden |
contenteditable | Specifies whether content inside <div> can be edited |
draggable | Specifies whether the <div> is draggable |
lang | Specifies language |
Example
<!DOCTYPE html>
<html>
<head>
<title>DIV Example</title>
<style>
.box {
width: 200px;
padding: 20px;
background-color: lightblue;
border: 2px solid #333;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>DIV Example</h2>
<div class="box">
This is a content box inside a DIV.
</div>
<div class="box">
Another DIV with the same CSS class.
</div>
</body>
</html>
Output
Browser Output
A page showing two light-blue colored rectangular boxes with text.
Use our Tryit Editor to see the output.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Notes
<div>is a block-level element; it starts on a new line.- It is the most common container for CSS layout design.
- In modern HTML5, semantic elements like
<header>,<section>,<article>,<footer>, etc. are preferred over<div>for structure. <div>should be used mainly as a generic container when no semantic element fits.
Conclusion
The <div> tag is a fundamental block container used to group and style HTML content. While newer semantic tags provide meaning, <div> remains essential for layout and design due to its flexibility.
