Three Ways You Can Use HTML5 On Your Website Today
HTML5 promises to affect the way we think about and use the web, but what can be done with HTML5 today? In our last article we discussed five essential HTML5 editors to get you started. In this article we will look at several ways you can use HTML5 on your website right now!
Eliminate Internet Explorer HTML5 Compatibility Problems
There's no denying that Microsoft IE9's HTML5 support is worlds above previous releases, but there are still many people using MSIE 7 and 8 (and sadly, MSIE 6) that developers have to contend with. Remy Sharp's HTML5 enabling script allows developers to use any HTML5 element on their page. It's placed within the <HEAD> tags, and is referenced like this:
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Remy has already minified the script, so the amount of extra bytes downloaded is minimal, and if a user isn't using IE, there won't be an extra http pull. It's hosted on the Google Code servers, so you won't have to worry about the server being down. Alternatively, you can download the code and save it to your own server to be included in your web page (you may need to right click the link and choose Save As to save the file, rather than view it).
If you're wondering why I didn't just use it on this page so all the examples work no matter what browser you're using, it's because the CMS that HTMLGoodies.com uses won't allow me to add anything between the <HEAD> tags.
HTML5 Form Enhancements
Autofocus Using HTML5
Here's what it looks like in use. You probably already noticed it, if you are using a browser with HTML5 support:
on this field:
and here's how simple it is. Notice that the only code that is different from HTML4 is one word: autofocus
<input id="example1" name="example1" type="text" autofocus />
Placeholders Using HTML5
<input id="example2" name="example2" type="text" placeholder="suggestive text" />
and here's what it looks like in action, try it out:
Editable Content Using HTML5's contenteditable
One of the new features of HTML5 is the ability to place text on a web page that is editable by visitors--on the fly. If you're using a browser with HTML5 support, you can test out such editable content here:
Put your mouse cursor in this text and change it!
The biggest question I hear about contenteditable is "why would I want to do that?" and the answer falls back to another feature of HTML5--local storage. By using local storage along with the contenteditable feature, a developer can enable a visitor to their website to edit the contents of a list item, paragraph--pretty much any text--and it can be saved to their computer. This will be useful for games and applications, and is likely to be very, very useful in the near future. Here's what the code for using contenteditable looks like:
<p contenteditable="true">Put your mouse cursor in this text and change it!</p>
I have to admit that without using local storage along with contenteditable, I haven't been able to come up with a reason to use it. Given that, here's one more way you can begin to use HTML5 now.
It's So Easy: Using HTML5's DocType Declaration
By using the HTML5 DocType, you are letting the browser know what to expect from your document. HTML4 required a DocType reference to a DTD (doc type declaration), and there were three different DTD's that could be used. HTML5 doesn't require such a reference, and is as simple as it gets:
That's it! You place it at the very top of your .html documents, right before the beginning <HTML> tag. You won't notice anything different when you use it, but you will be joining the ranks of those using HTML5, and ready to take on new challenges, functionality and advances.