index.md

---

title: '<div>: The Content Division element'
slug: Web/HTML/Element/div
page-type: html-element
browser-compat: html.elements.div

---

{{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 {{htmlattrxref("class")}} or {{htmlattrxref("id")}} attributes, marking a section of a document as being written in a different language (using the {{htmlattrxref("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

• The <div> element should be used only when no other semantic element (such as {{HTMLElement("article")}} or {{HTMLElement("nav")}}) is appropriate.

Accessibility concerns

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 simple example

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

The result looks like this:

{{EmbedLiveSample("A_simple_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 {{htmlattrxref("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	{{no_tag_omission}}
Permitted parents	Any element that accepts flow content. Or (in {{glossary("WHATWG")}} HTML): {{HTMLElement("dl")}} element.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	{{domxref("HTMLDivElement")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• Semantic sectioning elements: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}

• {{HTMLElement("span")}} element for styling of phrasing content