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 <dl> element: one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts flow content. Or (in WHATWG HTML): <dl> element. |
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 Standard The definition of '<div>' in that specification. |
Living Standard | No changes since the latest snapshot |
HTML5 The definition of '<div>' in that specification. |
Recommendation | Obsoleted align |
HTML 4.01 Specification The definition of '<div>' in that specification. |
Recommendation |
Browser compatibility
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 |
align | 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.