Divs still have their place

Or – Don’t use semantics wrong.

HTML5 is a wonderful thing, it has provided us with elements that really help to describe the content that resides within them.

When HTML5 started to become widely adopted and accepted as the standard for production ready web projects there was a big push from the community to get people to think about some of these new elements and to use them in place of  <div>s.

A good example of this is <aside>. I have seen people getting virtually crucified for using a <div> when an <aside> does a much better job of explaining that some particular content is supplementary information.

Tables

It reminded me of the time we moved from table based layouts to CSS based ones – people rightly rose up in arms when they saw someone incorrectly use a <table> when a <div> would do.

One of the issues is that we were shouting that tables are bad, not that semantics are good. The downside of this is that a lot of people just stopped using tables altogether.

Tables are great for displaying tabular information – and there is a lot of tabular information on the web today that is incorrectly marked up using <div>s and <span>s because people are too scared to consider <table> anymore.

Consider the Div

So what does all this have to do with <div>s still having their place?

A common theme I have started to see in web design over the past year or so is people using elements like <section>, <header> and <aside> incorrectly.

What appears to be happening is people have had it beaten into them that these new elements are better and <div>s are bad. The correct message is that you should consider the semantics of your markup. So we see the same thing as we got after the move away from table based layouts – people avoiding the old elements altogether.

The problems with just replacing Divs

You might wonder why this is a problem – at the end of the day they are all block level elements without their own browser based styling so the end user won’t see any difference.

The problem is that all these other elements have a semantic meaning and even though they look the same in the browser, machines reading your code aren’t smart enough to know that you didn’t actually mean the content in an area represents a complete <article>.

The other problem is that by having no semantic information associated with them, in a strange way <div>s do have a meaning, which is to say this is just an arbitrary group of stuff. In other words – there is nothing to interpret here, move on!

If there is one take away

Please don’t worry about following the latest development trends more than you worry about semantics.

Someone who has considered intent and made an educated choice is way further down the path to making great sites than someone who has read a load of articles on why table based layouts were the devil.