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.

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.

GD Star Rating
Opt In Image
Sign-up To Our Newsletter....
...And Get This FREE eBook!
  • Understand the phenomenon behind Google Sitelinks.
  • Increase the visibility and popularity of your Website.
  • Find out how you can improve the link structure of your site.
  • Determine how to put your Website on the Google Sitelinks map.
  • Learn how you can use Google Sitelinks to get more targeted-SEO traffic to your Website.
Filed in: Design Tags: Document Type Declaration, flash actions, HTML5, Usability

Get Updates

Share This Post

Related Posts

6 Responses to "6 HTML5 Tips & Tricks You HAVE To Try"

  1. Dan says:

    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.

    GD Star Rating
  2. myles

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

    GD Star Rating
  3. Matt says:

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

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

    GD Star Rating
  5. sai

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

    GD Star Rating
  6. Robin

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

    GD Star Rating

Leave a Reply

Submit Comment

© 2015 TechSling Weblog. All rights reserved.
Designed by TechSling Online.