Generic Containers (<span>, <div>) — HTML

<span> and <div> — Generic Containers

Not everything on a page maps neatly to a semantic element like <nav> or <article>. For the rest, HTML gives you two purely generic containers: <div> for block-level grouping, and <span> for inline grouping. Neither carries any inherent meaning — they exist purely as styling and scripting hooks.

<div> — Generic Block Container

<div> groups block-level content with no semantic meaning of its own. It's the workhorse of CSS layout — cards, containers, grid cells, and wrapper elements are almost always <div>s.

div.html

HTML

<div class="card">
  <img src="avatar.jpg" alt="User avatar">
  <div class="card-body">
    <h3>Jane Doe</h3>
    <p>Frontend Engineer</p>
  </div>
</div>

<span> — Generic Inline Container

<span> does the same job as <div> but for inline content — it wraps a piece of text (or other inline elements) so you can target it with CSS or JavaScript, without breaking the flow of the surrounding line.

span.html

HTML

<p>
  Your order total is <span class="price">$42.50</span>, including
  <span class="tax">$3.50</span> in tax.
</p>

When to Reach for Them vs Semantic Elements

The rule of thumb: always check if a semantic element fits first. Only fall back to <div>/<span> when none of the meaningful elements apply.

Situation	Better choice
Wrapping the page's main navigation	`<nav>`, not `<div>`
A self-contained blog post or comment	`<article>`, not `<div>`
A sidebar of related links	`<aside>`, not `<div>`
Grouping a card layout with no semantic role	`<div>` is correct
Highlighting a price inline for styling only	`<span>` is correct
Marking inline text as important	`<strong>`, not `<span>`

'div soup' is a code smell

A page built entirely from nested <div>s (sometimes called "div soup") gives screen readers and search engines nothing to work with — every region looks the same. Reach for <header>, <nav>,<main>, <article>, <section>, <aside>, and <footer> wherever they genuinely apply, and reserve <div> for the layout glue in between.

Styling Hooks via class

Since <div> and <span> carry no meaning, class (and sometimes id) is how you make them useful — as targets for CSS selectors and JavaScript queries.

styling-hooks.html

HTML

<style>
  .badge { padding: 2px 8px; border-radius: 999px; background: #eee; }
  .badge--new { background: #d1f4e0; color: #0a7c42; }
</style>

<p>
  Version 2.0 <span class="badge badge--new">New</span> is now available.
</p>

One class per concern

Keep class names describing *what the thing is* (`.price`, `.badge--new`) rather than *how it looks* (`.green-text`) — that way the markup stays meaningful even as the visual design changes.

Quick Reference

Element	Display type	Use for
`<div>`	Block	Generic grouping of block-level content (layout, containers)
`<span>`	Inline	Generic grouping of inline content (styling a word/phrase)

Neither element implies any meaning to browsers, search engines, or assistive technology.
Always ask "is there a semantic element that fits better?" before defaulting to <div>/<span>.
class and id are what make these generic containers useful as targeting hooks.

Both are perfectly valid

Using <div>/<span> isn't "bad HTML" — every real site uses plenty of both. The goal is just to not use them as a substitute for semantic elements that already communicate the right meaning.