Use of Headers. Need advice ...

[shapper]

Hello,

I am working on a web site with a two column layout, "Content" on the
left and "Sidebar" on the right.

Sidebar

1) Sidebar is divided into sections (div). Each section has header.

Content
Content can display the following data (each is a different page):

2) In HomePage.html a list of blog articles is displayed. Each blog
article has a title.

3) In ShowArticle.html a specific article is displayed (Title, Body,
Tags).

4) In Documents.html a list of documents is displayed but in this case
the page has a title and a subtitle. For example:

"Documents
here you can find all the documents you need."

5) In Contact.html a title with subtitle is displayed just as in (4).
After the title and subtitle there is only paragraphs with the
contacts.

So basically that's it ... I am trying to figure the correct way to
use <h1>, <h2>, etc.


After reading some information on the web I came up with the following
structure:

In HomePage.html or Documents.html I will always use <h2> for each
post title when in a list.

In Documents or Contact I will always use a <h1> for page title and
<p> for the short "catch attention" phrase under it.

In ShowArticle I will use <h1.Article> for the article title.

In SideBar I will use <h2.Sidebar> for each section title ... ( I am
not completely sure if I should use h1 but maybe I should use h2
because, for example, in Contact.html I will have an h1 which will be
that page title ...


Could someone, please, advice me on this?

Thanks,
Miguel

 

[Harlan Messinger]

Hello,

I am working on a web site with a two column layout, "Content" on the
left and "Sidebar" on the right.

Sidebar

1) Sidebar is divided into sections (div). Each section has header.

Content
Content can display the following data (each is a different page):

2) In HomePage.html a list of blog articles is displayed. Each blog
article has a title.

3) In ShowArticle.html a specific article is displayed (Title, Body,
Tags).

4) In Documents.html a list of documents is displayed but in this case
the page has a title and a subtitle. For example:

"Documents
here you can find all the documents you need."

5) In Contact.html a title with subtitle is displayed just as in (4).
After the title and subtitle there is only paragraphs with the
contacts.

So basically that's it ... I am trying to figure the correct way to
use <h1>, <h2>, etc.


After reading some information on the web I came up with the following
structure:

In HomePage.html or Documents.html I will always use <h2> for each
post title when in a list.

Don't do that! They are not headers *of the page on which they are
listed*. The fact that they are the headers *on the pages to which they
link* is irrelevant.

In Documents or Contact I will always use a <h1> for page title and
<p> for the short "catch attention" phrase under it.

In ShowArticle I will use <h1.Article> for the article title.

In SideBar I will use <h2.Sidebar> for each section title ... ( I am
not completely sure if I should use h1 but maybe I should use h2
because, for example, in Contact.html I will have an h1 which will be
that page title ...

A page has a single h1 that covers the whole page. Its sections have h2.
And so forth.

 

[shapper]

Don't do that! They are not headers *of the page on which they are
listed*. The fact that they are the headers *on the pages to which they
link* is irrelevant.






A page has a single h1 that covers the whole page. Its sections have h2.
And so forth.

That said, I think sidebar should be "h2" but the rest is ok or not?

Maybe I should use h3 on the titles of the articles since the sections
on the side bar already have the h2 or not?

 

[Harlan Messinger]

That said, I think sidebar should be "h2" but the rest is ok or not?

Maybe I should use h3 on the titles of the articles since the sections
on the side bar already have the h2 or not?

You mean, in ShowArticle.html? No, the title of the article shown in
ShowArticle.html should be h2 (assuming h1 is a headline identifying the
site).

 

[shapper]

You mean, in ShowArticle.html? No, the title of the article shown in
ShowArticle.html should be h2 (assuming h1 is a headline identifying the
site).

Oh I see ... The only thing that I have that identifies the web site
is its logo (image) inside an anchor tag.

So I should have something like:

<h1 id="Logo"><a href="/"><img alt="This is my web site"
title="Welcome" src="/pix/logo.gif"/></a></h1>

Then I would have:

+ All Pages
- Use <h2> on Sidebar title and style it as h2.Sidebar
- If Sidebar has a section with subsections I will use h3.Sidebar

+ HomePage.html

The list of documents should have <h3> for all titles

+ ShowArticle.html

The article title should have <h2>

+ Articles.html

The page header and subtitle should be:
<h2> Our Articles </h2>
<p class = "Subtitle">Check our articles for more information</p>

The articles list should use as in HomePage.html <h3> for each page
title

+ Contact.htm

The page header and subtitle should be:
<h2> Contact </h2>
<p class = "Subtitle">Contact us</p>


Finally:

Any text inside an article that has a "child" header should have <h4>.
And any text inside a page like Contact that that has a child header
should have <h3>

What do you think about this structure?

Thank You,
Miguel