You can still use div

by .

“Sorry, can you say that again?”, I hear you ask. Certainly: you can still use <div>! Despite HTML5 bringing us new elements like <article>, <section>, and <aside>, the <div> element still has its place. Let the HTML5 Doctor tell you why.

Status: Unchanged

In HTML 4, the <div> element was defined to be a generic element for structuring a page. Although you can allude to the nature of its content by assigning id and class attributes with meaningful names, a <div> has almost no semantic meaning. The HTML5 definitionis basically the same as in HTML 4:

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

<div> is literally a container for flow content*, a collection of (hopefully) more semantically marked-up content that may need to be grouped together. It lies at the opposite end of the semantic spectrum from the new HTML5 structural elements.

* For those who haven’t encountered this term before, flow content elements are the same as HTML 4′s block-level content elements.

<div> vs semantic elements

The new semantic elements (<article>, <section>, and friends) justifiably capture a lot of <div>‘s territory, but <div> still has a place in the HTML5 world. You should use <div> when there is no other more semantically appropriate element that suits your purpose. Its most common use will likely be for stylistic purposes — i.e., wrapping some semantically marked-up content in a CSS-styled container.

Ask yourself questions about your content: Is it part of the site’s navigation? Is the content secondary to its surrounding content? If this content were printed on a page with nothing else, would it make sense? You will need to evaluate your content carefully, thinking about what it is and pairing it with an appropriate element. I recommend taking a look at The Amazing HTML5 Doctor Easily Confused HTML5 Element Flowchart of Enlightenment to help you choose the right element for your flow content.

Example Uses

Below are a few examples of how you can still use <div> appropriately in your HTML5 sites.

Site Wrapper

While you can use the <body> element as a “natural” wrapper for site content, many people like to use <div> as top-level container for styling the entire site. This is an appropriate use of <div>, as a site wrapper has no meaning or purpose other than to aid styling.

<body>
  <div id="wrapper">
    <header>
      <h1>My Happy Blog</h1>
      <nav>
        <!-- ... -->
      </nav>
    </header>

    <!-- ... rest of site content ... -->
  </div>
</body>

Intro paragraph

If you want to style a particular block of content, like the intro to an article, <div> is a perfectly suitable element:

<article>
  <h1>Big announcement</h1>
  <div class="intro">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <p>Sed massa metus, molestie nec facilisis non, lobortis ac orci. Suspendisse porttitor laoreet mi, at laoreet dolor rhoncus non. Sed ut massa quis mi placerat iaculis non sit amet odio. Cras tempus urna vitae felis rutrum porta.</p>
  <p>Maecenas auctor lacus eget mauris tincidunt consectetur. Donec molestie malesuada ligula, sed feugiat massa consequat sit amet. Pellentesque orci metus, ultricies sit amet adipiscing eget, gravida fringilla dui. Vestibulum accumsan dui diam, eget venenatis urna. Sed eu lobortis justo. Aliquam erat volutpat. Aliquam erat volutpat.</p>
</article>

The first two paragraphs aren’t really that different from the rest of the article, but by wrapping them in a <div>, they can be styled to capture the reader’s attention and draw them into the article. Of course, if you only want to style the first paragraph, you could use a CSS selector like h1 + p {} or article p:first-child {}. But if you want to style an article’s first paragraph only sometimes, or you need the style to work in older versions of Internet Explorer, or (as in this case) you want style more than one paragraph, a wrapper <div> is the way to go.

Other uses for <div>

As previously stated, use of <div> will decline in favour of the new semantic elements. If you’re using lots of <div>s and only a few of the semantic elements in your HTML5 sites, then you’re really not taking advantage of what HTML5 has to offer.

That said, you may need to rely on <div> as you transition into the world of HTML5. For example, if many of your site’s visitors use Internet Explorer with JavaScript disabled, then you won’t be able to style the new elements for these users. A piece of advice we gave back in our article on how to use HTML5 in your client work right now was to use <div> with classes named after the new semantic elements, getting you to think about how you would use the new semantic elements without actually using them.

<div class="article">
  <div class="header">
    <h1>My blog post</h1>
    <p>An example using divs with classes instead of the new elements.</p>
  </div>
  <!-- ... content ... -->
</div>

<article>
  <header>
    <h1>My blog post</h1>
    <p>The same article but switched to the new elements.</p>
  </header>
  <!-- ... content ... -->
</article>

This makes it simple to switch to the new elements when it becomes practical (think “search and replace”).

Recap

You will certainly use <div> less often in HTML5 than you did in HTML 4, but it’s still a valuable element to have in your toolkit. Sure, it’ll be picked last for the team because everyone else is better, but it’ll be the best damn generic container element there is!*

Look at the more semantically valuable elements and consider whether your content would benefit from what they offer. Need help deciding? Take a look at some of these articles right here on HTML5 Doctor:

For more, check our article archive. And if all else fails, use a <div>!

* As it should be, it’s the only one apart from <span>. That said, if your content is just text, perhaps the oft-overlooked <p> would be more appropriate.

