Issues with New HTML5 Tags

In this lesson, we will discuss how different browsers offering different support for HTML5 tags can cause issues.

The nightmare for web page designers and developers is the plethora of browsers they need to prepare their apps to work with.

At first sight the world of HTML seems easy to understand and apply. However, when you assemble complex web pages with styles and JavaScript code snippets, different browsers make your development diverge.

The root of this divergence is that browsers provide separate feature sets, and implement standards in different ways.

For a long time, the black sheep of browsers was Internet Explorer (especially IE6) that required its own separate code branch for almost every app.

HTML5 has brought a kind of balance as browser vendors try to accommodate the standard continuously as much as they can. Nonetheless, there are still differences in the features sets of browsers.

There are a few HTML5 elements that are not supported by any browsers, as of this writing, for example <command>, and <menu>. There are elements where attributes are not fully supported by all browsers, for example, the reversed attribute of <ol> is not handled by Internet Explorer (still not in version 11).

By means of uniformity, the most disturbing part of HTML5 is the <input> element. There are a few new HTML5 input types that are supported by most major browsers (but not all of them yet), such as number, email, URL, etc. There are many types scarcely implemented, such as color, search, and date-related input.

As you learned in Chapter 5, the appearance of form controls in different browsers is far from being uniform, and the plight is the same with form validation messages, too.

📜NOTE: To overcome this mess, use JavaScript UI libraries such as jQuery UI, Bootstrap, Kendo UI, etc. These libraries handle the variation of browsers and free developers from managing them manually.

Get hands-on with 1200+ tech skills courses.