Proper usage of headings?

G

Geoff Hague

Hi all...

I understand that headings should be used to delineate various sections and
sub-sections within a website (and *not* just to adjust font-sizing and
weights). I've been using the "outline" view in the W3C Validator to get a
sense of how my headings are laying out the structure of my
site-in-progress. Looking at the outlines produced by the Validator, I got
to thinking about the proper usage of, specifically, the <h1> heading.

I have a side-bar on my site with static content (appearing on all pages of
the site). The side-bar contains to sections labeled "Mailing List" and
"Upcoming Shows", both of which I've set as headings using <h1>.
Strictly-speaking, I'd imaging that the "main content" of each page (that
which doesn't appear in the side-bar, but actually apears in the main column
of the site) should also be given an <h1> heading (which seems reasonable to
me, as each page of my site always has three main parts: the "main content"
column, the "Mailing List" box and the "Upcoming Shows" box.

However, I don't want to actually have an <h1> heading at the top of my
main-content column, as I feel that the styling I've applied to my
navigation bar (and also to the page's "Title") provides
more-than-sufficient informativeness (is that a word?) regarding what the
main-content column is.

I guess my question here is: Should I still plop in an <h1> heading at the
top of each page's main column, so that the site's outline is completely
logical and might help (from what I understand) with speech-based browsers,
and then style the heading "display: None;" so it doesn't actually show up
in normal browsers?

Or am I basically making a big deal out of nothing at all, and I shouldn't
worry about it?

Thanks!
 
J

Jukka K. Korpela

Geoff Hague said:
I have a side-bar on my site with static content (appearing on all
pages of the site). The side-bar contains to sections labeled
"Mailing List" and "Upcoming Shows", both of which I've set as
headings using <h1>.

But they aren't level 1 headings for the current page, are they?
Strictly-speaking, I'd imaging that the "main
content" of each page (that which doesn't appear in the side-bar, but
actually apears in the main column of the site) should also be given
an <h1> heading

Yes, and only it. Except in special occasions (like a truly bilingual
page), there should be only one level 1 heading on a page. This logically
follows from its being the 1st level heading.
However, I don't want to actually have an <h1> heading at the top of
my main-content column, as I feel that the styling I've applied to my
navigation bar (and also to the page's "Title") provides
more-than-sufficient informativeness (is that a word?) regarding what
the main-content column is.

Styling? CSS can and often will be ignored. And navigation bars are just,
well, for sailors to get drunk. They are mostly a useless plastic
duplication of an excuse for a site's table of content
I guess my question here is: Should I still plop in an <h1> heading
at the top of each page's main column, so that the site's outline is
completely logical and might help (from what I understand) with
speech-based browsers, and then style the heading "display: None;" so
it doesn't actually show up in normal browsers?

No, stop making it a problem. Use <h1> markup for _the_ level 1 heading.
Don't use heading markup in a navigation bar, since it does not contain
headings for the page.
 
A

Adrienne

Hi all...

I understand that headings should be used to delineate various sections
and sub-sections within a website (and *not* just to adjust font-sizing
and weights). I've been using the "outline" view in the W3C Validator
to get a sense of how my headings are laying out the structure of my
site-in-progress. Looking at the outlines produced by the Validator, I
got to thinking about the proper usage of, specifically, the <h1>
heading.

I have a side-bar on my site with static content (appearing on all
pages of the site). The side-bar contains to sections labeled "Mailing
List" and "Upcoming Shows", both of which I've set as headings using
<h1>. Strictly-speaking, I'd imaging that the "main content" of each
page (that which doesn't appear in the side-bar, but actually apears in
the main column of the site) should also be given an <h1> heading
(which seems reasonable to me, as each page of my site always has three
main parts: the "main content" column, the "Mailing List" box and the
"Upcoming Shows" box.

However, I don't want to actually have an <h1> heading at the top of my
main-content column, as I feel that the styling I've applied to my
navigation bar (and also to the page's "Title") provides
more-than-sufficient informativeness (is that a word?) regarding what
the main-content column is.

I guess my question here is: Should I still plop in an <h1> heading at
the top of each page's main column, so that the site's outline is
completely logical and might help (from what I understand) with
speech-based browsers, and then style the heading "display: None;" so
it doesn't actually show up in normal browsers?

Or am I basically making a big deal out of nothing at all, and I
shouldn't worry about it?

Thanks!

In the sites that I do, <h1> has the same, or similar content as the
<title> element. I would not display:none only because sometimes, visitors
do not look at the title element (for whatever reason), and by using the
<h1> element, I know that they know where they are.

For example:
<div id="menu">
<dl>
<dt><a href="#content">Content</a></dt> [1]
<dd><a href="#subsection">Subsection</a></dd>
</dl>
</div>
<div id="content">
<h1>Title of this Page</h1>
<h2 id="subsection">A subsection</h2>
<p>This is something about the subsection.</p>
</div>


[1] I frequently use this so I don't run into notfound pages while in
development.
 
K

Kris

I guess my question here is: Should I still plop in an <h1> heading
at the top of each page's main column, so that the site's outline is
completely logical and might help (from what I understand) with
speech-based browsers, and then style the heading "display: None;" so
it doesn't actually show up in normal browsers?

No, stop making it a problem. Use <h1> markup for _the_ level 1 heading.
Don't use heading markup in a navigation bar, since it does not contain
headings for the page.[/QUOTE]

<h1>Title of this page</h1>

....

<h2>Navigation</h2>

....

<h2>The latest news</h2>

....

<h2>Behind the scenes</h2>

....

I don't see why not.
 
G

Geoff Hague

Jukka K. Korpela said:
But they aren't level 1 headings for the current page, are they?

No, I suppose not...

So, instead of this (which is what I essentially have now):

<h1>Current Page's Content</h1>
<h2>Subsection A</h2>
<h2>Subsection B</h2>
<h3>Sub-subsection</h3>
<h2>Subsection C</h2>
<h1>Mailing List</h1>
<h1>Upcoming Shows</h1>

.... I should *instead* have something like:

<h1>Current Page's Content</h1>
<h2>Subsection A</h2>
<h2>Subsection B</h2>
<h3>Sub-subsection</h3>
<h2>Subsection C</h2>
<h2>Mailing List</h1>
<h2>Upcoming Shows</h1>

?

I can understand the theoretical reasoning behind having only one <h1> per
page, but at the same time it seems counter-intuitive to me to include my
"Mailing List" and "Upcoming Shows" sections as sub-sections to the "Current
Page's Content".

Thanks for your response!
~Geoff
 
J

jake

Kris said:
No, stop making it a problem. Use <h1> markup for _the_ level 1 heading.
Don't use heading markup in a navigation bar, since it does not contain
headings for the page.

<h1>Title of this page</h1>

...

<h2>Navigation</h2>

...

<h2>The latest news</h2>

...

<h2>Behind the scenes</h2>

...

I don't see why not.
[/QUOTE]

That sounds very reasonable -- and gives the best idea of the
layout/structure of the page.

The OP should be aware that anything styled 'display:none' will also be
invisible to most text-to-speech UAs.

regards.
 
M

Mark Parnell

The OP should be aware that anything styled 'display:none' will also be
invisible to most text-to-speech UAs.

Unless it is specified for screen media, presumably? How good is support
for selecting media in aural UAs?
 
J

jake

Mark Parnell said:
Unless it is specified for screen media, presumably? How good is support
for selecting media in aural UAs?

So far as I know, the only UA that supports aural stylesheets is
linux-based Emacspeak.

I believe both users find this quite useful ;-)

regards
 
J

Jukka K. Korpela

Geoff Hague said:
I can understand the theoretical reasoning behind having only one
<h1> per page, but at the same time it seems counter-intuitive to me
to include my "Mailing List" and "Upcoming Shows" sections as
sub-sections to the "Current Page's Content".

Indeed, but then the problem is that the text "Current Page's Content"
shouldn't be an <h1> heading. It is not a heading for the entire page but
only for its table of content. So it would be best to have

<h1>...</h1>
<h2>Current Page's Content</h2>
<ul class="toc">
<li>Subsection A</li>
<li>Subsection B
<ul>
<li>Sub-subsection</li>
</ul></li>
<li>Subsection C</li>
</ul>
<h2>Mailing List</h1>
<h2>Upcoming Shows</h1>

And what you put in <h1>...</h1> should reflect the page as a whole, and
greatly depend on its content and purpose. It could be
<h1>Entomological Society of Erehwon</h1>
or
<h1>Studying insects at Erehwon, Calisota</h1>
or
<h1>We <img src="heart.gif" alt="love"> bugs!</h1>
 
G

Geoff Hague

Jukka K. Korpela said:
Indeed, but then the problem is that the text "Current Page's Content"
shouldn't be an <h1> heading. It is not a heading for the entire page but
only for its table of content. So it would be best to have

<h1>...</h1>
<h2>Current Page's Content</h2>
<ul class="toc">
<li>Subsection A</li>
<li>Subsection B
<ul>
<li>Sub-subsection</li>
</ul></li>
<li>Subsection C</li>
</ul>
<h2>Mailing List</h1>
<h2>Upcoming Shows</h1>

And what you put in <h1>...</h1> should reflect the page as a whole, and
greatly depend on its content and purpose. It could be
<h1>Entomological Society of Erehwon</h1>
or
<h1>Studying insects at Erehwon, Calisota</h1>
or
<h1>We <img src="heart.gif" alt="love"> bugs!</h1>

Okay, thanks. But in a sense, I think, I'm then back at my original state
of uncertainty about what I should do. The heading "Current Page's Content"
*is* what defines each page's content and purpose, so "Current Page's
Content" is really the only <h1> heading that makes sense to me.... Making
"Current Page's Content" an <h2> heading and adding an <h1> that says
something like "Current Page's Content Plus Mailing List and Upcoming Shows"
doesn't seem like a good idea.

I don't know if this'll make anything clearer at all, but here's a link to
the 'site-in-process':
http://www.captainsoftheworld.com/modernrepublic/test/
(check out the Shows section for the most extensive use of headings).

(oh, and just as clarification... I noted in your example you set up a <ul>
with class "toc". Please be aware I'm not really talking about a Table of
Contents page or anything... when I refer to "Current Page's Content" I mean
just that... the primary content/text/information on each individual page).

Cheers!
~Geoff
 
M

Mark Parnell

So far as I know, the only UA that supports aural stylesheets is
linux-based Emacspeak.
Pity.

I believe both users find this quite useful ;-)

So it's matching MSN TV for market share, then?
 
J

Jukka K. Korpela

Geoff Hague said:
Okay, thanks. But in a sense, I think, I'm then back at my original
state of uncertainty about what I should do.

We all live in a looping subroutine,
a looping subroutine,
a looping subroutine...
The heading "Current
Page's Content" *is* what defines each page's content and purpose,

Pardon? Every one of your pages is nothing but its own table of content?
Making "Current Page's Content" an <h2> heading and
adding an <h1> that says something like "Current Page's Content Plus
Mailing List and Upcoming Shows" doesn't seem like a good idea.

Well, if the page contains its own table of content _plus_ something,
then the table of content isn't correct since it does not contain that
something.
I don't know if this'll make anything clearer at all, but here's a
link to the 'site-in-process':
http://www.captainsoftheworld.com/modernrepublic/test/

Usually when people reveal some URLs, things magically get clearer. It
seldom hurts, though it sometimes surprises (when we see that we had
completely misunderstood the verbal explanations).
(check out the Shows section for the most extensive use of headings).

Well, that page is about shows by Modern Republic, which appears to be
a band (this should naturally be said on the main page), so the <title>
element's content, "Modern Republic - Shows" could be used as a starting
point when writing the <h1>. However if you have a logo that says
"Modern Republic", then you could imaginably have just <h1>Shows</h1>,
since the logo gives context. But you should really include the logo
using <img>, not a background image - background images can be turned
off, and they are of course not shown at all by nongraphic browsers, and
there is no way to specify a textual alternative. Using <img> you can say
<img alt="Modern Republic" src="..." width="..." height="...">

The words "HOME", "SHOWS", "ABOUT" and "CONTACT" are just link texts, so
any heading markup would be misleading.
(oh, and just as clarification... I noted in your example you set up
a <ul> with class "toc". Please be aware I'm not really talking
about a Table of Contents page or anything... when I refer to
"Current Page's Content" I mean just that... the primary
content/text/information on each individual page).

But then why would you use a heading to say such things? The content just
is there. A heading should _say_ something. I have no idea of what you
are going to put on the page, so I can't suggest a heading. Generally,
you only know what a heading should be when you have written the content,
or at least clearly decided on what it shall be.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top