HTML5 code snippets to take your website to the next level

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&image=__POSTER__.JPG&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