HTML <div> Tag
Concept
The <div> tag in HTML is a versatile container used to group block-level and inline elements. It’s often utilized to apply CSS styles or JavaScript functionalities to a section of content within a webpage. The <div> tag doesn’t inherently represent anything but is used to structure content and layout.
Implementation
Example 1: Creating a Styled Section
Here’s an example of how you can use the <div> tag to create a styled section with CSS:
<div style="background-color: lightblue; padding: 10px;">
<h2>This is a header inside a div</h2>
<p>This is a paragraph inside a div.</p>
</div>
Example 2: Grouping Elements for Layout
You can also use the <div> tag to group elements for layout purposes:
<div id="header">Header Section</div>
<div id="content">Main Content</div>
<div id="footer">Footer Section</div>
Try it out below:
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
Attributes
| Attribute | Description |
|---|---|
| Global Attributes | The <div> tag supports all the global attributes in HTML. |
| Event Attributes | The <div> tag also supports all the event attributes in HTML. |
Browser Support
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| IE | Yes |
Default CSS Settings
Most browsers will display the <div> element with the following default CSS settings:
div {
display: block;
}
Conclusion
The <div> tag is a fundamental building block in HTML, allowing for flexible design and organization of content.
It’s a go-to element for web developers looking to create responsive and aesthetically pleasing layouts.
