CodingwithDom
Subscribe

Which HTML element should I use instead of a div?

HTML, CSS & JS 2 min read
Short answer

Use <header>, <nav>, <main>, <article>, <section>, <aside> and <footer> for page structure, and <button>, <a>, <label> for anything interactive. Reach for <div> only when nothing else fits.

html
<header>
  <nav aria-label="Main">…</nav>
</header>

<main>
  <article>
    <h1>Lesson title</h1>
    <section>
      <h2>Step one</h2>
    </section>
  </article>
  <aside>Related links</aside>
</main>

<footer>…</footer>

Screen-reader users navigate by these landmarks. A page of nested <div>s gives them no map at all.

#The one that matters most

html
<div onclick="save()">Save</div>       <!-- broken -->
<button type="button" onclick="save()">Save</button>   <!-- correct -->

A real <button> is focusable, activates on Enter and Space, is announced as a button, and shows a focus ring. Reproducing that on a <div> takes tabindex, role, and two keyboard handlers — and people still get Space wrong.

<a href> navigates somewhere. It should have a URL, and opening it in a new tab should make sense.

<button> performs an action on this page.

<a href="#" onclick="..."> is neither. If it does not navigate, it is a button.

#section vs div

A <section> should have a heading. If you cannot name it, you want a <div> — a purely presentational wrapper is exactly what <div> is for.

#Other elements worth knowing

html
<time datetime="2026-03-15">March 15</time>
<figure><img …><figcaption>A caption</figcaption></figure>
<details><summary>Show more</summary>…</details>
<dialog>…</dialog>
<progress value="70" max="100"></progress>

<details> gives you an accordion with zero JavaScript. <dialog> gives you a modal with focus trapping, Escape-to-close and top-layer rendering.

#One h1, in order

Use a single <h1> per page, and do not skip levels — h2 then h4 breaks the outline that screen-reader users navigate by. Style with CSS if a heading needs to look smaller.

Related answers