49 Responses on the article “You can still use div”

zcorpan says

> * For those who haven’t encountered this term before, flow content elements are the same as HTML 4’s block-level content elements.

No, it’s not. It’s similar to HTML4′s %flow. That is, both block-level and inline elements.

fjpoblam says

Yes! Most assuredly I use divs. As you described, I use a div now and then to call the reader’s attention to a couple of sections in an independently-styled block. A good example for me is, an inset box floated to the right of the main text, shaded and with a border, with perhaps a “Did you know?” section and a “For more information…” section.

W. says

Shouldn’t the Element be used to wrap the intro to a text?

dj says

Does this mean those html grid systems, with a gazillion div’s, will go away? Thx

Robson Sobral says

I’m missing the “role” attribute. It is so useful!

skottey says

When I look under the hood of some sites built in HTML5, I often do not see any elements in use at all, which is scary to me. The overuse of , and other new HTML5 elements, does not always make sense, semantically. While the overuse of the element can potentially make the markup messy and bloated (depending on where and why it is being used), it will always be the greatest tool when styling is needed on a block of content (exactly as this article states).

I should also mention that I literally just had “” tattooed on my left wrist, and “” on my right wrist just five days ago. I have strong feelings for it.

skottey says

When I look under the hood of some sites built in HTML5, I often do not see any <div> elements in use at all, which is scary to me. The overuse of <section>, and other new HTML5 elements, does not always make sense, semantically. While the overuse of the <div> element can potentially make the markup messy and bloated (depending on where and why it is being used), it will always be the greatest tool when styling is needed on a block of content (exactly as this article states).

I should also mention that I literally just had <div> tattooed on my left wrist, and <div> on my right wrist just five days ago. I have strong feelings for it.

NIels Matthijs says

Good article, though I wouldn’t focus as much on the stylistic needs for using divs.

When there is a need to style, it usually comes forth of a need to structure. I use a site (page) wrapper too, but I use it to differentiate the page content from possible overlays which lie outside the natural content of my page. That way the wrapper leaves enough room for structural flexibility, even when there are no overlays defined.

Tiago Celestino says

Nice! I’m working HTML5 and I’m using for align the element block. and for elements children

David Rocks says

Still have questions. If sections are not to be used to create containers and/or for styling, it seems that that the use of html5 will see an expansion of file sizes as the ‘semantic’ elements are added for semantic purposes while we still carry around all the div statements for physical structure and styling of such. This seems especially hard for CMS’s that integrate multiple chunks of specialized html. Is

&ltdiv id=comment&gt
&ltarticle&gt

better than

&ltarticle id=comment&gt ?

eFBé says

i loved to have a wrapper tag named like and which could have been the real wrapper of the whole content under body. maybe next time :)

Matthieu Delahaye says

David: I think you slightly misunderstood Mike. You may style sections, but you may not add sections for the sole purpose of styling if the contained element do not represent a logical subdivision of your content.

But that’s for the ideal HTML5. However in on a practical case this is different if you want to author HTML5 today while there is still a significant amount of browser that do not understand it.

If you take for instance IE, you cannot style unknown tags and in this specific situation article, section and al are in this case. As Mike evoked it, you may use javascript to make IE understand them, but this only work if javascript is enabled. Therefore, relying on additional div for styling is required in this case. Indeed you would see an increase of tags, but this is transitional (and when you see how many IE6 are still in use, you can infer the transition will be long).

[...] is ugly and unusable? What got me thinking about this was a recent post on HTML5 Doctor about the lonely <div> and the fact that in this crazy mixed-up world of HTML5, the forgotten div still has feelings. [...]

David Rocks says

re: M/ Delahaye. Makes sense but will be an effort in reality I think. Code purpose change as they evolve and I think I will spend some time going back over code to be comfortable about appropriate use of html5. But then, code review never really hurts.

I expect that htmlshiv.js or modernizr.js will suffice for older browsers for now as I’m not sure I need to worry about javascript being turned off that much. Is this more likely than running ie6?

kureikain says

imo, using new tag are someway to other people working on it really know what it mean!
When you put ,.. ,,,no one know really what u means if they user other language like …etc
Using makes it more clear and make the front-end development easier!

I wish with html6, we never worry about special , tag will be anything we want! Looks at this markup:

quite beautiful, right?

Your Questions Answered #12 | Html5 Tutorials says

[...] If you need a <div> for styling purposes, that’s perfectly fine. You could also achieve the same effect by doing as you suggest and setting a background on the <html> element. For more, take a look at our recent article You can still use <div>. [...]

buy research papers says

Thank you for the great information. I am a web builder. I am always used this tag for templates development and alignment setting. In my point of view the tag is a very powerful tool for Web developers. I know most of them web developers are using this tag instead of tag for alignment setting and designing. This tag used to we can easily make CSS code. Many internet research writers are written an article and blog about web designing and CSS designing. You can easily buy research papers template development techniques of web templates and coding system.

HTML5 « Script Curious says

[...] You can still use div | HTML5 Doctor (html5doctor.com) [...]

