The div element has no special meaning, but it’s used a lot! In short, it represents its children. It is used to group elements on a page for styling contexts.
It’s an easy choice, but you should really use the <div> element as last resort for the sake of accessibility. For example, instead of using a <div> element to group the content from a long form article you could reach for the <article> element instead.
Example
Syntax
1 |
<div class="container"> |
2 |
<article>
|
3 |
<p>Ipsum labore velit anim nulla aliqua ea in mollit et eiusmod minim aute do. Cillum elit do veniam deserunt aliqua enim consequat nisi laboris fugiat sint. Ad enim enim non.</p> |
4 |
</article>
|
5 |
<article>
|
6 |
<p>Ipsum labore velit anim nulla aliqua ea in mollit et eiusmod minim aute do. Cillum elit do veniam deserunt aliqua enim consequat nisi laboris fugiat sint. Ad enim enim non.</p> |
7 |
</article>
|
8 |
</div>
|
Result
Browser Support
The <div> tag is supported in all modern browsers. Read more on caniuse.com.
Attributes
The <div> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).
Content
If the <div> element is not a child of a <dl> element the type of content model is flow content. If it is a child of the <dl> element it is used for wrapping groups of dt and dd elements.
Related HTML Elements
- The
<div>element is similar to the<span>element, in that they’re both generic and don’t describe their content. However,<span>is an inline element.
Learn More
<div> can be styled by CSS.
