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.
6 Comments
Leave a Reply
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
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.
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 😉
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…
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
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
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.