Joff says

I’ve started to feel that I’ve been overusing the section element so this article’s helped to confirm my fears. Should I be using divs more for “sections” of the page, such as containers for non-textual elements? (Banners, etc)

Dan Harper says

Of course, if you only want to style the first paragraph, you could use a CSS selector like h1 + p {} or article p:first-child {}.

In that case, “article p:first-child {}” wouldn’t work – ‘p’ isn’t the first child of ‘article’, the ‘h1′ is. It should be “article p:first-of-type {}”.

“:first-child” always trips me up.

Dan says

@skottey:

I should also mention that I literally just had tattooed on my left wrist, and on my right wrist just five days ago. I have strong feelings for it.

So, you didn’t close the div?
You aren’t a div unto yourself?
;-)

Dan says

pfft.

I should also mention that I literally just had < div> tattooed on my left wrist, and < div> on my right wrist just five days ago. I have strong feelings for it.

krishnawebdevelopers says

Hi Friends,
I really dont like the using the divs, it really sucks.
Is it fine I to keep using table tag, become it is really easy to do.
Please give ur suggestions.

[...] <body> <article> <h1>Blog post title</h1> <p>Blog post content</p> </article> </body> The document is untitled. Somewhat reluctantly, Johansson settles on marking up the website’s title in h1 and using another h1 to mark up the article’s title. This is a sensible solution and is backed up by the results of the WebAIM screenreader user survey, in which the majority of respondents stated a preference for two top-level headings in exactly this format. This same approach is also widely used on static pages that are built with HTML5 structural elements, and it could be very useful indeed for screen reader users. Imagine that you are using a screen reader to find a decent recipe for chicken pie, and you have a handful of recipe websites open for comparison. Being able to quickly find out which website you are on using the shortcut key for headings would be much more useful than seeing only “chicken pie” on each one. Not too far behind two top-level headings in the screen reader user survey was one top-level heading for the document. This is probably my preferred option in most cases; but as we have already seen, it creates an untitled body, which is undesirable. In my opinion, there is an easy way around this problem: don’t use article as a wrapper for single-blog posts, news items or static page main content. Remember that article is sectioning content: it creates a sub-section of the document. But in these cases, the document is the content, and the content is the document. Setting aside the name of the element, why would we want to create a sub-section of a document before it has even begun? Remember, you can still use div! [...]

Stan says

I really enjoy this article, and the use of div’s

thank you.

StnCham says

@Dan

So, you didn’t close the div?
You aren’t a div unto yourself?

Ha!

@skottey

I should also mention that I literally just had < div> tattooed on my left wrist, and < div> on my right wrist just five days ago. I have strong feelings for it.

You know, since you didn’t close, you’ll not validate. :P

Narayguy says

Pretty darn helpful. I’m new to HTML 5 but it’s nice how there are overlaps. Personally, I run a college advice site and am mainly focused on writing, but knowing a few HTML hacks never hurts.

[...] or as html5doctor concluded: You should use <div> when there is no other more semantically appropriate element that suits your purpose. Its most common use will likely be for stylistic purposes — i.e., wrapping some semantically marked-up content in a CSS-styled container. (full article: http://html5doctor.com/you-can-still-use-div/) [...]

smcdee says

Thanks so much – very helpful…

Tim says

I disagree with wrapping the p with an intro div. Why not just put the class on the p itself. It makes no sense to use a div there. It’s less semantic, bloats up the markup, adds a nonsensical hierarchy, and provides no value. You are specifying that the p is special in a certain way, so the class goes on the p, you don’t use extra markup to specify that.

Mike Robinson says

@Tim – If you take a closer look at my example you’ll see I have two paragraphs in the “intro” <div>. The appropriateness of a wrapper <div> is entirely subjective. Maybe your intro paragraph(s) could be styled directly with classes, or maybe they need the aid of a <div>. As with most scenarios in HTML, think about what you are trying to achieve and craft the most semantic, usable and accessible solution.

Andreas Pazer says

If you take for instance IE, you cannot style unknown tags and in this specific situation article, section and al are in this case. As Mike evoked it, you may use javascript to make IE understand them, but this only work if javascript is enabled. Therefore, relying on additional div for styling is required in this case. Indeed you would see an increase of tags, but this is transitional (and when you see how many IE6 are still in use, you can infer the transition will be long).

Lelala says

Thanks a lot, your post made it much clearer to me.
Luckily, no need to rewrite already existing and working markup :-) Nice

lobwedge says

You’ve got it completely wrong… it’s <tables> all the way down!

lance says

Ok so I’m completely way behind here. I have been hesitant on using ‘section’, ‘article’, etc. I would like to start using these more though I have been implementing ‘header’ and ‘footer’ for a sometime now. In the world of interwebs information regarding what is the most concrete thing to do can be fuzzy at times. I’d much rather prefer someone say, “no more divs” :) It makes it more concrete and less confusing. When someone looks at my code, I don’t want them going, “Ha they’re using html5 doctype and have no damn sections or articles…all I see is divs.” Good article. I will still use my divs

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.