HTML5 Day 1: New tags work in older browsers? Awesome!

Nov 14, 2010  • HTML

I recently decided to really dig into HTML5 to see what it’s all about. After all, the web (err… tubes) is full of talk about how the new HTML5 Canvas element will bring an end to both Silverlight and Flash. In reality HTML5 is much more than just the Canvas element. In fact, HTML5 brings with it a large list of enhancements, including 28 new elements and form controls that do client-side data validation for you!

Specification Doc or Book?

Instead of reading the enormous HTML5 Specifications, I decided to purchase a book that would sum things up much more nicely. Below is the book:

IntoHtml5SharpLawsonIntroducing HTML5 by Bruce Lawson and Remy Sharp

This book is relatively short at 223 pages and sums everything up very nicely. I’m not finished with the book yet, as I’m playing around with things more rather than reading cover to cover.

I know there are other resources available online (for free), but nothing beats a good book to get you up to speed with a new technology.

HTML5 Design Principles

There are a number of guiding principles that are being used to design HTML5. In my opinion, the two most important principles are:

Degrade Gracefully

On the World Wide Web, authors are often reluctant to use new language features that cause problems in older user agents, or that do not provide some sort of graceful fallback. HTML 5 document conformance requirements should be designed so that Web content can degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.

The specifies that when designing HTML5 it must be done in a way that allows older browsers to gracefully handle rendering HTML5 code to the best of their ability, even though they may not know what certain tags are.

For example, this is what allows you to use the new “email” or “date” Input elements, and they end up being rendered as a standard <input type="text"/> element in older browsers. Basically <input type="email"/> render as <input type="text"/> and <article></article> and <section></section> render as <span></span>

Do not Reinvent the Wheel

If there is already a widely used and implemented technology covering particular use cases, consider specifying that technology in preference to inventing something new for the same purpose.

This means that certain existing functionality that web browsers already support, but were not part of HTML previously, will now be part of HTML5.

One very important feature is the XMLHttpRequest (XHR). You know the object that powers all Ajax calls! XHR was first added by Microsoft to Internet Explorer 5 and support for it has since been added to all web browsers. Even though it was never part of the HTML specification, we all use it. Now with HTML5, it is specified as an object to be used from JavaScript code.

There are other factors that make it possible to use other HTML5 features, even though older web browsers do not natively support them. This is what I’ll cover next.

Using HTML5 in Older Browsers

Even though some of the newer tags in HTML5 will automatically degrade when rendered in order browsers. It would still be nice to fully support those features in older web browsers so that you can start using HTML5 today without worry about it not working if someone is using Internet Explorer 7 or Firefox 3. The good news is you can do just that!

Using the following two tips you can enable the rendering of most of the new HTML5 elements within older web browsers. Some elements, such as the new <date> element, will require further scripting, but this will get you pages to display correctly across new and older browsers alike.

HTML5 Enabling Script

The html5shiv script by Remy Sharp enables all the new HTML5 elements within Internet Explorer versions older than Internet Explorer 9.

To use this script, just place the following markup within the pages <head> tag:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

This is a conditional comment that tells Internet Explorer version older than version 9 to include the html5shiv script. Firefox and other browsers will correctly ignore this script include since they don’t require it in order to render the HTML5 elements.

Here’s an article by John Resig that explains how this script works: http://ejohn.org/blog/html5-shiv/

**HTML5 Reset Stylesheet **Even though the older web browsers don’t natively know how to style the new HTML5 elements, you can include a simple stylesheet in your pages that will tell it how.

<link href="http://html5resetcss.googlecode.com/files/html5reset-1.6.1.css"
    rel="Stylesheet"
    type="text/css" />

Just add the above stylesheet link to your pages before you include your own CSS stylesheets and it will explicitly tell the web browser how to render each of the HTML5 elements.

You can find a little more information about this stylesheet here:

http://code.google.com/p/html5resetcss/ and here: http://html5doctor.com/html-5-reset-stylesheet/

Additional Resources

I really recommend the book “Introduction HTML5” by Bruce Lawson and Remy Sharp.

If you are looking for additional resources on HTML5, then you should find the following links useful:

Conclusion

I’m really liking the new additions to HTML5, and it’s awesome that you can still use them in older browsers with only a little help.

I plan on continuing this series for a little while, and will post links to subsequent articles below as they are posted.