Adding HTML5 Markup Elements on your website

Almost everyone is on the HTML5 Band-wagon. Seems to be the catch-phrase these days. You would hear the customers asking as to when their site is going to become HTML5 enabled. If you are not implementing HTML5, then the impression is that you are not a cutting-edge techie.

Stop. Rewind. Remember that HTML5 is still work in progress and has only partial support across browsers. If you visit "When Can I Use?", you would understand how HTML5 support varies across browsers. Internet Explorer seems to be the major culprit and IE6 is almost without any HTML5 support.

Play. Can I use HTML5 on my public-facing www website?

  • Yes, if your visitor demographic does not include visitors using in IE6 to IE8 with JavaScript disabled. Internet Explorer 6-8 poses a problem as they do not recognize unknown elements (i.e. – new HTML5 tags).
  • Yes, if you are willing to sacrifice the IE6-8 JavaScript disabled users, and fix HTML5 for IE by using HTML5 Shiv (JavaScript Fix).
  • Yes, if you are rendering your HTML based on browser type from your web server, you could refrain from rendering HTML5 elements and avoid the IE issue. Effectively, you will be rendering different HTML versions to different browsers.

So what are the reasons you would want to use HTML5 elements?

I’m specifically talking about new HTML5 elements and not about other features in the HTML5 Stack such as the canvas and local storage.

I was under the impression that adding basic HTML5 markup elements such as the following could lead to a better understanding of the content by Search Engines and Screen Readers.

Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<nav> Defines navigation links
<section> Defines a section in a document

But for now the following articles I went through, leave me to understand that this would not be the case:

Accessibility Improvement with HTML5

Improving SEO Ranking

There are certain accessibility benefits, but nothing significant yet to leave your IE users behind for. Google confirms (or a Google employee does) that HTML5 would not affect SEO rankings for now. But only time would tell... Richer markup would definitely mean richer user experience! Something worth thinking about.

This article was originally written on Google's Blogger platform and ported to Hashnode on 17 Sep 2022.