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. 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. |
| Permitted ARIA roles | Any |
| DOM interface | HTMLDivElement |
This element includes the global attributes.
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.
<div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate.<div> <p>Any kind of content here. Such as <p>, <table>. You name it!</p> </div>
The result looks like this:
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.
<div class="shadowbox"> <p>Here's a very interesting note displayed in a lovely shadowed box.</p> </div>
.shadowbox {
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
} | 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 |
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | 1 | Yes | Yes | Yes |
align |
Yes | Yes | 1 | Yes | Yes | Yes |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
align |
Yes | Yes | Yes | 4 | Yes | Yes | Yes |
<section>, <article>, <nav>, <header>, <footer>
<span> element for styling of phrasing content
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div