If you’re like me, you’re always interested in other people’s markup, and it’s especially fun to see how the big news sites choose to style major announcements. Sure, most of them have clunky, hard-to-customize CMSs, and everybody uses inline styling sometimes (myself included!) but we can still take a cold hard look at how the sites rated in terms of best practices during the historic election results of 2008 and judge them accordingly.

Inline styles and other bad practices shall be measured in indignant tsks, and hoorays shall be doled out as we see fit. Without further ado, let the analyzing begin.

× × The Washington Post × ×

No special formatting announced the new President-elect at the Post. For top stories, they have a standard h2 with a surrounding div that has inline styling, increasing the font size and added centering and padding.

Tsk rating: tsk tsk tsk. If you’re going to use inline styling, why not just put it on the H2?

× × The New York Times × ×

The New York Times was excited; they had two specially styled headlines, both with inline properties for the font size (in pixels) and the text alignment. But there’s no particular reason they’d need a text-align=left on that first H2; maybe the CMS decided to play it safe.

Tsk rating: just one tsk. The similarities between the inline styles indicate their CMS is an opinionated beast.

× × Slate × ×

Slate uses always images for their top stories; here, they announced the presidency in their standard Meta Black with an outer glow and mild gradient.

Tsk rating: tsk. They use alt tags properly, but don’t add their (interesting) subheads in the title tags. It’s a niggling point, but we’re going for best practices here—and anyway I can never truly approve of images as text.

× × The Times (UK) × ×

The Times used their standard headline. They’ve got a lovely typography stylesheet and their grid is formidable—notice the padding-bottom-5 class; now that is thorough. Surprisingly, they still resorted to inline span styling for the red “Latest”.

Tsk rating: Ts-, as in half a tsk, or perhaps just a slight wag of the finger for the inline style.

× × CNN × ×

CNN rather appallingly used a confusingly-named div and an anchor with inline styling (color: black and text-decoration: none, natch) to announce the election results. But it’s not surprising; on their homepage one may find anything from h2 anchors to divs replacing headlines to non-clickable “click here” prompts followed by anchors surrounding divs surrounding subheads. Phew.

Tsk rating: Dangerously high. They use hierarchical elements elsewhere on the site, but clearly don’t have a consistent structure in place, and their feature boxes are a hot mess. (Here’s an example.)

× × Fox News × ×

Like Slate, Fox News uses images for some of their top features, although their major headlines and blurbs are usually text. In this case they shifted the layout, moving the (text) top stories down, to allow for a larger image.

Tsk rating: tsk tsk. There was no alt or title tag, and I want to give them a nudge in the ribs for that hard shadow.

× × The Chicago Tribune × ×

Firebug shows a nice clean slate for the Chicago Tribune’s homepage. Bravo. Their lovely treatment of the announcement deserves special notice because, of the sites I’ve analyzed, they alone combined both images and HTML text. (Do you see how they do that, Slate, Fox News and the Washington Times?)

Tsk rating: Hooray!—although ironically, if you check out the site right now, you’ll see buckets of inline styles.

× × The Christian Science Monitor × ×

The Christian Science Monitor used their regular top-story treatment (H1 inside a sensible div). What’s worth noting, however, is the number of stylesheets they use; on the homepage, I counted at least three, with lots of duplicate tags and properties.

Tsk rating: Hooray!, but a raise of the eyebrow about those curious duplicate properties.

× × The Wall Street Journal × ×

Like the New York Times, the Wall Street Journal also pulled out the big headlines on Tuesday, using an an h1 inside a div with both formatting and layout-specific classes.

Tsk rating: Hooray!

× × The Washington Times × ×

The Washington Times has a “cube” flash interface on their homepage announcing the top stories, all of which have the same large font size and gold color. Not suprisingly, there was no special treatment for Obama.

Tsk rating: tsk to the nth power. Even within the laissez-faire world of flash design, the Times has created an unusually fancy feature interface. Unlike the New York Times, which generally saves flash for interactive information and graphics, the Washington Times “cube” just serves up the news. Possibly for that reason, they’ve found it necessary to include a video tutorial teaching the less web-savvy “how to flip the cube,” but oddly, the example interface doesn’t quite work like the real-life version.

× × MSNBC × ×

MSNBC gets the admiring slow clap. Not only did they use percentages for font sizes, they had useful class names and, apparently, a font-size: 500% h1 at the ready.

Tsk rating: Hooray!