How Use Of The DIV Tag Has Changed With HTML 5

If you are a seasoned XHTML/CSS developer or front end designer, you know that the DIV tag is likely the single most versatile layout element when ordering the structure of your web page. Marking up sections, sidebars, headers, etc., are all done using DIVs. With the introduction of HTML 5, we now have more appropriate tags to specifically handle those same things, like headers and so on. With that being the case, what’s the use of the DIV tag now? Will its usage decrease? Will it be deprecated altogether?

The new HTML 5 spec states that the DIV is in fact not being deprecated, but authors should use more judgment when using them. In fact, the language of the specification reads to the effect of, don’t use it unless there is absolutely no other appropriate element.

What exactly does this mean? Simply put, you should begin learning when it’s appropriate to use the new semantic tag elements if they represent a portion of your content, rather than unthinkingly wrapping it in a DIV. Let’s see how that’s put to use:

Right now with HTML 4, to introduce a new section to your content, you would create a DIV, give it an appropriate id, then style that id using CSS. Anyone reading your code can easily spot the new section by the id. In HTML 5, you will simply use the new “section” tag element, in place of the DIV. You would do the same for a footer. Instead of DIV with an ID of “footer”, you simply add the new “footer” tag.

Now we know there are more semantically correct tag elements to choose from, and we know the DIV tag is not being deprecated. So when IS it appropriate to use a DIV? Take an instance of a layout. You may have an article section, and beneath it you have buttons for sharing the article. The buttons pertain to the article, but semantically, they are not related to the content of the article. In order to have the buttons grouped properly, this would be a good use for a DIV. Also, with the new header and footer tags, they cannot contain headers and footers themselves. So if you need to organize a group of links or icons in the footer, again, use a DIV.

Expect that DIVs will still be used to wrap entire pages in a container, or to give the impression of printed type in columns. DIVs will still play a vital role in organizing and laying out your page content. The new spec only states that you consider the new elements first, and apply them if they make more semantic sense before using a DIV.


Source by Corey N

Leave a Reply

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

Save & Share Cart
Your Shopping Cart will be saved and you'll be given a link. You, or anyone with the link, can use it to retrieve your Cart at any time.
Back Save & Share Cart
Your Shopping Cart will be saved with Product pictures and information, and Cart Totals. Then send it to yourself, or a friend, with a link to retrieve it at any time.
Your cart email sent successfully :)