<div>: The Content Division element #

Beware of the leopard

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} .warning { border: 10px ridge #f00; background-color: #ff0; padding: 0.5rem; display: flex; flex-direction: column; }

.warning img {
  width: 100%;
}

.warning p {
  font: small-caps bold 1.2rem sans-serif;
  text-align: center;
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

As a "pure" container, the `` 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 #

::: section-content This element includes the global attributes.

::: {#sect1 .notecard .note} 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 `` elements on the page. ::: :::

Usage notes #

::: section-content

• The `` element should be used only when no other semantic element (such as <article> or <nav>) is appropriate. :::

Accessibility concerns #

::: section-content The `` element has an implicit role of generic{target="_blank"}, 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 #

::: section-content ::: code-example [html]{.language-name}

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

:::

Result #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

A styled example #

::: section-content This example creates a shadowed box by applying a style to the using CSS. Note the use of the [`class`](../global_attributes#class) attribute on the to apply the style named "shadowbox" to the element.

HTML #

::: code-example [html]{.language-name}

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>

:::

CSS #

::: code-example [css]{.language-name}

.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 #

::: {#sect3 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

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	generic
Permitted ARIA roles	Any
DOM interface	HTMLDivElement

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-div-element]{.small}

---

:::

Browser compatibility #

::: _table Desktop Mobile

---

        Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

div 1 12 1 Yes 15 1 4.4 18 4 14 1 1.0 align 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 :::

See also #

::: section-content

• Semantic sectioning elements: <section>, <article>, <nav>, <header>, <footer>
• <span> element for styling of phrasing content :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div{._attribution-link} :::