Now that Internet Explorer 9 has cooled off the press, we can alas rejoice that all new PC's and mobile devices are supporting HTML5! This brings a new era that aims to refactor the web in a whole new way. As you will see, HTML5 provides us code slimming techniques that make our HTML source code much more easier and functional.
New Structural Tags
The HTML5 specification has added several useful tags for structuring markup. These tags will replace many of the typical div entries from our code.
The header element contains introductory information to a section or page. This can involve anything from branding information to an entire table of contents.
The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the nav element, just primary navigation.
The section element represents a generic document or application section. Sections can be nested inside of each other if needed.
The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.
An aside indicates content that is tangentially related to the content around it. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc.
A figure is used for annotating your main text with illustrations, diagrams, photos, code listings, etc.
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, etc.
The diagram below illustrates a sample HTML5 layout. The structural tags behave more like classes for reusability and to retain a semantic structure. The tags can even be nested and reused. However, they need to be used with careful thought because they can very easily be overused.
New Inline Tags
HTML5 introduces new goodies to use for indicating special elements that get rendered by the browser as opposed to using 3rd party scripts and plugins.
The video tag makes it easier to embed video clips into your web pages natively. It has attributes like src, autoplay, and loop.
The audio tag is much like the video tag, but for audio files.
- Other new elements pending final release:
bdo, command, datalist, details, embed, figcaption, hgroup, keygen, mark, meter,
output, progress, rp, rt, ruby, source, summary, time, wbr
- New types of form inputs pending final release:
dates and times, email, url, search, number, range, tel, color
Other HTML5 Updates
There are other updates worth mentioning that will help speed up web development and make it a bit more pleasant:
There is a new, much simpler DTD:
Now we can actually remember this one by heart instead of pasting it from site to site.
Link href are now optional
Gone are the days of putting dummy '#' or 'void(0)' in href's when using the link as a trigger for scripts (then adding 'return false' in the onclick mind you). This is much more useful than it sounds!
New async attribute
This tells a block of script to execute asynchronously, instead of blocking the rest of the page until it is finished.
- Global attributes that can be applied for every element:
id, tabindex, hidden, data-* (custom data attributes)
- Deprecated elements will be dropped altogether:
acronym, applet, basefont, big, center, dir, font, frame,
frameset, isindex, noframes, strike, tt
With HTML4 being out for over a decade, it is refreshing to see an update to the core web. Great timing because now the API's and DOM are no longer afterthoughts, but are fundamental parts of the HTML5 specification.
You may be asking yourself if you should start coding your sites in HTML5. Absolutely! At least structure your documents using the new tags provided in HTML5, and with a few simple tricks such as Modernizr, HTML5 will work today and be compatible in the future.