Twitter: raymondcamden


Address: Lafayette, LA, USA

What tags does your browser support?

02-17-2011 5,670 views Development 8 Comments

It seems like a simple enough question, right? If you are developing a web site and want to know the specifics of language support for a particular HTML tag, there should be a way to find out exactly what your browser supports. A few days ago I was thinking about this (at around 5AM actually - no idea why I was up that early) and decided to actually test this theory and see how easy this was in practice. This is especially important with the rise of HTML5. (It's got a logo now so we can start using it.) I've read numerous blog posts about sexy cool new HTML5 features and they typically do an ok job of saying what's supported where, but I figured that I should be able to bookmark a nice reference and always be able to quickly check an "official" guide for the final word. I decided to focus on Chrome (my preferred browser), Internet Explorer, Firefox, and Safari. I've yet to meet anyone who uses Opera but if any of my readers want to chime in on that browser be my guest. To be clear - I know there are other web sites out there offering HTML reference information. But I feel that the browser makers should be stepping up to the plate to make it easier for their developers.

I began with a few simple Google searches. Something like "firefox html reference" or "chrome supported html guide." This is where I ran into my first big surprise. I rather quickly found documentation for Firefox, IE, and Safari. But I was unable to find a result for Google Chrome. Maybe it was just how I searched, but I just couldn't find anything. Google has a Chrome Webmasters forum, but my post asking about their support reference has so far gone unanswered. I did eventually find their reference, but for me it was very non-obvious.

Firefox

The first guide I found was for Firefox: HTML Element Referece. I began by checking the docs for something as simple as the b tag. Mozilla's guide does a nice job explaining how it's different from strong. It also has a nice format thats easy to read and understand. I then looked for the layer tag. Surprisingly it wasn't there. I knew it was deprecated, and their guide mentions other deprecated tags, but layer was absent. I suppose it's not only deprecated now but removed. (Good.) I then checked the canvas tag. The guide not only flags it as HTML5 but also says when it was introduced. I had no idea it was in Firefox 1.5. That was like a billion years ago. But that type of information is great.

Safari

No surprise that Apple has a nicely designed site for their reference: Safari HTML Reference. I repeated my tests for Firefox. The guide for "b" did not go into detail about how it compares to strong, but I noticed that their availability section covers both the desktop as well as the mobile browser. That's a huge +1 for them. Obviously it isn't fair to say that Firefox is missing that - but I'm just happy Apple went to the the trouble of documenting this for their mobile browser. Surprisingly Safari did have docs for layer. They don't consider it deprecated but do recommend using an iframe instead.

Internet Explorer

For those of you who have to worry about IE (I'm so sorry), you will find the reference on MSDN: HTML and DHTML Reference. I was a bit surprised to see "DHTML" in the title as I thought that was old school. Oddly they also refer to HTML tags as "Objects". Clicking on the reference for b gives an extreme amount of information right away. They explicitly list all the attributes to the point where it's almost too much information. But I suppose it's better to err on the side of giving you enough documentation to get your job done. I was surprised to see Marquee still documented, but at least Microsoft admits to it being an extension and non-standard. For the video tag Microsoft uses an IE9 logo on top, but to me, that isn't quite clear enough. It's something that a non-careful reader could glance over if not paying attention. That being said, the doc makes it clear it's in draft status which is nice.

Chrome

Finally we come to Chrome's documentation: HTMLElements. Not surprisingly it's the Linux of docs - simple and direct without much flair. Not that there's anything wrong in that - but it's kinda not a surprise. However I really like the grid on the main page that details where certain tags are supported. A lot of times you don't care about the syntax of a tag and just want to see if it is in your supported version of the browser. Interestingly enough they also document other browsers. Check out the B reference. This is nice - but I'm not sure I'd trust it. They refer to Safari version 3 as the latest which is a whole 2 versions behind. I'm also a bit disappointed by the amount of information. Clicking on the video reference shows no examples. Now it may be overkill for something like the b tag, but all the other guides took the time to write even the simplest example.

So obviously an HTML reference is only a small part of the puzzle. You also have CSS and JavaScript to consider as well. But it was an interesting exercise to see how the "big guys" handle this form of support for their developers. I'll admit to being a bit picky about my docs. If my browser doesn't help me - or if it gets in the way - I'll immediately get a bit ticked. Obviously web developers are a minority in terms of all the people who actually use a web browser. But I really feel like a browser vendor who looks out for - and helps their developers - will be able to gain market share and acceptance in the developer community.

8 Comments

  • Thilo Hermann #
    Commented on 02-17-2011 at 9:20 AM
    Opera FTW ;)
    http://www.opera.com/docs/specs/

    Current version:
    http://www.opera.com/docs/specs/presto27/
  • Commented on 02-17-2011 at 9:21 AM
    Thanks Thilo!
  • Wookie #
    Commented on 02-17-2011 at 9:32 AM
    Nice reference! MSDN makes me nauseous to look at.
  • Jeff Page #
    Commented on 02-17-2011 at 9:45 AM
    Very helpful reference! If people are looking for how their browser supports HTML5 and CSS3 specifically, take a look at http://findmebyip.com. Lots of useful info.
  • Michael #
    Commented on 02-17-2011 at 1:28 PM
    I was just reading about this yesterday. Thanks for the links to all the individual references. Here are some more comparisons / testers...

    http://caniuse.com/

    http://en.wikipedia.org/wiki/Comparison_of_layout_..._(HTML5)

    http://html5test.com/
  • Matt Gutting #
    Commented on 02-18-2011 at 7:17 AM
    W3Schools http://w3schools.com also has a good reference with "can be used in" entries for IE, Firefox, Opera, Chrome, and Safari - for HTML, HTML 5, CSS, and CSS 3.
  • Commented on 02-18-2011 at 8:15 AM
    I'm a big fan of w3schools. Whenever I tweet that though I get a set of people who think it is a bad reference. Thing is - it's never been wrong for me yet.
  • Brian Lang #
    Commented on 03-07-2011 at 3:43 PM
    This may not be documentation, but you can use it in your webpages to determine if features are supported via javascript.
    http://www.modernizr.com/
    Very useful!

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty