The HTML Content Division element (<div>
) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
As a "pure" container, the <div>
element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class
or id
attributes, marking a section of a document as being written in a different language (using the lang
attribute), and so on.
Content categories | Flow content, palpable content. |
Permitted content | Flow content.
Or (in WHATWG HTML): If the parent is a |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts flow content. |
Implicit ARIA role | No corresponding role |
Permitted ARIA roles | Any |
DOM interface | HTMLDivElement
|
Attributes
This element includes the global attributes.
Note: The align
attribute is obsolete; do not use it anymore. Instead, you should use CSS properties or techniques such as CSS Grid or CSS Flexbox to align and position <div>
elements on the page.
Usage notes
- The
<div>
element should be used only when no other semantic element (such as<article>
or<nav>
) is appropriate.
Examples
A simple example
<div>
<p>Any kind of content here. Such as
<p>, <table>. You name it!</p>
</div>
The result looks like this:
A styled example
This example creates a shadowed box by applying a style to the <div>
using CSS. Note the use of the class
attribute on the <div>
to apply the style named "shadowbox"
to the element.
HTML
<div class="shadowbox">
<p>Here's a very interesting note displayed in a
lovely shadowed box.</p>
</div>
CSS
.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of '<div>' in that specification. | Living Standard | No changes since the latest snapshot |
HTML5The definition of '<div>' in that specification. | Recommendation | Obsoleted align
|
HTML 4.01 SpecificationThe definition of '<div>' in that specification. | Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
div
|
Chrome
Full support Yes |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support Yes |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
|
Chrome
Full support Yes |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support Yes |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.'
- Deprecated. Not for use in new websites.
See also
- Semantic sectioning elements:
<section>
,<article>
,<nav>
,<header>
,<footer>
<span>
element for styling of phrasing content
<div>: The Content Division element by Mozilla Contributors is licensed under CC-BY-SA 2.5.