HTML5 is the latest major version of HTML. Most new browsers support HTML5 including the latest versions of Firefox, Google Chrome and Safari. If you’re unsure whether your current browser supports HTML 5, you can test your browsers compatibility by visiting HTML5test.com.
HTML5 has changed the way that designers and developers code a website. The new structure is more semantic and makes life easier for search engines and screen readers to view your website. It also provides some new and exciting tools for developers and designers to push the boundaries of websites as we know them. This doesn’t necessarily mean that HTML5 will be an expensive avenue for clients, and can still be used in affordable website design projects. With the release of new technologies such as HTML5 and CSS3, websites are becoming more visually appealing and new doors are opening in terms of creativity and interaction.
It’s too easy to worry about backwards compatibility when dealing with new technologies and granted not everything is going to work in older browsers. But I believe that the sooner new technologies are embraced and put to use, the sooner the rest of the world will follow suit and old browsers such as ie6 will become redundant (Thank god!).
Over the next few paragraphs I’m going to introduce HTML5 and the new way in which websites will be coded.
Possibly the biggest change with HTML5 is that we no longer have to use Divs to contain everything in our layouts. There are now a few new tags at our disposal, including <header>, <nav>, <section>, <aside> and <footer>.
Let’s go through a few of the new tags supported in HTML5:
<header> – This new tag is used to contain the opening information of your page, be it a logo or page titles in <h1> tags. All of these things will be contained within the <header> tag.
<nav> – This tag will typicaly contain the navigation elements. Normally an un ordered list of pages within the site.
<section> – The section tag is used to contain all kinds of mark-up. Multiple <section> tags can be nested inside each other.
<article> – This tag defines the primary content of a page including text and images.
<figure> – The figure tag is used to define any images that annotate the main content.
<aside> – This tag can be used to define any block of content that is related to the main content but could be read on its own and still make sense.
<footer> – This tag would contain all of your footer information at the bottom of the page. Things like copyright information and company information would go in here.
The above tags are essentially a way of introducing more meaning to each section rather than just using the div tag to contain and arrange all parts of the site.
Doctype and Meta tags
There is now a new streamlined way to declair the doctype in HTML5. It’s as simple as <!doctype html>. This must be declared at the top of all HTML5 pages.
The same is true for the charset. HTML5 uses UTF-8 and can be defined with the simple tag <meta charset=”UTF-8”>
Changes to tag attributes
Some other changes that may not be instantly obvious are changes to tag attributes, such as the href=”” attribute of an <a> tag. The href attribute is no longer required, enabling <a> tags to be used in scripts without have to declare a new location.
The async attribute can now be added to scripts. This tells the browser to load the script at the same time as the page content. Hopefully this will stop large scripts from effecting the page load. Although this can only be used on scripts that are not needed before the content is displayed.
Elements no longer supported in HTML5
As well as adding new functionality, there are a few elements that have been removed in HTML 5. This is because they are either now redundant or have been replaced. Below you will find a list of elements that are no longer supported.
I have covered just a few of the new features and changes in HTML5 but as you can see, it allows us to create more semantic mark-up, making it much easier for search engines to find the information they need on your website. This is great news for a SEO company such as ourselves. If you would like to learn a little more about HTML5, we will be starting a series of video tutorials very soon that will take you all the way from designing, to coding your first HTML5 site. During this series we will also be using CSS3. If you would like to learn some more about CSS3 now, please read our Introduction to CSS3 blog post.