Exactly how Use of the DIV Tag Has evolved With CODE 5



A high level seasoned XHTML/CSS developer or front end designer, you know that the DIV tag is likely the only most flexible layout element when buying the structure of your web page. Marking upwards sections, sidebars, headers, etc., are all done using DIVs. With the introduction of HTML 5, we now have appropriate tags to specifically handle those same things, like headers etc. With that being the case, what’s the use of the DIV marking now? Will its consumption decrease? Will it be deprecated altogether?

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

What exactly performs this imply? 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 is put to use:

At this time with HTML 4, to introduce a new segment to your content, you would create a DIV, give it an appropriate id, then style that id using CSS. Anybody reading your code may easily spot the new segment by the id. Inside HTML 5, you will simply use the new “section” tag element, in place of the DIV. You should do the same for a footer. Rather 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 marking is not being deprecated. So when IS it appropriate to use a DIV? Take an instance of a design. You may have an article section, and under it you have switches for sharing the article. The buttons pertain to the article, but semantically, they are not related to this content of the article. In order to have the buttons arranged properly, this could be a good use for a DIV. Also, with the new header and footer labels, 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 provide the impression of imprinted enter columns. DIVs will still play a vital role in organizing and showing off your page content. The new spec only says that you consider the new elements first, and apply them if they make more semantic sense before using a DIV.

Share it with your friends
Share on Facebook
Tweet about this on Twitter
Share on LinkedIn