On-Site Anthropology
The Importance of Conventions
Thank you, Hillman Curtis.
Rut-Roh! I’m in a Design Rut
Cognition
Are Doctypes the New Lunch Tables?
- @jennlukas
- Interactive Development Director
- Jenn’s articles Feed
- Bio on Happycog.com
Viewing source has gotten pretty rad these days! Looking around the web, a good command + u (yes, I use Firefox/Mac) can provide an afternoon of exciting show and tell. 
One thing I like to look into is at which DTD table everyone is sitting these days. When the HTML5 doctype was introduced, some folks grabbed it and never looked back to the land of system identifiers again; others were cool with rocking a doctype that has been working for them for the last decade or so. This has caused some separation between those who see the choice as the past versus those who see it as the future. The cool table versus the lame table.
Some people even expressed passionate cynicism† on the matter:
I’D LIKE TO THINK YOUR DOCTYPE CHOICE DOESN’T AFFECT OUR FRIENDSHIP. BUT WHO AM I KIDDING.
Taking a look at the doctypes of top sites from Alexa, we get a variety of results‡:
| Alexa Rank | Domain | Doctype |
|---|---|---|
| 1 | google.com | <!DOCTYPE html> |
| 2 | facebook.com | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 3 | youtube.com | <!DOCTYPE html> |
| 4 | yahoo.com | <!DOCTYPE html> |
| 5 | blogger.com | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> |
| 6 | baidu.com | <!doctype html> |
| 7 | live.com | Login page has no doctype. Once logged in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
| 8 | wikipedia.com | <!DOCTYPE html> |
| 9 | twitter.com | <!DOCTYPE html> |
| 10 | QQ.com | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 11 | msn.com | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 12 | yahoo.co.jp | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| 14 | sina.com.cn | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 15 | taobao.com | <!DOCTYPE html> |
| 16 | amazon.com | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| 17 | linkedin.com | <!DOCTYPE html> |
| 20 | wordpress.com | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Lots of sites have made the switch while some are still rocking 4.01. At Happy Cog, we don’t assume that one choice is always the right one for our clients. Before we start coding a project, we discuss with our client which doctype they’d like to go with and the pros and cons of each. We usually suggest one of three directions:
XHTML 1.0 Strict
The doctype we’ve known and loved for a long time now. It keeps code well formed and, used in conjunction with tools like the W3C validator, developers can make sure the code stays nice and clean — no tag soup or cOde that L00ks like thSSSS! Browsers become predictable here and while we might need a height: 1% in a few places, we won’t need JavaScript to make our elements display nicely. Another bonus of using this doctype is most of our client teams are already familiar with it, so the learning curve is low/non-existent. No surprises here, such as wondering whether or not you can leave a type attribute off of all your elements. If this will save a significant amount of time for our client's team after project hand-off, that might be enough to sell us on this one.
However, one big element that’s missing here, is the Future! There’s not much new and exciting about the XHTML 1.0 Strict doctype and, for new sites, it can cause more work to write that longer doctype and close all the tags. There’s a lot of new awesome stuff that wasn’t invited to this party.
HTML5 Doctype utilizing full HTML5 element support (i.e. article, section, header, nav)
We like when the web moves forward, so we obviously really dig a lot about the new features in HTML5! Sectioning elements make semantic heading outlines a breeze and we love replacing some of our divs with more appropriate elements like aside and nav.
There are some large drawbacks here, though, such as requiring JavaScript for elements to display correctly in IE6-8. We have to think about how many of the site’s visitors are using earlier versions of IE with JavaScript disabled. Or is there a possibility that one or some of your largest visitor groups or stakeholders will be browsing your site that way? With Happy Cog Hosting (which uses HTML5), we decided the risk of that scenario was small because it is a technical product (people making decisions on hosting are usually well aware of browser constraints) and because we provided a PDF of pertinent information that all users can obtain if their browser is not supported.
There’s also been mixed reports on how different screen readers handle HTML5 and ARIA roles. Again, we also have to look into the learning curve and analyze if choosing HTML5 will cause major headaches for our clients when integrating our templates.
HTML5 Doctype using limited HTML5 elements (new form types, HTML5 video, shortened doctype)
Our safe route. It sets the site up for future support of new elements, but we start with limited use. We can use the leaner doctype, leave type attributes off our script tags and incorporate new form types that will degrade to text inputs for browsers that don’t support it. Our data attributes and ARIA roles will validate, though we can also validate our markup against the XHTML strict doctype to make sure our years of neat tag writing stay in tact and our code stays pretty.
These three options are just some of the approaches to consider when choosing a doctype and markup direction. Perhaps you like to sit at the table that’s always looking at what’s next. Or maybe you like a bit of fusion in your diet. Or maybe you like to eat someplace that’s recommended and don’t find drafts that appetizing. What’s your favorite doctype and how do you choose?
† Gasp! That never happens on the Internet. ‡ Repeat Google domains were omitted. All used the HTML5 doctype.55 Responses
On Cognition, I take a look at the doctypes top sites are using and reasons for choosing one. #html5 #xhtml
Thu, April 14, 2011 11:07:34
On Cognition, I take a look at the doctypes top sites are using and reasons for choosing. #html5 #xhtml (via @JennLukas)
Thu, April 14, 2011 11:16:37
Further reading on the subject of DOCTYPEs in use right now:
Thu, April 14, 2011 11:41:15
Very nice and clear comparison. I'm a big fan of "HTML5 Doctype using limited HTML5 elements".
Thu, April 14, 2011 11:44:36
Die drei besten DTDs für (fast alle Fälle von) heute? #doctypes
Thu, April 14, 2011 12:18:14
Haven't read through yet, but there are cat pics plus good info on DOCTYPES in use, so it's worth a visit: via @meyerweb
Thu, April 14, 2011 12:18:42
This week on Cognition: @jennlukas talks about choosing between an HTML5 and XHTML doctype
Thu, April 14, 2011 12:25:31
Really nice article about using various DOCTYPEs on Cognition (via @happycog)
Thu, April 14, 2011 12:38:08
I'm mostly using HTML5 Doctype with limited HTML5 elements - how about you?
Thu, April 14, 2011 12:51:05
Getting tired of watching Hixie eat. Where does he put it all?
Thu, April 14, 2011 12:54:29
What Doctype do you use? #html5
Thu, April 14, 2011 1:04:34
Awesome post about doctypes. Me, I'm an option 2 (or 3) person. Also, kittens.
Thu, April 14, 2011 1:22:09
#3 for @cmscribe but don't use any new elements yet. you're free to use all features of #html5 in sites you build though
Thu, April 14, 2011 1:37:34
Some great reading on current HTML doctypes.
Thu, April 14, 2011 2:15:19
I love the idea of bringing clients into code-level discussions. Great post.
Thu, April 14, 2011 3:11:40
I use #HTML5 doctype with limited elements on client projects on personal projects i use HTML5 with full element support
Thu, April 14, 2011 3:25:42
Futurists do it the 3rd way: #webdev #html5
Thu, April 14, 2011 3:31:00
I would have titled it: "Now, Meow, Are, Meow, Doctypes the New Lunch Tables, Meow?"
Thu, April 14, 2011 4:31:56
get yer HTML on with Doctypes
Thu, April 14, 2011 4:42:39
worth noting that doctype per se doesn't matter. i can use canvas, video, article etc and still claim i'm doing html3.2
Thu, April 14, 2011 7:52:34
it won't validate, but doctype isn't a "enable/disable this feature" type switch for browsers
Thu, April 14, 2011 7:53:12
Teh Future is bright, shades are on!
Thu, April 14, 2011 9:56:20
Knackiger Artikel über den aktuellen Stand von HTML Doctypes… plus LOLcats. Lesen:
Fri, April 15, 2011 1:03:35
On choosing Doctype #html #xhtml #html5
Fri, April 15, 2011 5:45:41
I'm almost completely option 3 these days.
Fri, April 15, 2011 7:52:32
Are DOCTYPES the New Lunch Tables?
Fri, April 15, 2011 8:57:19
We're going with the conservative futurist. HTML 5 doctype with no new elements (as a starting point)
Fri, April 15, 2011 10:19:00
Reading the post. Now! Which one should be followed or “non-empty” tag CC: @rangah
Mon, April 18, 2011 4:34:55
Doctypes and lunch tables @cognition by @JennLukas, #html5 #xhtml
Mon, April 18, 2011 4:29:34
I'm a fan of the wise (web) cat who contemplates his (doctype) future: #html #xhtml #html #html5-limited
Fri, April 22, 2011 6:24:41
Happy Cog's "tweet your thoughts" comment feature is simply beautiful.
Tue, April 26, 2011 9:16:42
Great work by JLukas
Wed, May 04, 2011 5:28:19
http://cog.gd/1vk i either just got glaucoma or you need to calm down your opacity
Fri, May 13, 2011 9:01:52
Are Doctypes the New Lunch Tables? #aea
Mon, June 13, 2011 10:20:43