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 { width: 15em; 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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | Yes | 1 | Yes | Yes | Yes |
align
|
Yes | Yes | 1 | Yes | Yes | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
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