Everything you needed to know about HTML 5
The W3C specification for HTML5 defines the latest trend in web design and development circles. But, it is far from being complete and fully supported by all the major browser vendors. Is it too early to adopt it now? Let’s explore the issue here.
CSS2.1 was seen as the epitome of content-design separation in the world of web design and development – the specification for which came into existence in 1999. It was only until 23 April 2009 that the standard was officially pronounced a candidate recommendation for the web. Now, for a standard to be accepted as a candidate recommendation, it needs to be fully supported by at least two browsers. Sadly, CSS2.1 is only fully supported by one browser – an unlikely Internet Explorer 8. Yet, did it stop anyone from using the specification in their designs? Almost all the web developers that I know of use CSS2.1. Now, since the first W3C working draft for HTML5 was issued on 23 Jan 2008, browser vendors and developers are keen on experimenting with the standard and its many features to stay on top of the game.
Comments are open for your suggestions.
Why use HTML5 now?
Speculations point to the official release of the complete specification by the year 2022, but support for the same is aggressively under way amongst some of the major browsers in use. All web designers and developers that fail to grasp the importance of this standard could potentially lag at adoption when the technology does come into play earlier than expected. By the looks of it, the web paradigm would soon be using HTML5 in their designs sooner rather than later.
What is new in HTML5?
Consider HTML5 as a major upgrade to the HTML and XHTML specifications both. The W3C working group working on the XHTML2 specification dropped the specification in July 2009, lending all future XHTML work to the HTML5 specification. So, in a nutshell, HTML5 is actually HTML with XHTML-like specifications (only better). Rather than being just a simple upgrade of HTML, the new version introduces a whole set of new elements/tags and declarations – about 25 new tags and support for a wide range of media formats out-of-the-box.
It doesn’t just build up on syntax, but lays greater emphasis on the semantics of web documents. Following is a broad classification of elements/tags that are new in the HTML5 specification:
Block elements
|
Inline semantics
|
Interactive elements
|
UI components
|
How do I prepare an HTML5 document?
We have already touched lightly on the subject – valid HTML5 can be implemented in today’s browsers. And, you certainly do not have to wait until 2022 for the specification to be supported fully. Just one line enables your document to speak HTML5. To summon the magical powers of HTML5 into your boring old HTML document, you just need to include the following document type declaration at the top of the page.
<!DOCTYPE html>
It’s just that simple – no annoying web URIs to remember, and no useless and often vague declarations for a document type; rather, a clean and simple declaration syntax that one can never forget. But remember, the specification is still not that widely supported today – Internet Explorer and Opera might just give you a bit of trouble – otherwise, the declaration syntax is enough to tell your browser to enable HTML5 mode. We need to make sure we equip our pages with a basic structure that works across all current browsers though, including the two mentioned above. Here’s the simple skeletal structure that enables HTML5 onto all current browsers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>HTML5 example</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header, footer, nav, article, section, aside, hgroup, menu, figure {
display: block; }
</style>
</head>
<body>
<!-- The rest of the content comes here -->
</body>
</html>
Block Elements
Gone are the days where web designers and developers alike used the <table> element to produce layouts on pages. Nowadays, almost every other website that you would encounter uses some level of semantics. These websites would have <div> elements placed all over a web document with their class attribute identifying its purpose, e.g., <div class="header">. There are some sections within most web pages that consistent however, much like a page’s header, content area, or the footer. These are made available as block elements in HTML5.
- header defines the section that dominates the top-most portion, or any other section of your web page. You are not limited to placing only one header – instead you can use as many headers throughout the body of your web page.
- footer defines the footer of your web page or any other section within the page. Just like the header, a footer is not limited to being placed once and can be used for various other block elements.
- nav defines a block that wraps common navigational elements of your page or section within.
- article defines a block in your web page where the actual content resides.
- section defines a generic division of content within other block elements. For instance, n article can have multiple sections, each serving a purpose.
- aside defines a block that hosts information related to but not directly relevant to the article section. This can be used as side-navigation bars for an article content, presumably hosting relevant links and resources for the text.
Figure 1.1: Block elements in HTML5
If we had tried to create a layout as the one above, using semantic HTML4.1, we would accomplish it using the following markup. Note however, that after a while, information on your page just seems to clutter up and take more space. Far too many <div> elements make your page more confusing and illegible.
<body>
<div class="header">
<div class="nav">
<ul>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
</ul>
</div>
</div>
<div class="article">
<div class="section"></div>
<div class="section"></div>
<div class="aside"></div>
</div>
<div class="footer"></div>
</body>
But, the same can easily be accomplished using the HTML5 block elements. With each element serving a particular purpose and lesser usage of class notations, one can easily produce a readable and clear markup syntax for the same.
<body>
<header>
<nav>
<ul>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
</ul>
</nav>
</header>
<article>
<section></section>
<section></section>
<aside></aside>
</article>
<footer></footer>
</body>
Inline Semantics
The elements that are included in this category are usually ones that require a better semantic syntax to them. For instance, if you have a word or phrase put within a <span> element just to highlight it, like so: Highlighted Text; it would be better enough to actually tell the browser it’s been marked.
- details defines a region of text content that can be expanded or collapsed on user interaction.
- figure defines a region within the body of the actual content that hosts images, illustrations, layout and table figures related to the subject of the content.
- time wraps around a text that defines a certain time-stamp and the datetime attribute for the same holds the machine-readable time.
- mark defines a region of text that needs highlighting.
- del replaces the
<strike>and<s>elements and presents a text or phrase to be stroked through (or deleted). - ins can then be used to put in the new text alongside deleted text:
<del>old</del><ins>new</ins>. - dialog defines a region of text that is represented as a spoken dialogue between two or more people.
- menu defines an element region that hosts options about a certain topic that read like a menu at a restaurant, e.g., specifications for a gadget, etc.
- output defines a region of text/content that can be deemed as an output to a script-based output.
Interactive Elements
HTML5 is packed with some incredible support for media on web pages including video and audio. Instead of using the vague <object> and <embed> tags, one can use the exact semantic markup to define regions with interactive content. In doing so, video and audio content becomes “a first-class citizen of the web”, as Arun Ranganathan would like to call it. You can use Javascript functions to manipulate video and audio content.
- video defines a video element that can be played on the web page.
- audio defines an audio element playable on the web page.
- source element defines a source for both video and audio elements.
- canvas defines a region, much like a
<div>tags where one can use the Javascript drawing API to draw shapes and drawings. - svg element encapsulates SVG markup to draw an image output.
User Interface Components
The new HTML5 specification defines new tags to encapsulate user interface components, including ratings meter and progress bars.
- meter defines elements that employs a unit of measurement for its content, e.g., the 5-star rating format used with YouTube videos.
- progress defines a progress bar that can be used to display progress of a certain operation.
- command defines a command button.
- keygen defines a field that holds automatically generated key in a web form.
Elements and tags discontinued in HTML5
Elements and tags that would most probably be discontinued in the latest version of HTML5 are as follows:
- font – Use CSS instead
- basefont – Use CSS instead
- u – Use CSS instead
- center – Use CSS instead
- frame and frameset – Use iframe instead
- acronym – Use abbr instead
- strike and s – Use CSS instead
HTML5 Resources off the web
Here are some websites that are related to HTML5 and might interest you even further.
- Yes, You Can Use HTML5 Today! – sitepoint.com
- Video for Everybody! – camendesign.com
- Semantics in HTML5 – alistapart.com
- HTML5 Validator – html5.validator.nu
- When Can I Use… – a.deveria.com
- Supported Features in HTML5 – molly.com
Arun Zaheeruddin
[...] toppling over the leading Internet Explorer and get the most share. With support for features like HTML5 and CSS, other browsers are eating up Microsoft’s majority browser market share. Internet [...]
The new browser war: Have you chosen sides? | The Pakistani Spectator
November 4, 2009 at 10:03 am