Getting Started with HTML5

HTML5 has some interesting new additions. But let’s recognize the elephant in the room: HTML5 isn’t a final spec, nor will it be for quite some time. That said, there are many pieces that are stable, and can be used right now.

The Doctype

For a little background, HTML5 comes in two serializations: XML and HTML. The XML serialization of HTML5 is served as application/xhtml+xml, while the HTML serialization is served as text/html. Due to the added complications of serving application/xhtml+xml, we’re going to use the HTML serialization for all our demos here.

So here’s one of my favorite parts about starting a new HTML5 document: I can do it from memory.

<pre><!DOCTYPE html> <html> <head> <title>New Document</title>

Now that’s simple, isn’t it? Finally, a memorable doctype!

Will that Work?

But browsers don’t recognize the HTML5 doctype yet, right? While that’s mostly true, we need to remember one great fact: If a browser comes across a new or unrecognized doctype, it simply moves into standards mode (or strict mode in IE). So you can begin building pages with this HTML5 doctype right now, and they will just work! And when browsers do implement HTML5, you’ll be ahead of the game.

So what Now?

Now you have a few options. You could just go about the way you normally code pages, with no real changes. But that’s not really worth changing a doctype, is it? More appropriately we should learn and use some of the new tags HTML5 gives us to improve our coding semantics and efficiency. Next in this series, we’ll touch on the new structural tags HTML5 provides us, and how they can be used today. Stay tuned.

20 Comments

Simon Sigurdhsson January 10, 2009

The start of a good series, hopefully. Anyway, anyone looking for compatibility information should check out “”http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers">Implementations in Web browsers" on the WHATWG wiki: http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
Steve Smith January 10, 2009

@Simon: Thanks, the compatibility information is useful, and ever changing, so be sure to keep checking out that page. We will, however, be mostly covering a lot of things that will work in most, if not all modern browsers already. I’m going to try and make this as useful as possible, giving you information you can start using right away.
Dave McNally January 10, 2009

Nice introduction, I’m definitely looking forward to the rest of the series. Although I won’t be using it in production any time soon, I think it’s important to stay up to date and be able to change with minimum effort once the spec is finished and the support is there.

Not having to keep throwing so many divs around can only be a positive in my opinion!
Derek January 10, 2009

What developer wouldn’t get a warm fuzzy feeling inside looking at such simplicity?
Steve Smith January 10, 2009

@Dave: Nice to hear you liked the intro. Interestingly enough, there will probably be some things you can start using in production right away, because they just work. If you’re sick of too many divs, you’ll enjoy the next post in the series.

@Derek: Isn’t it beautiful?!
Chris W. January 10, 2009

Nice post. Now, one question, I was under the impression that when a new or unrecognized doctype was encountered, that the page would be rendered in quirks mode. Is that only when a doctype is not defined? (I’ve never left a doctype off so I’m always a bit fuzzy on this subject, plus I start with a template so I don’t have to memorize my DTDs.)

@Dave McNally: Any relation to Rand?
Steve Smith January 10, 2009

@Chris: Fortunately the presence of any doctype is usually enough to trigger a browser into standards mode. While it’s a pretty expected behavior these days for even some of the more annoying browsers out there, there are a few exceptions. Therefore testing for your specific requirements is, as always, recommended.
Ronnie January 11, 2009

Thanks for the coverage on this topic. Definitely looking forward to the rest of the series. As mentioned by Dave, the chances of HTML 5 making into production is slim but it is never too early to get started on it and start being more aware of the difference it will introduce (hopefully all for the better).
Dave McNally January 11, 2009

@Steve: In that case, I look forward to it even more and perhaps to including some of it in my workflow.

@Chris: Nope :)
Steve Smith January 11, 2009

@Ronnie: Depending on your browser requirements, you can probably begin implementing some HTML5 right away.

@Dave: I hope I can make it worthwhile. Should be fun.
Jen January 12, 2009

Wonderful article. Thanks for the g’newz!! Happy to start using this and will be interesting to see how it validates.
Luke Dorny January 12, 2009

Hopefully you can mention this month something about that: validation. I remember reading that Jeffrey had to do some quick Swedish trickery to get validation in HTML5. Any help would be greatfully appreciated. Especially since you’re on this hot topic this January.

Kudos. Can’t wait to see what else you come up with.
Luke Dorny January 12, 2009

I should amend that by linking to John Allsopp’s new A List Apart article here about the problems of HTML5: http://www.alistapart.com/articles/semanticsinhtml5
Troubling.
Philip Taylor January 12, 2009

@Chris: Firefox, Opera and Safari use a method very similar to that described in the HTML5 spec (http://www.whatwg.org/specs/web-apps/current-work/multipage/tree-construction.html#quirks-mode-doctypes) for switching to quirks mode, which is based on a ‘known bad’ list of doctypes. Any doctype that is syntactically valid and is not on that list will be rendered in standards mode.

IE uses a different algorithm (http://philip.html5.org/docs/quirks.txt) which looks for certain substrings that trigger quirks mode; anything not containing any of those substrings will be rendered in standards mode.

So it’s safe to use <!doctype html> as the easiest-to-remember way to get standards-mode rendering in pretty much any web browser.
Alexis Deveria January 12, 2009

Excellent series. FWIW, here’s another set of compatibilty tables for HTML5 as well as other web technologies like CSS3. Should be useful to web designers who want to see what features they can look forward to using, and when they can start using them.
Chris Wallace January 14, 2009

@Philip Taylor, thanks for the detailed answer, I appreciate that.
Anton January 22, 2009

Thanks for introducing me to HTML5, however I was wondering what benefits you see in using this over using CSS3? Also, does this present any other benefits such as for SEO or for accesability for instance?
Adam Kirkwood January 22, 2009

@Anton I don’t believe HTML5 is a replacement for CSS3, but rather CSS3 would offer new solutions to design problems from a markup perspective that would ony compliment HTML5’s new features.

I also believe that when HTML5 is released, Google will start to alter their indexing algorithm to better crawl HTML5-based sites which is more semantic. And we all know Google loves content that is correctly marked up using best practices.

The only real downside to HTML5 is the speed of implementation of browsers who seem to adopt these sort of things late in the game. No need to point fingers because I bet we can figure that out.
Mike January 23, 2009

Great article – while adopting HTML5 sound like it will be worth it in the long term – I just wonder how long it will be before browsers will implement this – and are there really no downsides in the short term?
Anton February 05, 2009

Adam thanks for the response. I’m beginning to think that site designers may start going back to HTML more often. I thought this article was interesting: Why CSS should not be used for layout http://www.flownet.com/ron/css-rant.html

But obviously as you stated there are going to be problems with browser support for both CSS3 and HTML5, just part of the job I suppose!