Français

<div>

Group content when no semantic element fits

— 1 min read

  • HTML
  • accessibility
  • semantics

<div> — The generic container

The <div> element is a generic container with no semantic value. Screen readers ignore it entirely. It is the last resort when no semantic element does the job.

When to use it

You want to group elements for styling or JavaScript behavior, and no semantic element (<section>, <article>, <aside>, <nav>, <figure>) matches your intent. If you can name what the block represents, there is probably a better element.

What you gain

Accessibility: nothing. A <div> is invisible to assistive technologies. That is precisely its purpose: it adds no noise to the accessibility tree.

Code example

<!-- Last resort: no semantic element fits -->
<div class="card-grid">
  <article class="card">
    <h2>First article</h2>
    <p>Content here.</p>
  </article>
  <article class="card">
    <h2>Second article</h2>
    <p>Content here.</p>
  </article>
</div>

Further reading