The World Wide Web over the years has evolved and so with it have the languages used to build the websites you see today.
HTML (Hypertext Markup Language) is responsible for structuring content on the web, using the simple tags it contains we have been able to present a diverse network of websites from eCommerce sites to blogs through to more simple static sites.
HTML has been evolving from the very start with HTML5 being the latest addition. So isn’t it time we draw that line and take advantage of the new possibilities that HTML5 has in store for us today?
I will not be discussing every little detail HTML5 has to offer, it’s past the scope of this article and would consist of a 500 page book!
But I will talk about the more common specifications of the language that we can start implementing today with no big hassles. After all the only way the language can continue to evolve and the web sites we build can become more functional is if we start implementing it.
The first improvement from HTML5 is the doctype (document type declaration) which prior to HTML5 used to be an ugly line of code that was difficult to remember. It ended up resulting in a quick search to get your hands on the correct doctype or if you were using a HTML editor it would normally be put in for you. It used to look something like this:
This has now been changed and includes just 15 characters (including the space) simply:
Nice and simple, now I think we can all manage to remember that one.
The next significant change is within the head element. This has also been stripped down to the bare minimum. You used to have to declare numerous meta tags within the head element looking something like this:
HTML5 has improved on this by keeping it simple and removing the unnecessary attributes:
A quick note but an important one – to make sure all browsers render the character encoding in the meta tag correctly the entire character encoding declaration must come within the first 512 characters of your document! So if you are finding issues this could be a reason, I would hope however your head element is never this far down the page!
HTML5 comes with some new common elements like
<header> for example. When the specification for HTML5 was being developed search engines crawled the internet and kept a note of the most commonly named
elements that web developers were using. It came back with the results and found there were some very common names that web developers were using, header, footer, wrapper being among them. Instead of cluttering your site with
<div> elements and assigning a name to it either by the ID or class attribute why not just define them as elements in their own right.. so they did just that! Below is a list of some new elements we can put into use:
These are just a handful of some of the most useful HTML5 Elements out there, they each have definitions on where and how they should be used within your site. For further reading on them head over to W3C website by clicking here.
Fallbacks for older browsers
You will be pleased to know that the above changes will render perfectly well in older browsers including the IE range. You might be questioning the new HTML5 elements, but yes these even render correctly in older browsers.
I have barely scratched the surface of HTML5 in this article but instead presented a basic introduction, however if you implement just the few features we’ve discussed above it will benefit us greatly, in the real world situation we don’t just create a website and then never work on it again, we are always updating them. If the code we re-visit is using the most reliable and maintainable methods available to us updating and tweaking sites should not be a chore but more of a breeze, saving hours of valuable time elsewhere. HTML5 is a big step in the right direction to a better way of writing our code and there is no better time than now to start using it.