So, after I sent out that last email thinking I had figured out how to
use headers, I've now found myself at a loss of how to deal with header
tags again! Now, before I go on, I know that parts of this topic are
highly debatable so I'd like to say ahead of time that I'm not
interested in why one header implementation might be conceptually better
than another. Instead I'm looking for real-world reasons to use headers
and the repercussions of either not using them, or not using them correctly.
One thing I've noticed in all the conversations and blogs and write-ups
about headers is that there is a consensus that headers (and other
standard HTML elements) should be used instead of simulating semantic
markup with CSS styles. I've also noticed that there's a huge debate
over whether or not they can or can't, or should or shouldn't, be used
in sequential order. The non-sequential part doesn't really bother me
unless it's going to cause some real-world problems.
To start, these are the reasons that I've found why I should use header
tags:
1. because simulating markup is bad (which I agree)
2. screen readers use them
3. helps to build an outline
*BESIDES* the fact that it's just good practice to use headers or
because the W3C recommends that headers should be used in sequential
order, is there any other reasons to use header tags?
Now, let's look at an example:
Example 1: (non-sequential headers)
<h1> (page header)
<h4> (some random text - smaller than h2)
<h2> (section title)
<h3> (section subtitle)
<h3> (section author)
<p> (body text)
<h2> (section title)
<p> (body text)
Is Example 1 going to break anything? Are browsers going to freak out?
Will screen readers crash and burn because there is an h2 and h3
missing? Will someone's outline not be perfect and make their computer
crash? Or is it just not according to some people's interpretation of
the W3C specs and it's going to give them a headache when they look at
my code?
Now, let's look at another example:
Example 2: Sequential headers with css markup
<h1> (page header)
<div class="headertext"> (some random text - smaller than h2)
<h2> (section title)
<div class="subtitle"> (section subtitle - smaller than h3)
<div class="author"> (author - smaller than h3)
<p> (body text)
<h3> (special selection title)
<blockquote> (quote)
<p> (body text)
<h2> (section title)
<p> (body text)
In the above example, I purposely didn't use header tags because it's
not really a strict hierarchical setup (on purpose). It does, however,
nest header tags correctly, so its headers are syntactically correct.
My main concern with the above is whether or not screen readers can
happily navigate through the above example. I also want to make sure
that either of the above examples aren't going to wreak havoc on any
kinds of browsers/readers/whatever - I'm not so concerned about PDAs at
this moment.
So, ultimately, I'm looking for pitfalls. I'd like to know what's going
to break, or what's going to work, whether or not it fits perfectly into
the W3C recommendation. While the above example could be restructured
to be hierarchical, I don't want to force that kind of structure unless
it's really going to break something or cause someone (persons with or
without disabilities) grief trying to navigate the page.
I know that doesn't sit well with many people (as is seen by all the
mixed discussion on this topic), but I don't think that the strict
hierarchical header implementation is particularly appropriate for *my*
actual setup so I'm trying to find the best middle ground and make sure
that I'm doing a good effort to work towards ADA compliance and provide
disabled visitors with a navigable site.
Thanks!
Mike
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
