Semantic HTML
Published on
The humble div. It can be anything, a button, a link, a table, a heading. It is truly versatile. And it MEANS NOTHING!
It is just a generic container for a blob of content. Think of it as a cardboard box. You can put anything in it. But that versatility is also its downfall.
Anytime you use a div instead of one of the built in elements, you need to recreate all the behavior of that element. Your button styled divs need to be able to be activated by a keyboard, need to be the tab flow of the document, need to be announced correctly by ARIA, or you could just style a button element and get all of that for FREE.
Better options than div
Are you showing data in a tabular format? Are there columns and rows? Why not try a table?
Do you like pushing buttons? There is a button!
Are you showing the progress of a file download? Or some other process? Did you know there is a built in progress element that is compatible with IE?!
Looking for something to title your page with? Something that conveys the importance of the statement? Try a heading. They have the added benefit of making a virtual outline of your content and can be used to navigate the page.
Got a group of links that is the navigation for the page? Use the nav element.
What about spans?
The span element is an inline generic container. It is the cousin to the div. It has no meaning by itself and should be the last choice as well.
Text styling isn’t just making text pretty, it traditionally conveyed other meanings such as importance or different voice and there are elements for all of these.
The idiomatic text element <i> is no longer just italics. It has been defined more generically so it can be used for more situations instead of just italics.
Em and strong are still around.
Bring Attention To is just <b>. It doesn’t convey the same meaning as strong or em, just different text styling.
With HTML5 many of the classic elements have gotten new definitions and new elements have been added. Try them out instead of just throwing divs and spans everywhere.