HOME

Teaching Online Journalism

Tips for HTML5, part 1

We’re in a transition time, and students need to understand that.

This begins a new series of short posts, which will appear on no set or special schedule. The intention is to record discrete items of information that we will need to teach journalism students about the new developments coming out of W3C and WHATWG and anywhere else we need to worry about.

Starting at the beginning — literally, the beginning of every HTML document — we need a DOCTYPE. This is not new, but it seems to me that a lot of people who learned to write HTML “from scratch” never learned this.

Your doctype needs to be on the first line of your HTML file. If there’s anything else before it — even a single blank line — then browsers will treat your page as if it has no doctype at all. That means they will render your page in “quirks mode.” This can be a very difficult error to catch. It is made even worse by the fact that, in certain server-side languages, it’s easy to add a blank line and not at all clear how to get rid of it.

That’s from the excellent online book Dive into HTML5, by Mark Pilgrim. The chapter that discusses doctypes is No. 3 What Does It All Mean? (He explains “quirks mode,” in case you’re not familiar with that. He explains it in quite an amusing way, in fact!)

So, one of the neat things about HTML5 is, instead of the freakishly long and awkward doctype we have been using for several years now, with HTML5 it’s only this:

<!DOCTYPE html>

Hooray!

For related posts, check out the “code” category here in this blog.


Categories: design


3 Comments

  1. C. Spencer Beggs says:

    Great post, as usual, Mindy. DOCTYPES are tricky. I would point out, however, that it is not quite true that “even a blank line” before the DOCTYPE will send a browser — and by browser, I mean IE — into quirks more. You can have whitespace above the DOCTYPE as long as it is linear whitespace, i.e., a carriage return, linefeed, space or horizontal tab. There are a couple types of linebreaks, but in general this should not be an issue if you were just to hit return a couple times at the top of your document in TextMate. Otherwise, everything done in Java would inevitably end up in quirks mode! Here is a link to a little bookmarklet I keep handy to check which mode my test browsers are redering in: http://dorward.me.uk/www/bookmarklets/qors/

  2. [...] Tips for HTML5, part 1 (doctype) [...]

  3. [...] (it's what runs the video on iPods/iPhones/iPads) – I'll be reading these in the next few days: Part 1, Part 2, Part 3, Part 4, Part 5, Part 6. I'm not sure if she's finished with the series yet, so [...]

Leave a Reply