Design Development

Div VS Section – Who is the Champion?

When HTML5 was introduced by W3C for the first time, some people though that it will be end for long life of div tag. These people saw new sectioning elements of HTML5 as a new thing that will replace the divs. As we see today, they were wrong. But there are still people who don’t know when to use which tag. It is also confusing for beginners who want to dive into web design or development. Let’s take a closer look.

As a gentlemen, we will take older div tag as first. Div tag was first introduced in 1995 but appeared two years later in HTML 4.01 working draft. Div is used to group large sections of HTML elements to format them with CSS. They are often combined with span tags. The difference between them is that the div tag is used with block-level elements while, on the other hand, the span tag is used with inline elements. Neither div or span tag have no semantic meaning. They are just containers for other content of the page.

Now, sectioning elements introduced in HTML5 like section, main, footer, article, nav and etc. These elements are a bit different then div and span tags, they give semantic meaning to document structure. When you use nav or section and other tags on your page, you are saying to browser and search robots on the web what that particular part of page is supposed to mean or do. For example, you strictly defining where the navigation is by putting anchor tags between opening and closing nav tags or defining main content of the page with main tag. In a short, these tags are not plain containers but carry semantic meaning.

Next time when you will be thinking about the markup of your page and have to choose which element to use, ask yourself if you want just to style something or if you also need to describe functionality of that part of page. For plain styling or non-semantic structuring of code go with divs. Otherwise, dive into HTML5 and go with new sectioning elements.

Conclusion? As you now know, this fight has no winner. The reason is that divs and sectioning tags are not just in different weight categories, but they are even in different sport. You cannot compare them because they all serve different purpose and have different goals. That’s it, divs will stay with us for a while.

If you liked this article, then please consider subscribing.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.