The cross-browser compatibility guide - Which HTML-Tags to avoid

9. March 2012 11:14 by Daniel Herken

Welcome to the second part of the cross-browser compatibility guide. You can find the directory here

Which HTML-Tags to avoid

In this post I would like to point out some (valid) HTML-Tags to avoid while building a cross-browser web site or web application.

HTML 4

Every major browser supports all necessary HTML 4 Tags. Only developers targeting Internet Explorer 6 should take a look at the following link. Everyone else can move on to HTML 5.

Internet Explorer 6 and HTML 4

HTML 5

Even if the HTML 5 standard is not yet ready, many features are already implemented in the various browsers. In the following I will describe some new HTML tags already supported in many browsers.

canvas

The canvas element provides scripts with a resolution dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.

These browsers have native support for the canvas element:

Internet Explorer 9

Firefox (3.6 and newer)

Chrome (16 and newer)

Safari (5 and newer)

Opera (11 and newer)

iOs (3.2 and newer)

Android (2.1 and newer)

You need additional scripts for these browsers:

Internet Explorer 8 - Download

Internet Explorer 7 - Download

video

The video element is used for playing videos or movies (or audio files with captions) directly inside the browser. With this element the use of plug-ins like Flash are no longer required. YouTube already uses the video element. Unfortunately, you'll have to implement a fallback for Internet Explorer 8 and below.

These browsers have native support for the video element:

Internet Explorer 9

Firefox (3.6 and newer)

Chrome (16 and newer)

Safari (5 and newer)

iOs (3.2 and newer)

Android (2.3 and newer)

audio

The audio element is used for playing audio files and stream natively in the browser. This element is mostly used for embedded podcasts these days. Internet Explorer 8 and below don't support this.

These browsers have native support for the audio element:

Internet Explorer 9

Firefox (3.6 and newer)

Chrome (16 and newer)

Safari (5 and newer)

Opera (11 and newer)

iOs (4 and newer)

Android (2.3 and newer)

semantic elements

There are many new semantic elements in HTML 5. These include section, article, aside, hgroup, header, footer, nav, figure and figcaption.

These browsers have native support for these elements:

Internet Explorer 9

Firefox (4 and newer)

Chrome (16 and newer)

Safari (5 and newer)

Opera (11 and newer)

iOs (4 and newer)

Android (2.3 and newer)

You need additional scripts for these browsers:

Internet Explorer 8 - Workaround

Internet Explorer 7 - Workaround

So what to avoid?

There are many great new features hidden in HTML 5 to lighten the lifes of web developers. Unfortunately, all Windows XP users are stuck on Internet Explorer 8 which is not aware of any new feature, though you can enable some through scripting. As long as Microsoft doesn't release Internet Explorer 9 to Windows XP users (they won't) you'll have to avoid all these great new HTML 5 features or at least plan some fall through for these older browsers. Just be aware that there are still many Windows XP users out there which are not able to update their browsers. A recent statistic of the operating systems in use shows this:

Source: http://gs.statcounter.com

Pingbacks and trackbacks (1)+