docs.rodeo

MDN Web Docs mirror

: The Content Division element

{{HTMLSidebar}} 

The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using {{glossary("CSS")}}  (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}} 

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.

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

Accessibility

The <div> element has an implicit role of generic, and not none. This may affect certain ARIA combination declarations that expect a direct descendant element with a certain role to function properly.

Examples

A basic example

<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

Result

{{EmbedLiveSample("A_basic_example", 650, 60)}} 

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

{{EmbedLiveSample("A_styled_example", 650, 120)}} 

Technical summary

Content categories Flow content, palpable content.
Permitted content Flow content.
Or (in `{{glossary("WHATWG")}}`  HTML): If the parent is a `{{HTMLElement("dl")}}`  element: one or more `{{HTMLElement("dt")}}`  elements followed by one or more `{{HTMLElement("dd")}}`  elements, optionally intermixed with `{{HTMLElement("script")}}`  and `{{HTMLElement("template")}}`  elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Or (in `{{glossary("WHATWG")}}`  HTML): `{{HTMLElement("dl")}}`  element.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface `{{domxref("HTMLDivElement")}}` 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN