LETS TALK: Divs Divs & more Divs relation to Best Website Practices

On my side of the fence, I work for a company who still sees a large chunk of revenue from older browsers such as IE7. Obviously HTML5 isn't supported unless we use js to add them. So for support reasons we still use divs. In my personal projects, if the target audience is more future forward, I go with the basic html5 tags but for those that require older browser support, I stick with divs and assign roles to them.

Here's an a good read about the truth behind HTML5 http://www.creativebloq.com/html5/truth-about-structuring-html5-page-9122842

Hi Julian Price,

There's plenty of reasons to use HTML5 technologies. The audio and video elements can replace Flash components, features like viewport are great for mobile, you can create better interactivity with native drag and drop support, and so on. But what about the new elements that have no apparent functional purpose and only seem to be more semantic?

There's two main benefits:

1. Many semantic HTML5 elements can be made more accessible to screenreaders by utilizing WAI-ARIA roles. This W3C article titled Using WAI-ARIA in HTML contains a table that describes which elements have role attributes that can be definied. Even without roles, it's still a good idea to use these new elements because many screenreaders (present and future) will take advantage of them.
2. The first item should be reason enough, but using semantic elements has the added benefit of keeping your markup and stylesheets more organized.

There's also a third item that doesn't get mentioned as much. It's impossible for anyone to predict all the future devices and browsers that will become available in the next few years. My guess is that future web browsing experiences will take more advantage of these semantic tags in some way, but it's hard to say how for certain. Still, no harm in supporting those elements now.

Hey Julian Price,

To add to this…The HTML5 technologies are wonderful, and are only getting better with stronger support. While using HTML5 tags may make your markup semantically structured, you still need to make sure that your CSS remains maintainable, predictable, and reusable.

For instance: A selector such as aside header is not reusable––or modular––because it will style any header in an aside. In that case, it might be better to give the header element a modular class like secondary-header. The same can be said for selectors like header nav, section footer, and so forth… It might be best to stick with class names like primary-nav and main-footer – I think those have more meaning than tag selectors.

So, using the HTML5 tags alone as selectors is not recommended, especially on large-scale sites. I still think using divs is perfectly fine, too, as long you plan & execute your architecture well.

Like Nick mentioned, the advantage to using HTML5 tags is that the ARIA roles are already “built in” (for accessibility), and it’s something we should add to important sections of our site where divs are used.

Thank you Nick Pettit & Guil Hernandez for providing valuable feedback. I am attempting to go a modular approach since my website with become large site and will need to take approach to unsure certain classes are utilized in global variable way.