INTRODUCTION
Are you still struggling with strict version of XHTML or HTML4 markup. Please stop !
I would you to take advantage of working with HTML5. Let’s start right away !
First of all it’s easy to learn. Especially if you were writing in strict XHTML, because it’s fully compatible with HTML5. It’s just a matter of upgrading your knowledge and learning some cool new features.
Although it’s under constant development, the markup already works. It’s very well supported by modern browsers (even IE which is reknowned for their ignorance in following the web trends). If you want to find out how good is your current browser in supporting HTML5 please visit http://html5test.com/. Run a test and see how many points your browser scored.
Now you probably want to ask a question: “What about support for older browsers? Will it also work for them?” Please do not worry about that. There are JavaScript libraries which can emulate the new features of HTML5 markup. I will write about them later in this tutorial. Now let’s see what changes HTML5 brings.
DOCTYPE
<!DOCTYPE html>
<html lang="en">
This is all you need to start with HTML5. No long strings in doctype any more. Simple and clear. HTML5 really focused on making the code more transparent and readable.
GO MOBILE
We live in the era where word “mobile” takes control over the world. The number of devices grow very fast and browsers need to cope with the fact that more and more people want to see websites on smaller screens. This is the place where HTML5 and CSS3 enters. It’s like they were created for mobile. Let me guide you through some example markup I use.
1) viewports – they allow you to define widths and zoom settings for mobile device on which viewer will see the website
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
2) using media queries for targeting screen sizes. It is obvious that on smaller screen the data should be organised different or even some of the information should be hidden. There are two options to achieve that goal:
– link tag
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
– in line css file:
@media only screen and (max-width: 767px) {
.tooltip {
font-size: 14px;
}
}
3) website icon – on desktop you see it as a favicon and on IOS devices as apple-touch-icon.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
For more examples go to http://www.html5rocks.com/en/mobile/mobifying/.
One last thing about mobile. Go to http://www.mobify.com/ and try it. This platform is for launching mobile and iPad websites. It’s a Javascript library, which makes your mobile website more secure and responsive.
SEMANTIC
As you probably suspect HTML5 added new elements to the markup.
It made the website content more readable for search engines, screen readers etc. From now on the content has a real meaning and element names are very intuitive!
<section> – it is a peace of content with the same context. It’s used for a thematic grouping of content.
<nav> – it’s a section that contains navigation links to other pages.
<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About us</a></li>
</ul>
</nav>
<article> – it can be a peace of content like post, news, article, blog, comment etc. It’s generally one independent content.
<aside> – it’s used for sidebars, side navigation, CTA’s or adverts. It has to be related to the main content of the page.
<header> – it is used to inform where the heading tags h1-h6 are but also for logo, search forms even navigation).
<article>
<header>
<time datetime="2012-07-20" pubdate>July 20, 2012</time>
<h1>Lorem ipsum</h1>
</header>
<p>Lorem ipsum</p>
</article>
<footer> – it usually contains information about website like company name, copyright or links.
<time> – contains time value which can be represented in many formats.
TAGS
Lets focus now on tags, which add new functionality or normalised the existing once. You will find them very useful and very interactive. This is how the web evolves making more things possible.
1. Canvas
Wouldn’t it be great to draw. It is possible now using JavaScript. The Canvas tag allows you to render graphica on the fly and show it as bitmap. Canvas itself is a blank rectangle. The real usage of it is the JavaScript code, which can draw.
There are many elements that can be used like shapes, texts, gradients or added images. Below is a simple example how to use canvas.
<canvas id="myCanvas" width="200" height="200">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = "rgb(40,0,0)";
ctx.fillRect (20, 20, 65, 60);
ctx.fillStyle = "rgba(0, 0, 160, 0.5)";
ctx.fillRect (40, 40, 65, 60);
</script>
2. Videos
Aren’t you sick of using embedded videos, Flowplayer or Swfobject. It can be a real pain sometimes ! So what about unifying it all.
Video tag uses some popular video formats like MPEG4, Flash Video, Ogg, WebM and AVI, so you are able to play almost everything on the web.
Below is an example that will run in almost every browser.
<video poster="myvideo.jpg" controls>
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogg" type="video/ogg" />
<source src="myvideo.webm" type="video/webm" />
<object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "myvideo.mp4", "autoPlay":false, "autoBuffering":true}}' />
<p>Download video as <a href="myvideo.mp4">MP4</a>, <a href="myvideo.webm">WebM</a>, or <a href="myvideo.ogg">Ogg</a>.</p>
</object>
</video>
3. Forms
Forms is what makes a difference. In HTML5 new types of inputs were added to follow known usability.
Placeholder text attribute – the text will disappears when input is clicked
<input name="q" placeholder="Go to a Website">
Email input
<input type="email">
Web address input
<input type="url">
Input that contain only numbers
<input type="number" min="0" max="5" step="1" value="1">
Number as slider
<input type="range" min="0" max="5" step="1" value="1">
Date picker
<input type="date">
Search boxes
<form>
<input name="query_string" type="search">
<input type="submit" value="Search">
</form>
Color pickers
<input type="color">
Of course HTML5 offers lot more like: input validation, drag and drop, editable content, streaming videos and more.
OLDER BROWSERS ? NO PROBLEM !
I use two libraries for that. Sometimes it turns out that some feature is not supported by the browser. This is a situation exact for those libraries.
1. Modernizr
It’s a MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features.
How it works ? It automatically detects support for a feature in your browser and if there is none it emulates it.
How to make it work ? It’s simple. Just go to http://modernizr.com/download/, generate the code with the features you want your website to support and save it in your project.
Then include the script in your <head> tag.
<script type="text/javascript" src="modernizr.js"></script>
2. The HTML5 Shiv
This script is the defacto way to enable use of HTML5 sectioning elements in Internet Explorer, as well as default HTML5 styling in Internet Explorer 6 – 9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
It can be downloaded from https://github.com/aFarkas/html5shiv. Then add a script in your <head> tag.
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
SUMMARY
HTML5 is the future of the web. It gives designers and developers new elements and capabilities to interact with the viewer. From now on web content will be more organised with more semantic in it. It will give the web a structure and make searching result more relevant. Even though it’s not supported fully it will be eventually.
Let’s push the web forward !
