Dive into HTML5
While the web is growing, new technologies arise on the horizon. As a webdesign company, this means you have to keep on learning on a daily base.
One of the biggest changes recently, was the introduction of HTML5.
What is HTML5 exactly?
“HTML5 is a markup language for structuring and presenting content for the World Wide Web” – Wikipedia
HTML5 comes with improved markup, as well as new features. Both will allow us to build more interactive and modern websites.
Some of these upcoming technologies are Audio & Video, Web Storage, Web Sockets, Canvas, and so on.
All of there are supposed to provide a consistent web experience for the end-user, regardless of which browser and device you’re using.
Earlier versions of HTML were introduced one after another, in a relatively short time-span. But it took quite some time before HTML5 showed up.
Because HTML4 did not provide a way to display video or play audio, people started to write different video-players. Each player required it’s own plugin, so you had to download and install them, which caused a lot of frustrations and trouble.
With HTML5, you can use the Video API to provide the same experience to every visitor, without the need of installing any plugins.
Besides the new features, the semantic markup that HTML5 offers is also very appealing. Especially from a SEO standpoint.
It offers new tags, with which you can structure your content in a much cleaner and ‘more correct’ way.
Here you can see the footer-section of the new Petralian website. You can see the advantages of using HTML5 here in action.
The footer-tag defines the footer-section for the page. Inside, you have the header-tag. Here we specify the title of the section (the footer in this case).
On the bottom there are four sets of links. Because you can see these as major navigation links, each of them is grouped into the nav element.
The logo on the page header, demonstrates the use of hgroup for the logo. One of the many usability rules is to make the company logo in the header click-able.
The logo consists of the company-name and a short tagline. We have made one background-image with, and applied this style to the hgroup element.
Search engines will still be able to ‘read’ Petralian and ‘UX design’ separately, because these are nested in a h1 and h2, inside the hgroup. While sketching the structure of a design, you should keep the new HTML5-tags in the back of your mind, to provide better Search Engine Optimization.
Some other examples
While HTML5 has not reached the Final Recommendation status, most of the modern browsers already support some features of it.
Using the progressive enhancement method to code your website, it is worth to make advantage of some HTML5-features, to provide a smoother user experience to your customers.