DIVs role in HTML5

Once we have been progressively adopting the HTML5 technology more and more each day lately, the well known “NO MORE DIVs” propaganda took place.

I was surprised to see that “Divless layouts” already got promoted on some template websites, using the new HTML5 structural elements. Is it me, or we’re confusing the tables -> divs era with DIVs -> HTML5?

Truth is, we have been abusing the DIV element with HTML4, pretty much because we have had no alternative. Now that we have HTML5 which came with some great new structural elements, we no longer have to DIV our way through our layouts.

The reason why DIV wasn’t the best option to use when creating a layout is because the element has no meaning, thus creating application-ready layouts was difficult.

The SECTION element will most likely be used more than the other structural elements and there’s no limit as to how many you can add, but bear in mind that it is not a complete DIV replacement. With the new structural elements, a layout will definitely be easier to read.

However, the DIV still has a role, hence it’s not obsolete from HTML5. It’s a great divider and a great grouper. Abusing the section element will decrease your layout’s meaning.

Take advantage of all the new structural elements HTML5 has to offer and use DIVs for internal use (i.e. grouping a block of elements, target specific areas for further styling etc.)

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

3 thoughts on “DIVs role in HTML5

  1. You realise of course that if one replaces every use of div with section, then you haven’t added any semantics at all. You have simply changed the name of the tag. Argument over, back to work.

  2. @Fletch

    Hehe, that’s pretty much what I said :)

    People should not abuse the new elements by using them endlessly, as it will decrease the semantic code of a page. I was merely pointing out that DIV still has a role and it should be used, just so SECTION wouldn’t be the new DIV.

  3. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">