HTML5 – 3 Tips and Tricks hardly used.

We all get the basics of HTML 5 right?

html

A simple default page right out of the book.

So is there anything new or not used as much as it should that we should know about?

Try out some of these and see if you can spice your website up a bit.

HTML 5 Video & Audio

The pain of Flash and other plugins was an ever present thing over the years but HTML 5 Video is a game-changer and yet not many people are using it on their sites. Granted it’s not all singing and dancing and it is very basic, but it does what it say on the wrapper and give you what you might need.

html2

The <Video> element is a simple addition and not very complicated to understand.

You can control the size of the display via width and height pixel definitions as shown above. You can also add the ‘controls’ allowing basic play, pause buttons etc. The element also defines the source of the file you want to play and while I have shown 1 file type, you can keep adding different types (mp4, webm, ogg) in a list and the browser will play the first one that it can in that list. If none of the types can be played then the text between the tags is shown.

The same can be said of <Audio>, using mp3 and wav files but essentially the same code as video.

HTML 5 Local Storage

OK so what is this I hear you ask?

HTML 5 local storage is simply a better way of handling cookies. Having a local data store within your web browser makes it far more security savvy over traditional cookie storage.

You can set a time limited definition or session based but essentially the new localStorage or sessionStorage Objects  means your website performance is not compromised.

html3

Try out this click counter example code for sessionStorage.

html4

 

HTML 5 Geolocation

Essentially to spy on everyone………… no seriously its a handy tool to use so you can accurately identify a users location to allow you to then provide a better customer service. This can be vital to target advertising and local offers to the user. There is no point in offering a guy in London prime tickets to a gig in Bangkok or the latest today only sale on hair and beauty products available in Paris when the web user is in China. It allows for a more personal service.

It essentially gets the browsers Longitude and Latitude coordinates using the navigator.geolocation.getCurrentPosition(showPosition) function.

html5

Try out the code above and see for yourself.

I hope some of these HTML 5 tips and tricks help you on your web journey.

 

 

 

 

 

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s