The Cross-Browser Compatibility Guide – Which HTML Tags to Avoid
The Cross-Browser Compatibility Guide – Which HTML Tags to Avoid
browseemall
Welcome to the second part of the cross-browser compatibility guide.
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 website 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
None of the major browsers have put out statements regarding HTML4 support end dates yet. However my guess is that, some point in the not-too-distant future, HTML4 support will begin to be phased out as the focus on accessibility increases.
You can keep an eye on browser plans for any HTML4-related changes, but as of now there doesn’t seem to be anything in the works.
Firefox
Chrome
Edge
Safari
HTML 5
HTML5 is the fifth version of HTML. This version was released in 2014. HTML5 comes with new and advanced features. In the following, I will describe some new HTML tags 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:
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)
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.
These browsers have native support for the video element:
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.
These browsers have native support for the audio element:
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:
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)
So What to Avoid?
There are many great new features hidden in HTML 5 to lighten the lives of web developers. The HTML specification has a lot of legacy tags that can still be used, and will still work, but the simple fact is, there is usually a better alternative out there. And, if there is a better option then you really need to be using it. There is also the issue of browser support. Some tags will no longer be supported in every browser, but these can go unnoticed when looking at the design of a page. Again these need to be replaced. These include font, menuitem, big, center and marquee
A recent statistic of the browser in use shows this:
Source: http://gs.statcounter.com
Photo by Steven Guzzardi
