HTML 5 Declaration
If you right click and select view source on any website, the first thing you should see at the very top is the Doctype.
This declaration comes in a variety of forms but there is only one form that tells us this website is HTML 5.
So now we know how to identify a website that is HTML 5, we can take a look at the attributes that form just a small part of what it can do.
These attributes only work for external scripts which would look like this.
If you see a script that looks like this
The HTML 5 Attributes
The two attributes that HTML 5 offers for the <script> tag are both Boolean attributes which means it has just two values, think about a light switch, it can either be on or off in most cases.
The Defer Attribute
Although the defer attribute is not specifically HTML 5 it is still important to know how to use it. The defer attribute informs the browser to execute the script after the page has loaded.
We add the defer attribute to our script like so.
The Async Attribute
The Async Attribute is new to HTML 5 and I can say for sure that it does work. I have been using it on all HTML 5 websites that I have been working on with excellent results.
A few points to consider when using this HTML 5 attribute.
- This should not be used on important scripts such as the main Jquery library as some scripts are required to load and execute before other scripts load.
- You should test out your site with tools such as GTmetrix and google pagespeed to ensure that it is working.
- Test out all functions dependant on the script to make sure they work as expected.
From my own experience the async attribute has worked for almost all scripts as long as it is an external script
You simply have to add the async attribute to your scripts like so.
You can add the defer and async attribute before or after as seen in both these examples.
HTML 5 is set to include other new methods of optimizing your websites and I for one am looking forward to the first full and stable release of HTML 5 in 2014.
Note - the type attribute has also been removed from HTML 5.
Most people will still add this attribute but it will steadly disappear.