HTML5 is one of the hottest buzzwords in the web and everyone is using or talking about it. Google is ahead everyone else for sure with Google Docs, their web based office suite and with Chrome OS, an operating system which only needs a browser (from the user‘s view). But also Facebook, they working on their own application platform codenamed „Spartacus“ is based on HTML5. Even classic software companies like Adobe and Microsoft are joining the competition: Microsofts upcoming Windows 8 operating system will include small HTML5 based apps (another buzzword) and Adobe has a double-tracked strategy: they release new HTML5 development tools almost every month and they still try to rescue their old, main product, Flash.
HTML5 became reality due to the real life challenges in the last 10 years when Microsoft decided to stop their future browser development after releasing the Microsoft Internet Explorer 6 back in 2001. But in the same time more and more business critical applications moved from desktop apps into the web and the World Wide Web Consortium (W3C) wanted to push the web into a XML based world with their XHTML 2.0 draft standard. Today we know it was good everyone ignored the XHTML 2.0 development. Because of this, companies like Google, Mozilla, Apple and Opera started a project called Web Hypertext Application Technology Working Group (WHAT WG) to create an evolutionary path for HTML and the web.
While Microsoft was working on their Windows Vista disaster, the members of the WHAT WG worked on a draft for the so called HTML5 based on HTML 4.01 and they added new features into their browsers. The development was based upon the challenges for things like Google Mail (2005) or „Web Apps for iPhone“ (2007) and many web developers can‘t wait for these new features and then even Microsoft and the W3C couldn‘t refuse to see the reality. Nowadays XHTML 2.0 is gone and even Microsoft is working on a browser called Windows Internet Explorer 10 without any plugin interface, without crappy conditional comments and almost full HTML5 support.
The question for web developers is wether we already should use HTML5 in our web applications. HTML5 is for all of us who want to push their documents to online apps and don‘t want to use plugins or hacks. The update from your HTML 4.01 or XHTML 1.0 markup is quite easy.
HTML5 revised
The first and even most simple modification of HTML5 compare to HTML 4.01 or XHTML 1.0 is the document type, which changed from
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
to
<!DOCTYPE html>
As you can see immediately the version number is missing. The WHAT working group even calls the HTML5 specification now „HTML living standard“ and there are updates in the specification almost every week. This shouldn‘t be a problem for anyone because all modern browser like Firefox, Chrome, Safari, Opera and even Internet Explorer 10 are using their HTML5 rendering engine if the HTML5 document type is parsed.
Another goal during the HTML5 draft was a cleanup and removal of obsolete and bad defined elements in HTML 4.01 and XHTML 1.0. HTML5 should have been much more simpler and all redundant elements should be removed. Tags like <acronym>, <applet>, <dir>, <frame> and <frameset> are not part of the spec anymore. As you can see with the removal of the last two elements it‘s not possible to build frame based web pages with HTML5. HTML5 also requires to use Cascading Style Sheets (CSS) for the representation of web pages, all elements and attributes for styling content were also removed. This removal includes attributes like plaintext, isindex, align, alink, vlink and HTML tags like <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt>, <u>.
HTML5 improvements
There are a lot of small improvements to solve daily web development problems. Embedded images now have a border with 0 pixels instead an ugly blue border by default and the <script> tag now assumes to have JavaScript included. If you add links or images to your webpage, please use the „id“ attribute instead „name“ because it‘s much easier for DOM manipulations. One really great improvement is the character set declaration. Instead of adding
<meta http-equiv=“Content-Type“ content=“text/html;charset=UTF-8“>
you only need this:
<meta charset=“UTF-8“>
And, please only use UTF-8, nothing else.
A lot of stuff was added to the HTML specification which everyone used but never was part of the standard. HTML5 now officially features the <iframe> element and the <embed> tag for embedding Plugins like our beloved Flash.
Semantic improvements
A lot of changes within HTML5 describes the requirement to improve the semantics of web pages. The draft standard adds the new „media“ attribute for links to set media type. So it‘s possible to add a link to the mobile Twitter page by using the following code:
<a href=“http://m.twitter.com“ rel=“alternate“ media=“handheld“>
Twitter Mobile
</a>
Some common attributes are now available for all HTML elements:
- „id“ to identify elements in the DOM tree
- „title“ for setting a title of the element
- „lang“ for the language, e.g. „de“ for German language
- „dir“ to set the text direction
- „class“ for CSS classes
- „style“ for CSS inline styles
A note on CSS3: the specification is still in the works and you don‘t need CSS3 to use HTML5. HTML5 works just fine with CSS 1 and CSS 2.1.
New elements for page structure
For many people the new HTML5 tags like <audio> and <video> are the most visible change looking deeper into HTML source code. With the new <section> element it‘s now possible to group section within a web page. It‘s not for design definition, only for semantic structures. For design proposes you should still use the <div> element like you do today. To mark
content inside a section, HTML5 introduces the <article> element. For example, you can use this new tag for board postings in a forum, for blog postings, for user comments in your content management system or even a whole article in a online magazine. In these parts of the page you can add side content boxes with the <aside> element. If you e.g. want to add a skyscraper ad on the left side, put it into an <aside> tag.
The navigation should be marked with the <nav> element and the navigation items should be listed as an unordered list inside the root element. If you have to group headers like <h1> to <h6> you can now use the <hgroup> tag. A group of headers are part of a section of a document according to the HTML5 standard. The document header and footer have to own tags which are – quite easy to guess – <header> and <footer>. A HTML5 document can consist of multiple headers, for example at the beginning of a document or to group a header for an introduction and a header:
<header>
<p>Welcom to</p>
<h1>Mayflower Blog</h1>
</header>
The <footer> element can be used multiple times, too. You can use it for example to mark the end of a section or usally to mark the end of the HTML document. This is the area to add relevant links or copyright hints, the contact address for the author should be added by using the <address> tag.
It‘s also quite easy to migrate the current structures of your web page to HTML5. For example it would be in most cases just a
<div id="footer">This is the end.</div>
converted to
<footer>This is the end.</footer>
The Future
This blog post is just a very short overview what you can do with HTML5, I didn‘t mentioned the possibilities of Web Workers, Web Sockets, Canvas, SVG or Web Storage. But you can test a lot of things now and you should do it. The world will move to HTML5, at the end of 2012 more than one billion HTML5 capable smartphones and Microsofts Windows 8 will wait for your HTML5 applications.