Useful HTML5 Code Snippets You Can Use Today

The hype today is all about the new HTML5, the newest version of HTML that has combined classic HTML with XML, plus more features for modern web development. It is also, technically, the new version of XHTML 1.0, and in the near future it will be the main markup language we use for computer-based website creation (as opposed to mobile devices).

With all its cool new features and all-in-one set up, web designers and developers alike are eager to get going with it. As we know, though, with any new technology we have to wait for browser compatibility to arise. It may be years before 100% HTML5 websites are practical to create. So what's the point in learning HTML5 now? Better yet, what are some uses of HTML5 that we don't have to wait for?

In this post we're going to go over some basic HTML5 snippets and uses that we can start implementing today, despite the lack of full browser compatibility. These are snippets that do have wide compatibility, or snippets that we can use for modern browsers with an alternative backup.

Useful HTML5 Code Snippets You Can Use Today

Make IE Better Compatible

As you may have already guessed, Internet Explorer will be HTML5's biggest competitor. IE8 currently supports much of HTML5, but unlike other popular browsers like Firefox, Chrome, and Safari, any slightly older version will not be compatible. However, JavaScript can save us. There are many JavaScript alternatives to HTML5 snippets, just in case your HTML5 code is being viewed in an older browser. Since IE causes many of these issues, though, it's a bit impractical to have a JavaScript back-up solution for every little piece of HTML5 code, just to compensate for one browser. Thankfully, Remy Sharp recognized this, and created a script to 'upgrade' IE to work with many popular uses of HTML5: HTML Enabling Script.

By placing the following code in between your pages' tags, we can easily avoid many of the non-compatibility problems between HTML5 and Internet Explorer.

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

Switch to the HTML5 Doctype Now

When it comes to browser compatibility, doctypes have no impact. You might as well start using the HTML5 doctype today, replacing it with your old HTML/XHTML doctypes. The new HTML5 doctype looks like this:

<!DOCTYPE html> 

That's a lot more simple than our old doctypes, now isn't it? HTML5 meant to do this, and having this shorter, simpler doctype can reap a lot of benefits, whether the viewing browser supports HTML5 or not.

John Resig wrote a great article outlining the benefits of switching to an HTML5 doctype today: HTML Doctype. Even if you don't plan on implementing any more of HTML5's features into your webpages yet, simply changing the doctype is a smart first move for the future.

Easy Form Validation

On modern websites, forms are used all the time, and sometimes with multiple forms on one website. As web development evolved, we needed more control over form validation for things like email, phone numbers, website addresses, and more. However, plain HTML or XHTML did not let us do any of that, so we had to resort to JavaScript and additional server-side validation.

HTML5 Field Input Types:

Finally, HTML5 got smart and allowed us to validate many common elements of web forms with ease.

<input type="search">

<input type="tel">

<input type="url">

<input type="email">

<input type="datetime">

<input type="date">

<input type="month">

<input type="week">

<input type="time">

<input type="datetime-local">

<input type="number">

<input type="range">

<input type="color">

Check out HTML5 Input Types to test your own browser(s) with some of these input types, and to also see some screenshots and examples of HTML5 form validation and input types in action.

Extending Compatibility

What about non-compatible browsers? Unfortunately, there are more modern browsers that do not support all of these yet, and otherwise some may only support a few. Luckily, though, there are solutions.

For one, when a non-compatible browser doesn't recognize a type attribute value, it will just default to 'text'. No problem here, since that's what we'd use anyway if we were creating a regular form that doesn't use HTML5. However, if you'd still like HTML5's form features to work, there's a jQuery plugin for that: Cross-Browser HTML5 Form Validation: jQuery.Html5form.

Form Validation

HTML5 has also included some new form-related attributes that provide functionality only once possible with JavaScript. The new attributes include: required, autofocus, autocomplete, list, multiple, pattern, min, max, step, and placeholder. Each new attribute's compatibility and general use can be looked up separately, but the general use can be seen below:

