Friday, March 29, 2024

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

Web developers have been enhancing and tweaking forms on web pages forever. Generally this involved the use of some JavaScript for creating effects such as autofocus (where a particular form field receives the focus when the page is loaded) and placeholders (where there is illustrative text already in a text form field, but when a user clicks within the field, the text disappears). With HTML5, developers no longer have to employ these tactics–they are part of the specification and work as parameters to web forms naturally.

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

Often when we are creating a form, even when that form is a single field, we want to let the user know the type of information they are expected to enter into the form. We don’t, however, want them to have to manually delete that text from the form field before they can enter their own text. Previously we had to use JavaScript to do so, but now we can do it like this:

    <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:

<!DOCTYPE HTML>

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.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured