What to use instead of div elements in HTML5

Question

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!

Answer 1

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.

Answer 2

The thing to remember is that div tag is still a part of HTML5 and it’s not obsolete, yet. However, div element has been abused a lot with HTML4, and rightfully so as there were never any alternates to it. Now that HTML5 has included some great new structural elements, div is no longer the best option for creating layouts.

The main disadvantage with div is that the element has no meaning due to which creating application-ready layouts is very difficult. The new structural elements introduced in HTML5 will surely help a lot with that issue.

The section element will most likely be used more than the other structural elements like header, footer etc. mainly because it is not specific as others. Also there is no limit as to how many structural elements you can add but the thing to remember is that section is not a complete div replacement.

div still has a role in HTML5. It is great for grouping similar elements as well as dividing elements as needed. Also section should not be used just for styling because section was not intended to be a wrapper.