HTML5 code snippets to take your website to the next level

by Jean. 13 Comments -

HTML5 is the newest revision, and by far the most interesting, of the Hyper Text Markup Language. is In this article I have compiled awesome HTML5 code snippets to take your website to the next level.

Url and email input types

HTML5 introduced new input types url and email are one of those. They allow you to write a more semantically correct code and make the form completion easier on mobile devices, by displaying special buttons (like the @ or .com buttons) depending on the input type.

Here is the url attribute in action:

<input type="url" value="">

And the email attribute as well. Please also pay attention to the pattern attribute as I will explain it below.

<input type="email" pattern="[^ @]*@[^ @]*" value="">

Source: http://davidwalsh.name/html5-email

Regexp patterns for form validation

Before HTML5, when you used a form on your website, you had to use JavaScript to create a front-side validation. Now with HTML5 and the pattern attribute, you can define a regular expression pattern to validate the data.

The following snippet is for validating email addresses:

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

This one is for strong passwords:

<input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />

And this one is for validating phone numbers:

<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/>

Source: http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/

Context menus with HTML5

HTML5 context menus allows you to add elements to the contextual menu which appears when the user right click somewhere on your page.
At the time of writing this article, the contextmenu element is only compatible with Firefox, so let’s hope other browsers will implement it very soon.

<section contextmenu="mymenu"> 
<p>Yes, this section right here</p>
</section>

<menu type="context" id="mymenu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  <menu label="Social Networks">
  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
  </menu>
</menu>

Source/Demo: http://speckyboy.com/2013/02/13/quick-tip-the-html5…

HTML5 video, with Flash fallback

One of the greatest new possibilities of HTML5 is definitely its ability to play video files without requesting the use of Flash. Though, as older browsers are not compatible with HTML5 videos, you should implement a Flash fallback. The following example show how to embed mp4 and ogv videos in HTML5, with a Flash fallback for older browsers.

<video width="640" height="360" controls>
	<source src="__VIDEO__.MP4"  type="video/mp4" />
	<source src="__VIDEO__.OGV"  type="video/ogg" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>

Source: http://camendesign.com/code/video_for_everybody

Autocompletion with HTML5 datalists

Using the datalist element, HTML5 allows you to create a list of data to autocomplete an input field. Super useful!

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Source/Demo: http://davidwalsh.name/datalist

Hidden elements using HTML5

HTML5 introduce the hidden attribute, which allow you to hide a specific element, as you would do it in CSS using display:none.

<p hidden>You can't see this text</p>

Source: http://html5demos.com/hidden

element with autofocus

The autofocus attribute allow you to force the focus on a specific element. Useful for search pages such as google.com homepage.

<input autofocus="autofocus" />

Source: http://davidwalsh.name/autofocus

HTML5 prefetching

Some time ago I wrote a detailed article about HTML5 prefetching. Basically, prefetching is a simple technique to prefetch and load a resource which is not included in the current page.

The example below shows the prefetching of an image:

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

Source: http://www.catswhocode.com/blog/mastering-html5-prefetching

Playing audio files with HTML5

HTML5 can play videos as I shown you before, and of course it can also play audio files such as the popular mp3 format. As an example, here is a minimalist but functional audio player.

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
	<button onclick="document.getElementById('player').pause()">Pause</button>
	<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
	<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div> 

Source: http://www.catswhocode.com/blog/mastering-the-html5-audio-property

  • http://bloggingwordpress.net/ Liam

    a great post..
    Some of these were known to me but some were new and were really good..
    thanks for this great post..

  • http://www.phronzs.com Virneto

    This is very nice info.
    I already use some html5 tags like input type url and email but I didn’t had a clue about Regexp patterns, Context menus, and so on…
    You totally worth being bookmarked!!;)
    Best Regards kittie;)!!

    Virneto

  • http://wpspeak.com Rudd

    Heh. Nice info. There are few HTML5 snippets that are still new for me.

  • http://www.compareandtravel.com Ammar

    Wow this will definitely come in handy … specially loved auto complete and hidden elements part.

  • http://www.linkwayhosting.com Ankur

    HTML 5 is superb. But tag, video and Flash fallback doesnt work in Internet explorer 8.

  • https://www.impixon.com AJO

    An awesome collection of HTML5 snippets

  • Dan9boi

    Some very interesting stuff in this one. Eg. the context menu was new to me!

  • http://www.psd2htmlwordpress.com/ Aditi

    Hi,
    I must say that the html coding that you have provided are truly very informative. I like that and it surely help all the developers and designers as well. Implying these Html coding snippets in our site like URL inputs and email inputs would surely help to take it to the next level. Thanks for the share!!

  • Dave

    Very cool! Especially patterns. I was used to doing that in Perl via CGI for forms. Good to know I can do it all in HTML5!

  • http://cubicleninjas.com Tyler

    A hidden attribute! Fantastic!

  • http://www.paulund.co.uk Paul

    There’s loads of good stuff in HTML, GeoLocation, Notifications API, Details tag, Form validation…the list goes on.

  • http://www.wrapcode.com Rahul Patil

    Amazing… Glad you started posting HTML5 stuff :-)

    Liked the article. It will be nice if you post some snippets on performance improvement of overall website :D

  • Jessy Pinkman

    Yo. Thanks for the tips. You’re site is a great job. But the cat using a MAC ? Oh, not very cool.