Kategorien
11.12.: Migrate to HTML5!
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 users 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 cant wait for these new features and then even Microsoft
and the W3C couldnt 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 dont 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
shouldnt 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 its 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 its 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 its 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
dont 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 its now possible to group section within a web page. Its 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.
Its 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
didnt 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.
