July 17, 2002, 12:05 AM ET
Using HTML headings for headlines
The latest post in Mark Pilgrim's 30 Days to a More Accessible Weblog series encourages designers to use proper HTML headers. The main advantage of using proper header tags (e.g. H1, H2, H3) to define the logical structure of your Web pages is that headings will still have meaning in browsers that don't support graphics.
It's one thing to use FONT tags to make your headlines stand out in traditional graphical browsers. It's another to define the underlying structure of your documents so non-graphical browsers (Lynx, voice browsers, Web-enabled handheld devices, etc.) can also identify headlines as important pieces of your document. For example, Mark points out that JAWS, a screen-reading browser, announces the number of headers on a page, after which a user may select the header he or she wants to jump to.
This is an outstanding tip, and there's no reason news sites shouldn't be utilizing structural markup tags like H2 for their headlines. The technique introduces no harmful side effects; it only improves a site's accessibility. (And did I mention it'll help Google rank your headline's keywords higher?)
But the sad news, as always, is that news sites tend to have inaccessible markup. I examined the code of several news sites this evening to see which sites used the preferred method -- heading tags -- and which sites used FONT tags or CSS. I split the results into three divisions. (Methodology: I checked at least two standard news story pages on each site.)
Division I
These sites used proper HTML structure to define their headlines.
- sacbee.com came closest to ideal markup (even though the H1 tag wasn't used), using H2 for headlines, H3 for decks and H4 for bylines.
- cnn.com used H1 tags for story headlines.
- azcentral.com used H2 for headlines.
- nytimes.com used H2 for headlines.
- sptimes.com used H2 for headlines and H3 for subheads within stories.
- suntimes.com used H2 for headlines.
Division II
These sites used Cascading Style Sheets and/or inline styling to apply graphical formatting to their headlines.
- abcnews.com
- cbsnews.com
- chicagotribune.com
- cjonline.com (also used FONT tags)
- csmonitor.com
- espn.com
- indystar.com
- latimes.com
- miami.com
- news.bbc.co.uk
- orlandosentinel.com
- startribune.com
- stltoday.com
- sunspot.net
- tampatrib.com (also used FONT tags)
- usatoday.com
Division III
These sites only used old-school FONT tags to apply graphical formatting to their headlines.
