files/en-us/web/html/reference/elements/div/index.md
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).
{{InteractiveExample("HTML Demo: <div>", "tabbed-standard")}}
<div class="warning">
<p>Beware of the leopard</p>
</div>
.warning {
border: 10px ridge red;
background-color: yellow;
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;
}
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.
This element includes the global attributes.
[!NOTE] The
alignattribute 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 {{HTMLElement("article")}} or {{HTMLElement("nav")}}) is appropriate.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.
<div>
<p>
Any kind of content here. Such as <p>, <table>. You name it!
</p>
</div>
{{EmbedLiveSample("A_basic_example", 650, 60)}}
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 #333333;
box-shadow: 8px 8px 5px #444444;
padding: 8px 12px;
background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);
}
{{EmbedLiveSample("A_styled_example", 650, 120)}}
{{Specifications}}
{{Compat}}