Re: ferreting out the meaning of horizontal rules [was: RE: Bobby inaccuracy?]

Al Gilman wrote:


> The structure here is very conventional 
> 
> 1. Head
> 1.1 Identification -- 'headline'
> [a rule here]
> 1.2 Functions -- 'services'
> 2. Body
> 2.1 Navbar -- 'contents'
> 2.2 Body -- 'story, main content'
> [a rule here]
> 3. Foot
> 
> [Other friendly labels to the site's taste are substitutable.]
> 


I agree, but not with this choice of label. "A rule here" means nothing 
to someone who doesn't know why rules are used. Why describe the 
visuals? What we should be aiming for is text that provides the same 
function, right? So I would do it this way:

1. Header
1.1 Identification
1.2 Functions
<hr alt="Begin main content." />
2. Body
2.1 Navbar
2.2 Body
<hr alt="End main content." />
3. Footer

Or something along those lines.

Interestingly, as you work out how to provide equivalent text for 
various items, you often discover that your page structure isn't very 
clear to you (or to your visual readers). Note that I moved the 
horizontal rule below the Functions subsection. Doesn't it make more 
sense here?

Not also that horizontal rules are rarely used in graphic design (and 
often grossly overused on web pages). I try to avoid them most of the 
time. Simply using white space to group related elements and separate 
unrelated elements often works best. This can be accomplished by using 
<div> for grouping (and CSS to adjust the spacing). Then you can use the 
title element on the div to provide more information on that section, if 
you like.

Example:

<div class="Head" title="Preface.">
     (Logo, etc.)
</div>

<div class="NavBar" title="Table of contents.">
     (Navigation links)
</div>

<div class="PageBody" title="Main content.">
     (Text)
</div>

<div class="Foot" title="Notes.">
     (Copyright, etc.)
</div>

And so on.

You might leave off "Preface," but you get the idea. Don't say "header" 
because that has to do with the *visual* layout of the page. Think in 
terms of data. How is the data organized? The logo and other data 
typically at the top of a page is really "front matter." Your navigation 
bar is a sort of table of contents (you might vary this label, depending 
on what type of links you have. Perhaps "Site contents" would be better. 
A link to a full table of contents for the site would then be labeled 
"Full Site Contents" or something along those lines.

What specific label we use is of less importance than making the labels 
reflect the structure/content rather than the visual layout of the page.

Of course you can also nest sections. I strongly recommend this sort of 
page structure. It helps you to understand the structure of your 
documents. It labels that structure clearly. It makes it easy to 
find/delete/edit/replace sections of a page (or to insert them 
dynamically). And it permits you to use CSS properly to control page 
layout (as opposed to the common error of using <br /> for a vertical 
spacer).


Charles F. Munat
Seattle, Washington

Received on Tuesday, 15 January 2002 19:12:26 UTC