Nothing ventured, nothing gained

This past Labour Day weekend, I redid this entire blog in HTML 5. Here are some of the notes I took while diving into HTML 5.

The first thing to keep in mind is that HTML 5 is a work in progress and will continue to be until there exists two browsers with complete HTML 5 implementations. Remember this as you read the various W3C specs, wiki entries, and blog posts–including this one.

Web Developer’s Guide to HTML 5

• The Web Developer’s Guide to HTML 5 is a good introduction to HTML 5 from an HTML author’s perspective. The biggest takeaway is that there are two syntax modes to HTML 5: Regular HTML syntax and XHTML syntax.

• After understanding the differences between HTML and XHTML, going with XHTML makes more sense. The syntax is more strict, yet simpler and consistent since it follows XML syntactic requirements. HTML mode permits all sorts of exceptions, which ends up being a PITA to remember. For example, empty attributes (<input disabled>...</div>) is valid HTML, but invalid XHTML. I almost never remember this. I suspect that HTML support is for backwards compatibility reasons (since shipping a browser that breaks ten trillion web pages is evil).

• For the rest of this post “HTML” means HTML 5 in regular HTML mode, and “XHTML” means HTML 5 in XHTML mode.

• Using XHTML requires content to be served with a Content-Type of application/xhtml+xml, though in practice this doesn’t seem to be causing a huge problem. There are reasons for not obeying this, for instance HTML 5 allows authors to publish polyglot documents which conform to both HTML and XHTML. More on this below.

• The other big note is the DOCTYPE, which is used to determine quirks mode rendering.

• The DOCTYPE declaration isn’t technically required for XHTML documents since they are meant to be delivered with the correct XML MIME type thus instructing the browser to process it as XML in no quirks mode. I set it anyway since it ensures the most standards compliant rendering (It also gives me warm fuzzies).

HTML5 differences from HTML4

• The next good read is HTML5 differences from HTML4. The most interesting thing I gleaned from this document is when it’s authors consider HTML 5 complete: “The HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. This is a different approach than previous versions of HTML had. The goal is to ensure that the specification is implementable and usable by designers and developers once it is finished.” Pragmatic and competitive. I like this approach as it allows future browser implementors (however unlikely they are) to have access to two reference implementations.

• To help you decide whether or not to adopt HTML 5, you can review the current state of the various browser implementations and also the comparisons between HTML 5 layout engines. Also make sure to check out the W3Schools’ browser statistics, which lists browser usage and trends on a month-by-month basis.

• It’s very clear that HTML 5 is going to be a lot of things. It looks like they’re revisiting a lot of existing semantics (such as “the definition of URL” and “the origin concept”) and standardizing on their definitions.

• I previously mentioned that HTML 5 allows authors to construct polyglot documents. One reason for this is so other markup languages like MathML and SVG can be included in the same document, but only in HTML mode.

• The document then goes on to outline changes in elements and attributes. There are well over two dozen new elements addressing everything from document publishing (<section>, <article>, <header>, <footer>, <nav>), accessibility (<hidden>, <progress>), typography (<ruby>), and visualization (<canvas>) needs. Elements are also removed, notably support for <frames> which we all know has brain damaging affects on usability and accessibility.

Practical Resources

• This blog’s initial layout is inspired by an article on designing a blog with HTML5 at the HTML5Doctor. They’ve also got a growing number of articles on the various new HTML 5 elements: <header>, <footer>, <nav>, and <aside>.

• Internet Explorer 8 (and 6 and 7) doesn’t handle these new elements correctly. Fortunately there’s a workaround. You can learn how to enable HTML 5 in IE and the technical reasons (why and why) behind the solution.

• There’s also a good review of the new elements in HTML 5 by IBM’s developeWorks.

• One terrific reference (though a work in progress) is Mark Pilgrim’s Dive Into HTML 5. At the moment, there are two chapters on HTML 5, drawing with <canvas> and detecting HTML 5 features which are both highly recommended reading.

If you have any other great sources on getting started with HTML 5, make sure to share them in the comments below.