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!

Skyler

The vast majority of websites were built before HTML5 became widely accepted. Have you looked at the specs for the new elements? Their intended purposes are pretty clear. – Faustinafaustine

This is a pretty good article I came across html5doctor.com/you-can-still-use-div – Lalitta

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.

Incisor

Do these offer any advantages outside of being more explicit for the code reader? – Romanaromanas

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.

Elijaheliminate

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 divs and made the new elements in HTML5 accordingly. The reason divs 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 divs 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!

Obituary

Answer 4

In HTML5, instead of using <div> elements, you can use more semantic elements that provide better structure and meaning to your markup. Here are some I've worked with:

1. header: Use a header element instead of <div id="header"> for the top section of your page or article.
2. nav: Using the nav element instead of <div id="nav"> for navigation links is considered best practice.
3. main: it's better to use the main element instead of <div id="main"> for the main content section.
4. section: Use the section element instead of <div id="section"> for a self-contained section of related content.
5. article: Use the article element instead of <div id="article"> for a complete, independent piece of content.
6. aside: The aside element is best used for a sidebar or secondary content instead of <div id="sidebar">.
7. footer: Use a footer element instead of <div id="footer"> for the bottom section of your page or article.
8. figure: Use the figure instead of <div id="figure"> for a figure or image with a caption, personally I don't use this particular one often but I think it's something you should know.
9. figcaption: Use the figcaption element instead of <div id="caption"> for a figure caption.
10. Other semantic elements: Use elements like <address>, <blockquote>, <dialog>, <menu>, and <menuitem> for their respective purposes, the element names are self explanatory.

When you use semantic elements it improves the structure and accessibility of your HTML, making it easier for search engines, screen readers, and browsers to understand your content. If you're a developer who's already used to using <div> elements, it might take some time for you to adjust.

Remember, <div> elements are still useful for wrapping elements or applying styles, but use semantic elements whenever possible to add meaning to your markup.

You can also visit the Mozilla doc website on HTML5 for more semantic elements and their proper uses.

Whitlow