DES-301 Advanced Web Design
An Intro to HTML 5
Introduction
HTML5 is the latest version of the Web markup language that has been around for two decades now. As of this writing (January 2011) it is slowly being implemented by various browses. Many of the new tags and tools can already be utilized by the latest versions of Firefox, Chrome, Safari & Opera. Internet Explorer (not surprisingly) is lagging behind, but promises to support much—if not most—of HTML5 with IE9 (the Beta version was released September 2010).
HTML introduces a number of new semantic tags that can be used in place of generic <div> tags in many markups. HTML also introduces new tags for multimedia—video and audio—as well as improved form tools and a drawing API. In this intro we'll look at some of the new semantic structural tags and how they can be used to improve a markup. (I am greatly indebted to Mark Pilgrim and his excellent on-line resource Dive Into HTML5, which I highly recommend to anyone who wants to learn more about this subject.)
Improved tags
Doctype
The doctype tag was first introduced by the folks at Microsoft back in 90s when they realized that standards compliant browsers would break most of the pages designed to work in older versions of their IE browser. These days most Web pages contain a doctype tag that specifies the kind of document it is, the version of HTML it is using, and its mode. In fact there are over 90 different doctypes to choose from! Here is a typical example (used for this page in fact):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 greatly simplifies the matter; there is only one doctype and it looks like this:
<!DOCTYPE html>
You're kidding right? That's it? Yep; simple, eh?
The root element
The root element is the <html> tag. It is the first tag most of us learned, and it is still the first tag I teach my students. Of course, a well formed XHTML page needs a few attributes in the <html> tag. Here is a typical example:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
In fact the xmlns and xml:lang attributes are no longer needed with HTML5 so you can drop them, creating a much simpler markup:
<html lang="en">
Much better.
Meta character encoding
A typical Web page will use a <meta> tag to specify character encoding for the document:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Once again, HTML5 simplifies the matter, requiring only the charset attribute:
<meta charset="UTF-8" />
Links and the rel attribute
The "rel" (relation) attribute is used in a number of links found in the <head> (links to CSS pages, feeds, favicons, etc). While the use of links and their "rel" attributes remains in HTML5, certain aspects of their implementation have been subtly changed. Rather than go through them all here I will refer you to Mark Pilgrim's description instead.
New Toys
HTML5 introduces a number of new semantic tags that are meant to be used in place of many of the <div> tags that clog most Web pages these days.
<section>
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
(quoted from http://www.whatwg.org)
<article>
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
(quoted from http://www.whatwg.org)
An article will typically contain its own header, headings, and other tags. In many ways it is similar to a section, except that an article is meant to be something that could stand alone—for example a blog entry or news story that could be republished verbatim on another Web page or site and not lose it's structure or meaning.
<header>
As the name suggests, the header element represents a group of introductory or navigational aids. [It] is intended to usually contain the section's heading (an h1–h6 element or an hgroup element [more on that later]), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
(quoted from http://www.whatwg.org)
According to the specification, the header is not used to section content—it is meant to be used within a section. That being said, I've seen examples that use the header outside of sections—at the top of a page for example—but it is immediately followed by a section or article, clearly demarcating the def acto end of the page header. It's worth noting that these sections and articles often have their own headers as well.
<hgroup>
The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or tag lines.
(quoted from http://www.whatwg.org)
Often time a header will contain a heading followed by one or more sub-headings (like a Web site tag line). But using a <h2> for a sub-heading can mess up the page outline. Consider this situation:
<h1>Dan Fergus </h1>
<h2>Artist and educator</h2>
<h2>Traditional art</h2>
<p>blah...blah...blah</p>
<h2>Digital art</h2>
<p>blah...blah...blah</p>
<h2>Multimedia</h2>
<p>blah...blah...blah</p>
The problem is "Artist and educator" is not really a section of the site, yet it's at the same level as true sections in the outline. Instead it should be seen as a sub-heading of the main heading, not on par with the later sections. This is where the hgroup element comes in handy:
<hgroup>
<h1>Dan Fergus </h1>
<h2>Artist and educator</h2>
</hgroup>
<h2>Traditional art</h2>
<p>blah...blah...blah</p>
<h2>Digital art</h2>
<p>blah...blah...blah</p>
<h2>Multimedia</h2>
<p>blah...blah...blah</p>
Now the first two elements are viewed as a set.
<nav>
One of the most useful in my opinion. The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.
(quoted from http://www.whatwg.org)
<aside>
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
(quoted from http://www.whatwg.org)
<footer>
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
A Web page can contain multiple footers—every section and/or article could have its own footer as well as the page as a whole, as with headers.
But wait there's more
There are other new tags as well that I'm not covering here; see the list of resources at the bottom of the page for more information.
Getting IE (and other older browsers) to play along
Obviously, older browsers won't recognize the new HTML5 tags. So what happens if we use them? Well, most browsers will treat any unknown tag as a functionless tag (like a div); they will apply any styles attached to the tag but no other formatting. However, they also treat all unknown tags as in-line tags (so more like a span than a div). This is problematic because several of the new tags should be treated as block level tags, including article, aside, footer, header, hgroup, nav, and section. To fix this we need to add a style rule that sets these (and a few I haven't mentioned) to display as block-level:
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
That's not so bad. Unfortunately Internet Explorer is more problematic (there's a shock). When it encounters an unknown tag it ignores it—and the styles attached to it. It just leaves them out completely. It also renders the DOM incorrectly (more of an issue if you're using DOM scripting, but still a problem). Fortunately there's a clever hack that you can use to fix this—if you create a dummy element (tag) with JavaScript before you use it in your page, IE will magically recognize the element and let you style it with CSS. You don't even have to use the dummy element. Simply creating the element once (per page) is enough to teach IE to style the element it doesn’t recognize. So let's say you wanted to use the new section tag, you could insert this into the head of your document:
<script>document.createElement("section");</script>
If you want to make sure all of the new tags are "turned on," you could use this code (written by Remy Sharp):
<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,
menu,meter,nav,output,progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
There's actually a shorter version of this. Remy Sharp has placed the code on the Google Project Hosting site. You can link to it thus:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
Other resources
Dive into HTML5 by Mark Pilgrim
