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.
Comments
Posted by Chris Heisel on July 17, 2002, at 3:37 p.m.:
This one is a no-brainer - not only does it make your site more accessible, but it improves your page ranking!
I know a lot of designers, including myself until a few months ago, are/were wary of using the h1, h2, etc. tags because they introduced extra white space in old-school HTML (Def: old-school HTML: back when Yahoo was at a .edu site, gray was the background of choice, and MIDI files played when you loaded a page).
But with CSS, you can alter that and use them properly!
Part of why designers may not have come upon this relatively obvious idea, is because of CSS's name.
Style sheets in the print world, (which is where most Web designers of any age started out in), allow you to set up specific style names and attributes - much like CSS's class=".." attribute.
Alot of sites never use proper HTML markup with CSS, only CSS class tags in div's and span's. (The site I'm interning at Indystar.com just uses p tags for everything with CSS classes.
Even if a site isn't going to go for the gusto and be completely standards compliant with XHTML and CSS, they need to start redefining the properties of standard HTML tags in CSS rather than using a whole lot of classes in divs and spans.
Posted by Wohleber on July 17, 2002, at 5:21 p.m.:
One reason folks might opt for classes than redefining h1-h6 is to give the heds more descriptive labels. Is a subhed in a long feature a h2 or h3? Of course there's no excuse for first- and second-level heds. Yeah, the Digital Missourian is not a model of well-structured HTML, but it will be when we roll out our redesign.
I bet a lot of people who define lots and lots of classes aren't aware of the existence of some perfectly serviceable tags. In Dreamweaver it ends up easier to define classes because the drop-down menu of formatting tags includes only p,h1-h6 and pre. You can probably customize the menu if you poke around the program folders.
Posted by Adrian on July 17, 2002, at 6:24 p.m.:
Great point about Dreamweaver. That's one of the reasons I'm not a fan of it, or other WYSIWYG editors: In their efforts to make production simpler, they encourage bastardization of code.
Also, if you're longing to give your heds more descriptive labels, keep in mind you can create different classes of H1s or H2s. It can get unwieldy managing all those, but if logical labels are a priority, classes could be a good solution.
Posted by Alex on July 17, 2002, at 10:37 p.m.:
I guess I'll have to speak out in defense of Dreamweaver. I think, certainly, it presents the opportunity to never go "under the hood" of your website. But, on the other hand, and _especially_ now in Dreamweaver MX, the HTML raw code editor is quite powerful.
Posted by Wohleber on July 18, 2002, at 12:05 a.m.:
If you right-click on a selection in Dreamweaver you get a context menu that will let you contain the selection in either a manually coded tag or one chosen from a more more comprehensive menu than the one you see in the properties inspector. But I'm not even sure if the feature is documented.
Dreamweaver and HomeSite make a pretty good combination. The commercial version of DW used to ship with HomeSite. Alex, does DW MX have a different code editor built in now? Macromedia just merged with Allaire, which makes HomeSite.
Posted by Alex on July 18, 2002, at 1:03 a.m.:
Yes, DW and Homesite work very well together. I've found Homesite to be a remarkably thorogh program. Have you heard of Evrsoft's 1st Page 2000? It's very similar to Homesite, but free. Completely free.
Anyways, yes, DW MX does in fact have a significantly better HTML code editor than DW 4. Among other things, there's a "code hints" menu, which lets you bring up your most frequently used tags while your coding. There's an entire "snippets" folder, where you can literally drag and drop portions of HTML code (it comes with pre-written code, but obviously you can add your own) into the document.
As far as I can tell, there was a real push to ensure that DWMX would be a lot more compliant and cross-browser friendly than DW4. Oh yeh -- according to macromedia.com it still ships with Homesite 5.
DWMX is one of my favorite programs, because it's one of the _most_ versitile pieces of web design equipment out there, imo.
Posted by Adrian on July 18, 2002, at 1:42 a.m.:
The Web Standards Project strongly campaigned (and continues to campaign) to ensure Dreamweaver would be more compliant. I'm a die-hard hand coder, so I use HomeSite for Web work -- mainly because it validates my code and provides an easy way to preview pages. Oh yeah, and it formats my code in cool colors.
It's also great for searching and replacing, but unfortunately it's not as robust/feature-packed as BBEdit (which I use at work). I've used 1st Page 2000 and was amazed at how similar it looked to HomeSite. Wonder how they got away with that... :)
Posted by Alex on July 18, 2002, at 1:51 a.m.:
DWMX has the colored code too. And I thought exactly the same thing when I saw the Evrsoft interface ...
Posted by Huko on November 1, 2002, at 5:42 a.m.:
1st Page from www.evrsoft.com rules!
Comments have been turned off for this page.