<input type="email" placeholder="yourname@yourdomain.com" pattern="[0-9][A-Z]{3}" required> 

For browsers that support these attributes, we just added a lot of cool features with minimal effort. If you have an iPad/iPod Touch/iPhone, that would be the easiest way to test them out without a JavaScript plugin. Otherwise, you'll have to switch between Opera, Safari, or whatever else to be able to view each attribute's functionality. (That is unfortunately how non-compatible form attributes are at this point.)

  • type="email" - this just let us automatically restrict the user's input to an email format only. Because of this, technically, there's no practical use for our 'pattern' attribute here, but we've just used it for sake of example.
  • placeholder="yourname@yourdomain.com" - this is the same as the value attribute, but when the user clicks on the input field, the preset value disappears. Before, this common use could only be done with JavaScript.
  • pattern="[0-9][A-Z]{3}" - this allows us to finally set our own RegEx restrictions for this input element. Like we said before, this is already implemented for the email type, which only allows email characters, so there's no reason for the pattern attribute in this context. However, this attribute is very useful for other non-predefined type attributes.
  • required - just as it sounds: tells whether a field is required or not on the client-side. Again, this was once a commonly used feature in forms that could only be accomplished with JavaScript.

Despite the lack of natural compatibility, we encourage you to still begin using these HTML5 snippets for forms, as it is easy, and will be easy to translate into the future. In the meantime, use the Cross-Browser HTML5 Form Validation: jQuery.Html5form plugin.

Also, check out this article for a more in-depth explanation of HTML5 form validation and further examples: Rethinking Forms in HTML5.

New, Cleaner, and More Sensible Structural Tags

What developers loved about XML is the ability to define and then use more sensible tags. For example, a set of <post> and </post> tags could be defined if needed, or something like <menu> and </menu>. It makes a lot more sense to create markup this way, rather than creating hundreds of divs with varying classes or ID's.

Yet, with the old HTML and XHTML, we were stuck creating class after class, and ID after ID. Along with that came the term, divitus or over-using divs to create a complicated and confusing website structure.

In HTML5, we know have more pre-defined structural tags, which in most cases are especially helpful for blogs and content heavy websites:

  • <header> </header>
    Anything that we may have otherwise put in something like <div id="header">. Logos, primary navigation, etc.
  • <footer> </footer>
    A blocked section for footer information.
  • <section> </section>
    Any content can go into this structural tag as long as it shares a similar theme. These are often nested, and may be used for things like a widget area, contents of an about blurb, etc.
  • <article> </article>
    Finally something specifically for blogs. This tag is meant for individual blog posts or repetitive entries of another sort. <div class="post">
  • <aside> </aside>
    Anything that is related to the content around it, but needs a structural tag to separate it. This could be used for something like a blog post’s meta data, or a footnote.

Be sure to check out this HTML5 cheatsheet, for a more detailed explanation and also workarounds for modern and older browsers so you can be sure to begin using these types of tags today.

Websites that are Already Using HTML5

Below are a few websites that are already implementing HTML5. We can already begin to see the variety and functionality available with this new technology fully implemented.

Optimum Exposure
Optimum Exposure

Midnight Shift
Midnight Shift

Mando Group Labs
Mando Group

Cuplice
Cuplice

Taliti Pagani
Taliti Pagani

Further Resources

Conclusion

Using HTML5 today is definitely a possibility, and we will only be allowed to move forward with this great new technology faster if we all begin to create websites around it. Whether beginning to implement it means just starting out with the doctype, or going all the way with full HTML5 and resorting to plugins or backups for the time being, any impact can be beneficial to the future of web development.

The best thing anyone can do, however, is to start learning about HTML5 and other new technologies right away. It's new, but that doesn't mean it's difficult. In fact, in a lot of ways, HTML5 can be incredibly easy to get a grasp on because of its sensible nature and more organized structure. How are you starting to learn and use HTML5 today?