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.

Answer 3

The reason header , section , footer , and other such elements were created is to help with referencing them in css and scripting languages. W3C looked at the most common IDs web developers were using for div s and made the new elements in HTML5 accordingly. The reason div s and IDs is widely considered bad practice is because all those attributes clutters up the code. And as we all know, cluttered coding leads to mistakes and errors.

Where do you use them? That's pretty self explanatory. Take the header for example. It's most common use is the top of the web page. Right click on the stack overflow logo at the top and view the source. They're actually using a div with an ID of 'header'. Technically, that's bad practice.

A great use for div s is to create a wrapper around your entire content like this.

<div id="wrapper">
    <!--content-->
</div>

Then you can reference it in css to center:

#wrapper{margin:20px auto;}

Hoped this helped!