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.)
3 thoughts on “DIVs role in HTML5”
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.
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.
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.