Useful HTML5 Code Snippets You Can Use Today

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?

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

  1. / Reply

    None really new, but still useful.

  2. / Reply

    Nice article. Cleared up some of the questions I had (HTML5 support in browsers)… P.S. Another nice HTML5 website -> http://www.iamjamie.co.uk/

  3. / Reply

    Sweet!… definitely bookmarked to future re-reading! :)

  4. / Reply

    When everybody stop using IE, the problem solves itself !!! ;-)

    • angel,
    • November 15, 2010
    / Reply

    in http://articles.sitepoint.com/article/html-5-snapshot-2009 you can delcare

    document.createElement(“header”);
    document.createElement(“footer”);
    document.createElement(“nav”);
    document.createElement(“article”);
    document.createElement(“section”);

    to make elements readables for ie.

    • Ryan,
    • November 15, 2010
    / Reply

    Great article, thanks!

  5. / Reply

    Cool tips, would definately try this one out, really exited abt HTML 5, but waiting so that each browser can support it

  6. / Reply

    Will try it … thanks Kayla :)

    • Max,
    • November 15, 2010
    / Reply

    The only thing useful with HTML5 is the new shorter doctype!

    the new input types are not supported yet. Not only with IE but also with FireFox, etc.

    Check your HTML5 website with this: http://html5test.com/

    learn more about HTML5 compatibilties:

    http://www.caniuse.com/ or http://www.findmebyip.com/litmus/

    HTML5 is not for tomorrow…

  7. / Reply

    Great article, thank you.

    We’re all HTML5’ed up too!

    http://www.superhug.com/

    • Jason DesRoches,
    • November 16, 2010
    / Reply

    Another nice HTML5 website: http://www.coolwebmasters.com/

  8. / Reply

    Good article!

    Gabriel
    http://microbians.com
    (also my site is HTML5+jQuery)

  9. / Reply

    Nice read on HTML5 – http://www.browserlike.com is also done in html5 boiler plate.

    • Zenis,
    • November 16, 2010
    / Reply

    When it comes to Forms I can hardly see a substitute to HTML 5 in the near future. Very nice tutorial. Thanks a ton.

    • Buzz,
    • November 16, 2010
    / Reply

    Great article, looking forward to when we can use this without problems… thanks for the post.

  10. / Reply

    Thanks for the mention Kayla! We used HTML5 as we believe that Google looks at page speed and the HTML as part of their algorithms which was the main driver for using the new HTML!

  11. / Reply

    Hey Kayla thanks for showcasing my site, I really appreciate it!

    • Hanz,
    • November 19, 2010
    / Reply

    Nice Article.
    would love to see html5 + css3

    • Joe,
    • November 26, 2010
    / Reply

    “You might as well start using the HTML5 doctype today, replacing it with your old HTML/XHTML doctypes.”

    I think you meant to say: “replacing your old HTML/XHTML doctypes with it” or something to that effect.

    • Jason,
    • November 26, 2010
    / Reply

    Totally off topic but…

    loving your work on Strictly Come Dancing: http://www.bbc.co.uk/strictlycomedancing/2010/dancers/pro/aliona_vilani.shtml

    ;-)

    • Aeris,
    • December 2, 2010
    / Reply

    Wow!!! HTML 5 goodies … Thanks for this wonderful share

    • Jason,
    • December 3, 2010
    / Reply

    Don’t forget when using those shiny new HTML5 elements like section and article to add display:block; to your stylesheet or reset. By default they render as inline elements and your layout just won’t look right!

    article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}

    • Faraz,
    • December 27, 2010
    / Reply

    Really worth Reading..

  12. / Reply

    perfekt

    • Nick,
    • August 8, 2011
    / Reply

    Good post. Very helpful for me. Thanks for sharing.
    wenger backpack

    • Cat,
    • September 12, 2011
    / Reply

    This is going to be a very useful resource for me…thanks much!! (=^_^=)

  13. / Reply

    thanks. the information is a kind of helpful…

  14. / Reply

    Nice Article.
    Good post. Very helpful for me. Thanks for sharing.

  15. / Reply

    It’s worthy to read about HTML 5. The information you had given is useful resource to take in consideration.

    • Annie David,
    • November 12, 2013
    / Reply

    Really its very nice article. In HTML5 they added new things this are very helpful.thanks a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.