References

Beginner-friendly references for web development, with live, editable examples.

The HTML <div> tag

Element All modern browsers Updated
Quick answer

The HTML <div> element is a generic block-level container with no semantic meaning. Use it to group content for styling with CSS or scripting with JavaScript — but choose a semantic element such as <section>, <article> or <nav> whenever one fits.

Overview

The <div> (content division) element is the generic block-level container. It carries no meaning of its own — it exists purely to group elements so you can lay them out with CSS or target them from JavaScript.

As a block-level element it starts on a new line and fills the available width by default. It is the workhorse of CSS layout: a <div> with display: flex or display: grid arranges its children, and a class provides the styling hook.

Because it is meaningless, reach for it last. If the content is a self-contained article, a thematic section, a navigation block or complementary content, use <article>, <section>, <nav> or <aside> — they convey structure to browsers, search engines and assistive technology.

Syntax

<div class="card">
  <h2>Title</h2>
  <p>Some content.</p>
</div>

Example

Live example 
<div style="border:1px solid #e2e8f0; border-radius:10px; padding:16px; max-width:320px;">
  <h3 style="margin:0 0 6px;">Card title</h3>
  <p style="margin:0; color:#475569;">A div grouping a heading and text into a styled card.</p>
</div>

Best practices

  • Prefer semantic elements (<section>, <article>, <nav>, <main>) when they fit; use <div> only for generic grouping.
  • Hook styling with a class rather than inline styles.
  • Use <div> elements as flexbox or grid containers for layout.
  • Never make a bare <div> clickable on its own — use a <button> or <a>, or add a role, tabindex and keyboard handlers.
  • Keep nesting shallow and purposeful to avoid "div soup."

Accessibility

A <div> has no implicit ARIA role, so assistive technology treats it as invisible structure. That is perfect for layout, but it has two consequences:

  • Do not build interactive controls from a bare <div>. A click handler alone cannot be reached by keyboard and is not announced — use a native <button>, or add role, tabindex="0" and key handlers.
  • For page regions, prefer landmark elements such as <nav> and <main> so screen-reader users can jump between them.

Frequently asked questions

What is the <div> element used for?
Grouping other elements so they can be styled with CSS or manipulated with JavaScript. It has no semantic meaning of its own.
What is the difference between <div> and <span>?
<div> is block-level (it starts on a new line and fills the width); <span> is inline (it flows within a line of text). Both are generic and meaningless.
When should I use a <div> instead of a semantic element?
Only when no semantic element fits — for example a pure layout wrapper or a flex/grid container. If the content is a section, article, nav or aside, use that element instead.
Is using too many <div>s bad?
Excessive, meaningless nesting ("div soup") hurts readability and misses the accessibility and SEO benefits of semantic markup. Using divs for layout is fine; replacing semantic elements with divs is not.
Does the <div> element affect SEO?
It has no direct effect. Semantic elements help search engines understand your page structure better than a sea of divs, so prefer them where they apply.
How do I center a div?
To center a div both horizontally and vertically, make its parent a flex container: display: flex; justify-content: center; align-items: center;. To center a fixed-width block horizontally, set margin: 0 auto; on the div. CSS Grid also works with display: grid; place-items: center;.
How do I create a div in HTML?
Write an opening and closing tag with your content between them: <div>…</div>. Add a class to style it with CSS or target it from JavaScript.
dialog dl