After a run of articles about elements that carry meaning, header, nav, article, section and the rest, it is time to look at the one that deliberately carries none. The div is HTML’s all-purpose container. It says nothing about what it holds. It simply groups things together so you can style or script them as a unit.
It has a mixed reputation. Used well, it is a perfectly good tool. Used for everything, it produces the pile of anonymous boxes that semantic HTML was designed to replace. Knowing the difference is most of what there is to learn.
What a Div Does
<div class=”card”> <h3>Website Health Check</h3> <p>A short description of the service.</p></div>
A div is a block level element, which means it starts on a new line and stretches across the full width available by default. It has no visual style of its own. Its entire job is to wrap content so that CSS or JavaScript can target it.
In this example, the class attribute gives the div a name that a stylesheet can use to add a border, background and padding. Without the class, the div would be invisible and have no effect at all.
Classes and IDs
<div class=”card featured”>…</div><div id=”contact-form”>…</div>
Divs rely on two attributes to be useful. A class can be shared by many elements, and one element can have several, which makes it ideal for styling groups of similar items. An id must be unique on the page, so it suits single items such as a specific section you want to link to or script.
Good names describe purpose, not appearance. A card or testimonial class still makes sense after a redesign, while a big-blue-box class becomes misleading the moment the colour changes.
Div and Span
<p>Our <span class=”highlight”>free</span> website review.</p>
The span is the div’s inline counterpart. Where a div wraps a block of content and sits on its own line, a span wraps a small piece of text inside a line, such as a single word you want to colour or emphasise. Like the div, it carries no meaning of its own.
- Use a div to group blocks of content, such as a card or a wrapper for a layout
- Use a span to style or mark a small part of the text within a sentence
- If the text really is important or emphasised, use strong or em instead, which carry meaning that span does not
When a Div Is the Right Choice
- Grouping elements purely for layout, such as a wrapper that sets up a Flexbox row or CSS Grid
- Creating a container that centres content or limits its maximum width
- Applying a background, border or spacing to a set of related elements
- Building small components, such as cards or buttons, that have no more specific element to describe them
- Giving JavaScript a hook to attach behaviour to, where no meaningful element exists
When to Reach for Something Else
<!– Less helpful –><div class=”header”>…</div><div class=”menu”>…</div><div class=”footer”>…</div><!– Better –><header>…</header><nav>…</nav><footer>…</footer>
The rule is simple. Before using a div, ask whether a more descriptive element exists. If the content is a header, navigation, footer, article, section, list, button or heading, there is an element for it, and using it gives screen readers, search engines and other tools information a div cannot.
Buttons deserve a special mention. A div styled to look like a button does not behave like one. It cannot be reached with the keyboard by default, it is not announced as a button to assistive technology, and it does not respond to the Enter or Space keys. A real button element does all of that for free.
The Problem of Too Many Divs
Developers sometimes call it divitis, the habit of nesting divs inside divs inside divs until the markup is a thicket of anonymous wrappers. It makes code harder to read and maintain, adds weight to the page, and can slow down rendering on complex pages.
It is particularly common in sites built with page builders, where each row, column and widget may add several layers of wrapper. A page can look simple on screen and still carry dozens of nested divs underneath. A leaner structure is often faster and easier to keep working.
Div and WordPress
The WordPress block editor uses divs heavily, since many blocks output a div with classes that describe their style. The Group block can output a div, or a more specific element such as section, article, header or footer, if you choose it in the block settings. Choosing the right element is one of the simplest ways to improve a page’s structure without writing any code.
A Quick Div Checklist
☐ Check first whether a more meaningful element fits before using a div
☐ Use div for layout and grouping, and span for small pieces of inline text
☐ Name classes by purpose, not appearance
☐ Never use a div where a real button, link or heading belongs
☐ Avoid unnecessary nesting, and flatten the structure where you can
☐ Use the Group block’s element setting in WordPress to choose a semantic wrapper
Frequently Asked Questions
Is using divs bad for SEO?
No. Divs are perfectly normal and do not harm rankings. The concern is replacing meaningful elements with divs, which makes your structure less clear to search engines and assistive tools. A good page uses divs where they belong and semantic elements where they fit.
What is the difference between div and span?
A div is a block level container that starts on a new line and groups blocks of content. A span is an inline container that sits within a line of text and wraps a small part of it. Neither carries any meaning of its own.
How many divs is too many?
There is no fixed number. The warning sign is wrappers that serve no purpose, such as a div inside a div that does nothing. If you can remove one without changing the layout or behaviour, it was probably unnecessary.
Should I use a div or a section?
Use a section when the content is a themed part of the page with its own heading. Use a div when the grouping exists only for styling or layout. If the block would not need a heading, a div is usually the better choice.
Why does my page builder create so many divs?
Page builders wrap each row, column and widget in layers of containers so they can offer flexible controls. It is a trade-off between ease of design and leaner code. Some builders now offer cleaner output options, and block themes tend to produce lighter markup.
Curious How Clean Your Site’s Code Is?
If you would like a second opinion on how your pages are built under the hood and whether the markup is helping or holding you back, get in touch for a plain conversation with no obligation and no sales pitch.