<div>
A generic block-level container with no meaning, for grouping elements and styling.
- Display
- block
- Closing tag
- Required
- Permitted content
- Flow content
Example
#<div style="display: flex; gap: 12px; align-items: center;">
<div class="box">JS</div>
<div>
<strong>JavaScript course</strong><br>
<small>20 lessons · 6 hours of study</small>
</div>
</div>Definition and usage
#The <div> element (from division) is a generic block-level container. It groups elements so they can be styled together, laid out with Flexbox or Grid, or found in JavaScript. For the browser, screen readers, and search engines, it carries no meaning at all.
Before HTML5, entire page layouts were built out of <div> elements with classes like header or menu. Today there are semantic elements for those jobs: <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>. A good rule: look for an element that describes the content first, and reach for <div> only when none fits.
<div> can contain any flow content. You can also use it to group <dt> and <dd> pairs inside a <dl> definition list, for example to lay them out as tiles.
Don’t turn <div> into a button. A <div> with an onclick attribute isn’t accessible from the keyboard, and a screen reader has no way of knowing it can be clicked. <button> is the right element for actions.
Syntax
#<div>
…
</div>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<div class="stage" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JS</div>
<div class="box">React</div>
<div class="box">Python</div>
<div class="box">SQL</div>
</div><div class="header">
<div class="menu">…</div>
</div>
<header>
<nav>…</nav>
</header>Both snippets look identical, but the second one tells the browser and screen readers what each part of the page actually is.
Default CSS
#Most browsers display this element with these default styles:
div {
display: block;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- First check whether a semantic element fits, e.g.
<section>,<article>, or<nav>. - Don’t build clickable
<div>elements. A button is<button>, and a link is<a>. - Avoid unnecessary layers. Every
<div>with no specific job makes the code harder to read and style.
Related entries
#- <div> vs <span><div> is a block-level container with no meaning, and <span> is its inline counterpart. Both exist only for grouping and styling, never to describe content.
- <section> vs <article> vs <div><article> is self-contained content, <section> is a thematic part of something larger, and <div> is a neutral container with no meaning at all.
- <span>A generic inline container with no meaning, for styling a piece of text.
- <section>A thematic part of a document, usually with its own heading.
- <article>Self-contained content that makes sense read or shared on its own.
- <main>The page’s main, unique content. Only one should be visible per page.
- <p>A paragraph of text.
Spotted a mistake or missing an example? Write to us.