Connect with us

Hi, what are you looking for?


6 HTML5 Tips & Tricks You HAVE To Try

HTML5 is, to be perfectly honest… awesome. It’s introduced so many features that were previously only possible through the use of complex scripts or flash actions, which aren’t always good for usability, performance and design reasons.

Below are our tips on 6 killer ways to utilise HTML5 and all it has to offer.

Simple DocType

The first and most simple thing to make a quick note of is the DOCTYPE. Remember those complex doctypes that were impossible to memorise, or even to remember which to use? Simply stick <!DOCTYPE html> in and you’re good to go.

<Small> is the new small

<small> used to be use as a presentational method, to simply ‘smallify’ text. Now, however, it has a specific usage: small print. You can wrap your copyright footer in <small> and it’ll work like a charm.
Drop the ‘type’ in scripts and file references. In HTML5, it’s implied that <link> & <script> tags refer to stylesheets and scripts, respectively. Therefore, the ‘type’ is no longer necessary.

Editable content on the fly

‘contenteditable=”true”’ is a new attribute you can add to existing elements to allow a user to edit the content in that element and it’s children. Couple this up with local storage, and you could create basic applications such as a to-do list, or play with something more advanced…

Structured HTML with <Header> & <Footer>

Do away with <div id=”header/footer”> and roll out <header> and <footer> tags. In essence, divs have no semantic structure. You can now ‘explain’ to the browser what the ‘top’ and ‘bottom’ of the page is by using these new HTML5 tags.

Awesome Form Enhancements

Form enhancements. Previously, having a ‘required’ field in a form required checking with a script when the form was executed. Now, you can add the required=”required” element to form fields to ensure that they are indeed ‘registered’ as required fields.

Hassle Free <Audio> & <Video>

Audio and Video! Previously, adding audio/visual elements to a page required the use of some third party plugin or script. Now, you can simply use the <audio> and <video> tags. Unfortunately, These are currently only supported in the more recent browsers, so it’s still best to offer some sort of backward-compatible solution for older browsers.

Whilst we’ve touched on some of the integral and big changes that come with HTML5, there is a huge amount more available. Take the time to read up on what HTML5 has to offer on the W3C Website, and make sure you use it, as it’s here to stay.

Written By

Pete Campbell works at Jask Graphic Design in Birmingham, a UK creative agency. For 10 years, he’s built websites, and now runs online marketing campaigns for and global brands.



  1. Dan

    June 5, 2013 at 2:04 pm

    HTML5 is an interesting technology and its popularity is increasing every day. But since HTML5 is a web standard, and each browser implements it in its own way, the same content can be rendered differently on different browsers. For example, a visual effect can be displayed correctly on one browser, while it might not be displayed at all (or displayed totally different) on another.

  2. myles

    June 5, 2013 at 6:02 pm

    I had heard about the hasle free video, but also will try the other on the list. thanks 😉

  3. Matt

    June 6, 2013 at 1:45 am

    HTML5 is the future. At first I was concerned, but now I just worry about programs that write in Flash from the ground up…

  4. Sasidhar Kareti

    June 6, 2013 at 1:11 pm

    I am HTML5 newbie and learning it now. I feel like trying out audio video tags of all before

  5. sai

    June 6, 2013 at 3:21 pm

    really Great post for newbie’s as well as Seniors. I wonder if you share tips and techniques of HTML

  6. Robin

    June 7, 2013 at 10:11 am

    Informative post Pete , HTML5 is much more advanced and have great looks. Thanks for sharing the tips.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like


For any business, a website can be a potent tool to attract customers and generate business. As the internet has become more competitive over...


Experts believe that technology is going to play vital role in the future development of cross platform mobile applications by overcoming the fragmentation issues...


If you have just started learning about HTML5, reading this blog post would be of great help. HTML5 is the latest hypertext mark-up language for...


Wix is one of the biggest HTML5 web-publishing platforms in the world. It was founded back in 2006 and became known for its high...