Search code examples
htmlstyles

What to use instead of div elements in HTML5


I read in the HTML5 specification that the generic div tag should only be used as "last resort," when a more specific element is unavailable. For example, the tags header, footer and section are preferred for grouping content thematically.

But it seems like the vast majority of websites still use div as the primary element. My question is, how often and in what contexts is it appropriate to use a div? And which other elements should be used in its place?

I'm looking for answers based on the specification rather than personal opinions. Thanks!


Solution

  • There isn't anything that takes the place of <div> (theres a reason its still in the spec), but HTML5 has more elements available that are more specific.

    In addition to <header>, <footer>, and <section> there is:

    • <nav>
    • <article>
    • <aside>
    • <main>
    • <details>
    • <summary>
    • <figure>
    • <dialog>
    • <menu>
    • and more!

    Basically any new HTML5 element can take the place of a <div>.

    When should you use a div? You answered it yourself:

    when a more specific element is unavailable

    MDN has a HTML5 element list which contains all standard HTML5 elements, and indicates which elements are new with HTML5.