Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > HTML 5 NOW!

HTML 5 NOW!

Q: Can I start using HTML 5 now?

The short answer is, yes.

The slightly longer answer is, you can use some of the new features, but you will need to do a little kludging to get it to work.

The long answer is that HTML is a mark-up language meant to indicate the structure of a document. HTML 5 is the next evolutionary step in mark-up languages for the Web, but it is not implemented on most browsers that your audiences are likely to be using and it may be some time before it is. That said, there are some things you can do now to prepare for the future.

Last week, I answered whether HTML 5 will be “the next big thing.” There are many detractors and supporters, but I think that the market for a new mark-up language is ripe, especially if it is easily backwards compatible. It’s important to note that a lot of people look at the fact that HTML 5 is still a “Working Draft.” widespread adoption is not predicted until 2012, and the final “Proposed Recommendation” will not be finished until 2022 (yes, 13 years from now), and throw up their hands, assuming that it’ll be a while before it’s relevant. But these dates are actually very misleading.

I’ll let you in on a little secret: you can can actually start using the HTML 5 syntax today. To understand how, let’s take a look at how HTML 5 works.

What’s Not in HTML 5

There are a lot of changes in HTML 5, but if you want to start using it today, then what’s important is what is not available anymore. The frame tags have been eliminated—frameset, frame, noframes—but iframes are still available. Most presentation tags have been eliminated—basefont, big, center, font, s, strike, tt, u—and although b (bold) and I (italic) are still included, there is some debate over that decision.

Also, unlike XHTML, stand alone tags like <img> and <br> will not have to be self closing. So, rather than <br /> it’s back to just <br>. But really, isn’t that a lot simpler?

HTML 5 Will Be Structurally and Semantically Sound

One of the most significant changes in HTML 5 is the addition of new structural elements that will greatly enhance the semantic philosophy behind Web mark up. Most of the new structural tags are self explanatory, but a few that may require some elaboration:

  • <header> Pretty obvious, but can be used for page headers, section headers, article headers, or an aside header
  • <navigation> Could be included independently or as part of the header and/or footer
  • <section> Defines the main parts of the page, generally containing articles
  • <article> An individual blog entry or blog entry abstract
  • <figure> Used for containing images, audio, and video that is embedded in the page
  • <dialog> Replaces the <dl> element to contain conversation transcripts
  • <aside> Used for support content on a page, such as related links, secondary navigation, and, of course, ads
  • <footer> similar to the header, it can be placed at the bottom of other elements

With these tags in mind, a typical bare bones HTML 5 document might look something like this:

<!DOCTYPE html>
<html>
<head>
<title>HTML 5</title>
</head>
<body>
<header>
<navigation></navigation>
</header>
<section>
<article>
<header></header>
<figure></figure>
<footer></footer>
</article>
<dialog><dialog>
</section>
<aside></aside>
<footer></footer>
</body>
</html>



Notice the new !DOCTYPE for HTML 5 is a lot simpler than the complex and hard-to-decipher ones in use today. It simply tells the browser to use HTML. I’m not sure what they will do if there is ever an HTML 6, but—given the pace at which new mark-up languages are developed—that will be something for our children's children to worry about.

Prepare for HTML 5 today with the right class names

One of the most obvious ways to begin to prepare for HTML 5 is by simply using its naming conventions when setting up your documents in HTML 4.1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4</title>
</head>
<body>
<div class="header">
<div class="navigation"></div>
</div>
<div class="section">
<div class="article">
<div class="header"></div>
<div class="figure"></div>
<div class="footer"></div>
<div class="dialog"></div>
</div>
</div>
<div class="aside"></div>
<div class="footer"></div>
</body>
</html>



I used this method to set up the example in my most recent book Speaking In Styles, knowing that this would be the way that documents will be structured, at least transitionally, until HTML 5 is ready for prime time.

Use HTML 5 Today

The transitional technique of using classes with div tags works, but in fact most browsers (except of course Internet Explorer) actually can support these HTML tags because they allow you to set your own HTML tags. Although not commonly used, Firefox, Safari, and Opera allow you to create your own HTML tags on the fly, simply treating anything between chevrons <> that they do not recognize as if it were a span tag. So for example:

<garbage>I love trash!</garbage>

Just looks like some text between two span tags to Firefox, Safari, and Opera. The upshot is that you can add the HTML 5 tags to your mark-up, style them with CSS, and those browsers will happily use them:

nav {
width: 980px;
background -color: rgb(0,0,0);
color: rgb(255,255,255);
}

You can even associate classes with these tags:

<nav class="header"></nav>

and style accordingly:

nav.header {…}

And that’s it. You are ready to start using HTML 5 tags. Go crazy.

Oh, wait, that’s right, it works in everything but Internet Explorer which just happens to make up the majority of browsers in use today. What to do?

Fortunately, there is a (sort of) fix, first outlined by John Resig in his article HTML5 Shiv. Basically, this kludge involves using JavaScript to create the HTML 5 elements:


[Note: Due to problems adding script tags, the above code had to be added as an image, therefore you will need to type this code manually.]

This will “teach” Internet Explorer 6 (and above) that these tags exist, and that they should be treated as HTML tags. You can learn more about the technique, and fixes for potential problems in older versions of Firefox and Camino on the HTML 5 Doctor Web site.

Keep in mind, though, that since none of these tags have been officially added to the browsers, they do not have any default browser styles, or, if they do, they will not be consistent across all browsers.

Vote for Jason to speak at SXSW about Web Typography!

Jason Cranford Teague has been coding HTML since before it even have a number. He is the author of over 13 book on digital media. His most recent book, Speaking In Styles: The Fundamentals of CSS for Web Designers, is available now. His next book, Fluid Web Typography: A Guide, will be out later this year.

Follow Jason on Twitter: @jasonspeaking .

Ask a question, win a book! Jason will be answering Web design questions each week, and each week the person whose question he chooses will win a copy of his new book Speaking In Styles.