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.
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.