What the div tag does
<div> (short for division) is a generic container. It groups elements together so you can style, position or script them as one unit. On its own it looks like nothing: no margin, no border, no special font. It is a block element, so it starts on a new line and stretches across the available width.
Remove the border line in the style and the divs become invisible: that is the default look of a div. Everything it does visually comes from CSS.
div class and id
A div usually gets a class, which is the name your CSS targets. Divs that share a class share the style:
.card styles both boxes, .card.highlight adds a blue outline to the div that has both classes. Use id when you need to point at one specific div, for example as a link target (href="#pro"). The attributes page compares class and id in detail.
Divs side by side
Because divs are blocks, they stack vertically. To place them in a row, make their parent a flex container:
display: flex on .row lines the children up, gap spaces them, and the flex values share out the width (1 : 2 : 1 here). This parent and children pattern is the most common use of divs on real sites. For centering a div, see how to center a div.
Nesting divs
Divs can contain other divs to any depth. Each level is a box inside a box, which you can see by giving every div a border and some padding:
Keep nesting as shallow as the layout allows. Every extra wrapper is one more box to reason about when a margin or width does not do what you expect.
div or a semantic tag?
A div says nothing about its content. HTML has tags that do the same grouping job and also say what the group is:
| Instead of | Use | For |
|---|---|---|
<div class="header"> | <header> | Intro or top bar of a page or section |
<div class="nav"> | <nav> | A block of navigation links |
<div class="main"> | <main> | The main content, once per page |
<div class="post"> | <article> | A self-contained item: post, comment, product card |
<div class="footer"> | <footer> | Footer of a page or section |
These tags look exactly like a div until you style them, but screen readers announce them and let users jump between them, and search engines read the structure. Use a div for boxes that exist only for layout or styling, such as the .row wrapper above. The semantic HTML page covers the full set.
A div is not a button
A div with a click handler looks clickable to a mouse user, but a keyboard user cannot reach it with Tab or press it with Enter, and a screen reader does not announce it as a button:
Use <button> for actions and <a href> for navigation. Both are focusable and work with the keyboard for free.
Common mistakes
- A div inside a
<p>. The paragraph closes before the div. Make the div the outer element, or use<span>inside the paragraph. - Div soup. A page made only of divs has no structure for screen readers. Swap divs for
<header>,<nav>,<main>and<footer>where they fit. - Clickable divs. Use a
<button>or a link instead. - Expecting a div to be as wide as its text. A div takes the full width. Use
display: inline-block,width: fit-content, or a<span>if you want it to shrink. - Reusing an id on several divs. Use a class for anything that repeats.
Frequently Asked Questions
What is a div in HTML?
<div> is a generic container. It groups other elements so you can style or position them together, and it has no meaning of its own: browsers display it as a block that starts on a new line and takes the full available width.
What does div class mean?
<div class="card"> is a div with a class attribute. The class is a name CSS uses to style it (.card { ... }) and JavaScript uses to find it. Many divs can share a class, and one div can have several: class="card featured".
How do I put two divs side by side?
Wrap them in a parent div and give the parent display: flex. The children then sit in a row. Add gap for space between them and flex: 1 on the children to share the width equally.
Should I use div or section?
Use <section>, <header>, <nav>, <main>, <article> or <footer> when the content has that role, because screen readers and search engines understand them. Use <div> when you only need a box for styling or layout.
Can I put a div inside a p tag?
No. A paragraph can only contain inline content. The browser closes the <p> as soon as it sees <div>, which breaks your styles. Use a div as the outer element or a <span> inside the paragraph.
