Headings and structuring a document

HTML & CSS
1

I am trying to write semantically correct code. I really am, but I am also trying to be practical. Maybe I still don’t have as much f the hang of this as I’d like to think, but sometimes the two goals seem to conflict.

I a few general questions for the semantics gurus of this forum.

*Given that we have the following information and in this order ( a generalization of information on most documents i’ve seen

HEADER:
-> Name of Site
-> Brand or general statement (optional)
-> Navigational items
CONTENT:
-> Main Story ( Main Content)
->Subsections of main Content
->Secondary Content
->Subsections of Secondary Content
->related links ( optional)
FOOTER:
->Any number Terciary ( of footer content)
-> Navigational items ( repeat from head)
->contacts
->credits

  • given navigation will be most likely coded as a list ( ul, ol, dl).

what are your opinios on:

  1. Multiple H1 tags in one document, specifically : H1-> Name of Site, and H1–> Main Story

    • Given also that I have read debates in this forum saying that you shouldn’t skip headers… H? for ->Subsections of main Content, ->Secondary Content, ->Subsections of Secondary Content. For exp. assume the main story is long and has… 3 sub heads thought itself ( for the sake of simplicity all three subheads have the same importance); there are 4 secondary blocks of contents and each has a subhead with in it… ( I mean if I have the main content as H1, and any sub sections within that story as H2, it would seem confusing to make the sub content H3 as the sub content doesn’t belong to the sub stories of the main content. … and so forth. Using H1 Main content and h2 for secondary content and h3 or even h3 and h4 respectively would have me skipping headers… :confused:

  3. Assuming we also wanted to give a header to-> Navigational items and/or ->related links… again this would be the problem of skipped heads being logically necessary. I normally think of H5 / H6; I would do this even if the last headers was something like an h3. The reasoning behind this is that navigation or even related link do not actually belong to the content /sub content. Again I could be totally off…

  4. Alternatively, and somewhat off-topic, suppose I don’t use a header to label my navigation-lists. Would it still be semantically correct if I used inline-text at the UL level:( I know I should put Hxs or any other block element at the block level, but anonymous text and inline- is ok, right?)

<ul> <b> This are Nav links</b><span class=“skipNav”>Skip Nav</span>
<li><a href=#“>Link</a><li>
<li><a href=#”>Link</a><li>
<li><a href=#“>Link</a><li>
<li><a href=#”>Link</a><li>
</ul>

thank’s all for your knowledge and opinions… :slight_smile:

2

No. The H1 should describe the content of the document. The name of the site isn’t semantically important. It should probably be in a DIV somewhere before the H1 that explains what it’s all about.

HTML marks up documents, not sites.

No, you shouldn’t. H1 for the document header. H2 for the top-level section headers. H3 for the subsection headers. H4 for sub-subsection headers, etc.

No, it wouldn’t. It would probably be an H2, since it is on the same structural level as your content. At least it has been in every web document I’ve ever designed, I think.

I can’t imagine what kind of structure your documents have if the navigation is at the fifth or sixth structural level! :eek:

That would be utterly wrong. The following headers can follow an H3:

[list][]H1 – in the unlikely case that the document contains two or more separate articles etc.
[]H2 – if there is a new top-level section.
[]H3 – if there is another subsection.
[]H4 – if there is a structurally subordinate sub-subsection.[/list]
That’s all. An H5 or H6 can never follow an H3 and make semantic sense.

No, that’s invalid HTML. You could put it in the first LI element, but then you’re mixing header information with links, which means you no longer have a set of information that constitutes a list.

3

Excellent questions. I’ve pulled my fair share of hair over these.

Oh, by answering, I’m not implying that I’m a semantics guru. Wait for Tommy or Cooper for that : )

Multiple h1’s:
Most people seem to be of the opinion that this gets a little nonsensical if you consider the h1 to be the main title of the page, or, what the page is about.

For things like home pages, where the page introduces the company/person etc, I will usually make that company/site/person name the h1, even if it is a logo, not because the site is about that company/person but because that page is also about that (this assumes the page is introductory).

But for all other pages on the site, I don’t use h1 there. I use h1 for whatever I think the page is about. Example, on the Contact page I’ll have a p for the logo/company/person name, and h1 around the title of the contact page
<h1>contact us</h1>
because that’s what the rest of the page is about.

I consider stuff like navigation to not necessarily be part of the main page document, as web pages do sometimes have trouble fitting into the traditional print idea of a document…

Skipping headers: in general, you don’t, but when you come across parts of a page where it’s a page element not related to the Main Content, it can get iffy.

In a straightforward page like Contact, everything underneath that should be able to be h2’s, h3’s, and rarely below that level. Mostly, it makes little sense to someone seeing
<h1> contact us</h1>
text…
<h2>address</h2>
text…
<h2>route</h2>
text…
<h3>from Cityland</h3>
text…
<h3>from NorthPole</h3>
text…
(up to this point, stuff makes sense)
<h5>Email us</h5>

Here, not only does the lowness of the header not make sense, but you wonder where h4 went. Also, you may want to keep in mind that screen reader users and others who have more developed keyboard navigation can skip around by header level. Someone reading the various h2’s of contact may expect a certain level of sanity in the header levelling : )

Headers above navigation:

I traditionally have used h2’s for this, under the assumption that my main content title is an h1. This does bring up the dilemma of, the navigation header isn’t part of the other content… <h2>Main site Nav</h2> and <h2>Specific Product Nav</h2> don’t necessarily make sense as being subheaders of <h1>contact</h1> or anything else. But I never make them h1’s, because they are not the main title of the page.

Usually my h2’s are hidden and are those for those who want them (screen reader users who want to jump around by header, or people who want a clear difference between multiple menus a site may have, etc).

If you only have a single navigation menu, a header may make little sense in the first place.

Another common thing I see is simply that navigation and all sorts of other stuff are sitting in a sidebar, started off with an h2 and everything that comes afterwards follows a sensible hierarchy of h2’s for each new topic and h3’s or further for any subs belonging to those topics— independent of the main page content’s hierarchy.

BTW I know it was only to make a point, but this code:


<ul> <b> This are Nav links</b><span class="skipNav">Skip Nav</span>
<li><a href=#">Link</a><li>

Is illegal. LI’s are the only valid children of ul’s, so that b (which also doesn’t make sense, b is for typographic reasons usually) would need to be above the ul anyway.

4

Stomme,

You have echoed my feeling exactly…

Aside from the ubiquitous semantic issue, this the other motive for my Q. I am making part of my site testing and my guide for structure, “every thing off” mode. So CSS, images, and JS off…and the page should look/read like it’s 1994 (Which I kinda remember, but not really…lol) . But what I mean it should read logically in default-style all text mode)

Note when I say “big/small” i am NOT speaking stylisically, but since everything will be rendered by browser default… I am taking that liberty…

So, the biggest text should be: the name of th e site, regardless which page you are on? This is the part I dont remember about 1994… but if it is it would have been an H1

Equally important would be the main content of the page… thus a second H1. BTW, thats why I thought of the TYPOGRAphic <b> tag for the navigation… it would visually indicate NAVIGATION, without having a HEADER for navigation…

By now my novice mentality is probably showing through… so forgive me as I continue to dig myself a deeper hole…

I’ve been using headers not to “map out segments” but as “highlightable” content. My thought was that a header was of some importance, and of importance to search engines. Since EVERY PAGE of EVERY SITE has “navigation” but it really does not relate directly to the content( all pages may have “home” and a “contact” but some are abotu widgets others about midgets…) I have always been weary of giving that content a header… and Thus why I had considered merely using <bold>.

thanks for the tip about the ULs… for some reason I thought there was a place for anonymous text withing a UL… but I learn something each day, or at least try to.

5

Most people seem to be of the opinion that this gets a little nonsensical if you consider the h1 to be the main title of the page, or, what the page is about.

Another thing that supports what I was saying, regarding H1s, just popped in my head. Let’s ay you have a site called “Poes Cat”. On the home page you code H1 for the title of the page" Poes Cat", H1 or H2 for “Welcome to the cat’s page”. By what you said, on the “Kitty litter” page it should/be H2 (or whatever) for the logo… and H1 for “Kitty litter”… since its assumed the page is about kitty litter…

However… couldn’t it be reasoned that the main topic is still “Poes Cat”… that in the home page the sub topic was actually “welcome to my page” and in the “kitty litter” page is “kitty litter”? Thus the logo remains at H1 for all pages in a site since all pages are ABOUT the site, H2 the main topic…

But this also leaves the question stuff like sidebars/ navigation labels
i keep vacillating between a structure like:

<h1>Poes Cat ( logo)
<h2>Nav ( header for the main nav div/ hidden)
<h2>Main Story
<h3>any main story subheads
<h3>Secondary content (header for any segment of secondary stories/???/ hiden)
<h4><h5>(actual heads for secondary content and any sub head)
<h2> Side Content( header for the sidebar/ hidden)
<h3> Sections for side bar (such as a list of links, side story, blog nav head… etc)
<h2-(h3?)> Footer/Terciary content (???)
<h3-h4?> footer titles as needed

*Of course I am still uncertain because H2s seem awfully important for something like NAVs and footers ( even if these are hidden via css)
*There could still be confusion between secondary content and MAIN subheads

6

Erm, when I re-read my statement, it’s not clear: it’s “multiple h1’s” that I consider non-sensical most of the time. In HTML5 they allow multiple H1’s with the idea that it’s the main-level header for a “section” or, as Tommy mentioned above, if you have two separate articles on the same web page.

For the example above, the Kitty Litter page is about Kitty Litter and so we would have
<h1>Kitty Litter</h1>

Because it’s convention to have site name and other header stuff at the top of the document, you may think “Poes Cat” needs to be a header, however I do not do this, except on the first page (assuming the Home Page is an introduction to the whole site). On the Kitty Litter page, “Poes Cat” is, for me, a p. Its importance regarding the document has changed. The Kitty Litter page isn’t about Poes Cat, and while it may be about Poes Cat brand Kitty Litter, the h1 is still Kitty Litter (if you’re really pushing promotion, it could be
<h1>Poes Cat brand kitty litter</h1>)

but the logo remains a non-header because while it may seem to “head” the site as a whole, on the web individual pages are seen (at least by search engines, but also by casual surfers who don’t enter the site via the Home Page) as single entities of their own.

So Coca-Cola’s Contact page should have Contact as their main-level header and everything else is under a sub-header… and the name “Coca Cola” on that page is not a header at all.

re <b>‘s: Typographic here would mean things people would do in print, popularly ships’ names and the such. Not because you want it bold to catch attention or to say it’s announcing something; there are other, better tags for that.

While you could have a <p> above your ul, it looks like it could also be a header above your navigation. Because the page is not about the navigation, it’s not going to be an h1.

<h1>Poes Cat ( logo)
<h2>Nav ( header for the main nav div/ hidden)
<h2>Main Story
<h3>any main story subheads

For me, it would be:
<p id=“logo”>Poes Cat ( logo)
<h2>Nav ( header for the main nav div/ hidden)
<h1>Main Story
<h2>any main story subheads

If I can make the nav come later in source, then that’s better, as it’s also weird to have an h2 come before an h1. But often with a floated-sidebar next to static content, this is what you end up with. Since it makes even less sense to lower navigation/whatever headers to h3, I leave them h2. Even better if I don’t need navigation headers (remember if you’re making them invisible, know that that’s either only for those with CSS off, or those with a screen reader, and by the time they get to the navigation, if they want to skip it, they have multiple ways to do this… they are not restricted to the TAB key… why I put my skips right near the top of the document. If they know where they want to go, they could do it right there).

I don’t think I’ve ever had a header in a footer but if you have one of those trendy fat footers with lots of lists of links and stuff, then they would be likely starting with h2 (as the first-level coming off the page itself’s h1, like with sidebar headers). Again, it makes even less sense to skip to an h3 for the footer section, because then where’s h2? The lesser-importance of the footer overall I don’t think is that strong of a factor. I can imagine my Main Content starting with an h1 because that’s why the page exists, and all other large site sections like sidebars and footers etc would have h2’s, because they are the next level after h1, can’t have h1 themselves, even though their h2’s don’t really count as a subheader of the h1’s actual topic.

Why it’s a bit hard for me, because I do see “site” stuff as separate from what the Main Content of a page is. Footers and sidebars who don’t change from page to page, have a more tenuous relationship with the main content’s headers, and are more like a book’s Table of Contents, Index pages, and cover.

7

  1. Possibly; depending upon context but unlikely in general (as was previously mentioned) and probably not in your case.

  2. Don’t always believe Charlatans and Pretenders. Refer to my answer for [1.] it has to make logical sense when “linearised” and usually you shouldn’t skip. But remember many web pages have distinct sections of equal importance/value.

  3. Back to answer [2.]

Think topology and divided sections. I personally wouldn’t use B as that’s “presentational” and has no hierarchy value, an Hx however does.

8

In general, I would steer clear of multiple H1s. If you do use them, they should be in equivalent positions and roles, which your example doesn’t do.

    • Given also that I have read debates in this forum saying that you shouldn’t skip headers… H? for ->Subsections of main Content, ->Secondary Content, ->Subsections of Secondary Content. For exp. assume the main story is long and has… 3 sub heads thought itself ( for the sake of simplicity all three subheads have the same importance); there are 4 secondary blocks of contents and each has a subhead with in it… ( I mean if I have the main content as H1, and any sub sections within that story as H2, it would seem confusing to make the sub content H3 as the sub content doesn’t belong to the sub stories of the main content. … and so forth. Using H1 Main content and h2 for secondary content and h3 or even h3 and h4 respectively would have me skipping headers… :confused:

What you sometimes need to do is to introduce “phantom headings”. If you have <h2>s as the sub-headings within your main content, maybe you should also consider having an <h2> to denote the start of your secondary content, with <h3>s below it. You may wish to hide the <h2> at the start of the secondary content if it is not needed for visual browsers, but as well as giving structure and consistency to the page, it will also help non-visual browsers.

Although in general you should avoid skipping heading levels, there are times when it makes more sense to do so, if it improves the consistency of your site. For example, you might typically have headings down to <h4>, but on one branch of the hierarchy there is no <h3> level - it goes straight from <h2> to <h4> - this would be OK if it meant that the <h4>s were equivalent across the branches.

  1. Alternatively, and somewhat off-topic, suppose I don’t use a header to label my navigation-lists. Would it still be semantically correct if I used inline-text at the UL level:( I know I should put Hxs or any other block element at the block level, but anonymous text and inline- is ok, right?)

<ul> <b> This are Nav links</b><span class=“skipNav”>Skip Nav</span>
<li><a href=#“>Link</a><li>
<li><a href=#”>Link</a><li>
<li><a href=#“>Link</a><li>
<li><a href=#”>Link</a><li>
</ul>

I would always put the <hx> before the <ul> - that makes it crystal clear that the heading relates to the list as a whole.

9

I would always put the <hx> before the <ul> - that makes it crystal clear that the heading relates to the list as a whole.

Well, that and you can’t do it any other way. The hx/whatever MUST be outside the ul.

10

I am learning a lot here. But sadly I think I have had the meaning of a heading ( or maybe even the concept of an “article” TOTALLY wrong all this time. Please, check me on this.

again lets a sume we have a page with “informational” or “blog style content” … I alway’s imagined it as a page in a magazine, book, or newspaper.

it could have multiple UNRELATED STORIES ( think of 3 blog posts, they may or may not have to do with each other) .

to make sense of this I had always thought of using H1 to give to whatever the MAIN story/post was then a lower heading to any subsequent story ( I say h1 now cuase I know better; in th e past, I would have use h2 and reserved the h1 for the site name). I do realize that this is somewhat arbitrary… ( te main story could be determined by what was posted last, or what was more relevant to the site topic, or merely the site owner’s fickle whim… in any case thats what I thought made something an “H1”.

This may be something where having been a print designer screwed me up, maybe… in print there are sub heads. in print subheads ARE semantically important. The story could be “Insect Dreams” but the sub title “The half life of Gregor Samsa” there are also “story sections” “Gregor woke up”, “go west youn roach” and “the end at los Alamos”. The page may the contain other content that that may not be related to Gregor Samsa, but one could think of it as having similar structure.
Different from page-layout is that we also have other “functional” sections of a web page that also vie for hierarchy

But let’s not bring that up for now.

In the situation I’ve just described my header usage IN THE MAIN CONTENT DIV, at best , would look like this:

DIV (main content)
DIV(Story block)
H1 Insect Dreams
H2 The Half Life of Gregor Samsa
P
P
H3 Gregor Wakes up
P
P
H3 Go West Youn Roach
P
P
H3 The End At Alamos
P
P
DIV(ANOTHER Story block)
H2 Public Image
P
P
H3 Two sides to every story
P
P
DIV(ANOTHER Story block)
H2 Last Week’s Blog post
P
P
P

but maybe I am just WAY off of what constitutes good header use ( in my humble defense, I was thinking “search engine”…)

11

The easiest way to know which header level to use is to mentally indent the headers, just like you indent your code. You can also number the headlines (which can be done automatically with CSS, by the way), which I’ve done here:

<h1>1 Page title</h1>
 <p>Contents to 1
 <p>Contents to 1

 <h2>1.1 Subsection</h2>
  <p>Contents to 1.1
  <p>Contents to 1.1

  <h3>1.1.1 Sub-subsection</h3>
   <p>Contents to 1.1.1
   <p>Contents to 1.1.1

  <h3>1.1.2 Sub-subsection</h3>
   <p>Contents to 1.1.2
   <p>Contents to 1.1.2

 <h2>1.2 Subsection</h2>
  <p>Contents to 1.2
  <p>Contents to 1.2

  <h3>1.2.1 Sub-subsection</h3>
   <p>Contents to 1.2.1
   <p>Contents to 1.2.1

 <h2>1.3 Subsection</h2>
  <p>Contents to 1.3
  <p>Contents to 1.3

As you can see, it would be impossible to suddenly insert an H4-level into the structure at this point, because it would have to be indented twice, and you would lack a level in the numbering (it would have to be 1.3.[missing header].1).

I would never use a header for site navigation. One because convention dictates that site navigation doesn’t have headers, and two because the navigation is not page-related contents, but rather site-related contents, and the header elements is intended for page structure.

12

Why? A <li> can contain inline or block-level elements. (I’m taking it as read that you would put the <hx> into an <li> rather than dropping it directly into the <ul>, because that really would be illegal…)

13

It can sometimes help to sketch out your page using boxes to group together related content and sub-sections, as in this example: http://getdown.org.uk/articles.png
It’s clear from that sketch that “Articles” and “Sidebar” are equivalent level headings (probably <h2> because you would have an overarching <h1> at the top), and that “Major article” and “Minor article 1/2/3/4” are all equivalent level headings (which would then be <h3>). Sure, you might want to vary the sizes and the visual importance of some them - that’s what IDs or classes are for.

The other thing to notice there is that <h2>Articles</h2> encompasses everything down until you get to <h2>Sidebar</h2>. There shouldn’t be any content that doesn’t tie into all the headings above it in the hierarchy.

14

I like your definition of “impossible”, meaning “I don’t think you should…” :stuck_out_tongue:

There are plenty of examples where you have a strictly defined hierarchy and recurring sub-headings, and it could then be absolutely appropriate to miss out a level.

Here’s one example. Let’s say you are doing a report on an area, broken down by council area - for each subdivision, you want to look at common factors, eg housing, transport, education. You might find that in different areas, there are different numbers of tiers of government.

This is true. Within the UK region of “Yorkshire & Humber”, there are several counties and sub-regions, and within most but not all of those there is a further sub-division.

eg:

+ [COLOR="DarkGreen"]<h1>[/COLOR] Yorkshire & Humber
   + [COLOR="#006400"]<h2>[/COLOR] North Yorkshire
      + [COLOR="#006400"]<h3>[/COLOR] Craven
         + [COLOR="#006400"]<h4>[/COLOR] Education
         + [COLOR="#006400"]<h4>[/COLOR] Housing
         + [COLOR="#006400"]<h4>[/COLOR] Transport
      + [COLOR="#006400"]<h3>[/COLOR] Hambleton
         + [COLOR="#006400"]<h4>[/COLOR] Education
         + [COLOR="#006400"]<h4>[/COLOR] Housing
         + [COLOR="#006400"]<h4>[/COLOR] Transport
      + [COLOR="#006400"]<h3>[/COLOR] Ryedale
         + [COLOR="#006400"]<h4>[/COLOR] Education
         + [COLOR="#006400"]<h4>[/COLOR] Housing
         + [COLOR="#006400"]<h4>[/COLOR] Transport
   + [COLOR="#006400"]<h2>[/COLOR] West Yorkshire
      + [COLOR="#006400"]<h3>[/COLOR] Leeds
         + [COLOR="#006400"]<h4>[/COLOR] Education
         + [COLOR="#006400"]<h4>[/COLOR] Housing
         + [COLOR="#006400"]<h4>[/COLOR] Transport
      + [COLOR="#006400"]<h3>[/COLOR] Bradford
         + [COLOR="#006400"]<h4>[/COLOR] Education
         + [COLOR="#006400"]<h4>[/COLOR] Housing
         + [COLOR="#006400"]<h4>[/COLOR] Transport
   + [COLOR="#006400"]<h2>[/COLOR] York
         + [COLOR="#006400"]<h4>[/COLOR] Education
         + [COLOR="#006400"]<h4>[/COLOR] Housing
         + [COLOR="#006400"]<h4>[/COLOR] Transport

I would argue that the <h4> subheadings in the final section are absolutely justified, because they are equivalent to the <h4> headings in the other sections; it would be mad to consider them as <h3>, with the concomitant headache of getting styling consistent, just because there is a level missing from the hierarchy at that point.

15

Why? A <li> can contain inline or block-level elements. (I’m taking it as read that you would put the <hx> into an <li> rather than dropping it directly into the <ul>, because that really would be illegal…)

True, it’s possible, and it could make sense to do so under some strange set of circumstances. In this case, however, it doesn’t make sense to do it, as it would mean the header is subordinate to the contents it’s being the header for.

I like your definition of “impossible”, meaning “I don’t think you should…”

From a semantic standpoint, it is impossible to do so, if you still want your content to make sense. Your argument for chosing h4 over h4 doesn’t hold. The headers under York are subordinate to York, and must be h3, not h4. How the headers are styled must never be an argument for which header level is chosen. The header structure does not say anything about how important the contents below that header is either. All the header structure does is define which headers are subordinate to which. In your example, they are immediately subordinate to York and must have a header level of exactly one less than York.

16

The front page on a blog would be like the front page of a newspaper: it would contain a selection of the newest content and try to entice readers to stick around and delve deeper. On many modern blogs, which aren’t about publishing content but about making money from advertisements, articles are usually so short (and void of content) that several whole articles fit on the front page. On more content-focused blogs, the front page would list a number of leads, with links to the full stories.

In either case, I think the name of the blog would be suitable for the H1 on the front page. Then there could be an H2 for each article or lead. On the separate article pages, though, the article title should be in an H1 with an H2 for each section.

I think the first notion was to have the Hx as an immediate child of the UL, which is why Poes objected. But including it in the first LI is also fraught with issues.

Since the heading is announcing the content of the whole list, it doesn’t make semantic sense for it to be a part of that list. Also, it isn’t semantically related to the remainder of the list’s content, which is normally links. So you’d be mixing apples with oranges.

Although a business card has a similar shape to a playing card, it wouldn’t make sense to put a business card into a deck of playing cards. Yes, it fits physically, but it doesn’t belong there and it alters the ‘meaning’ of the deck.

17

Yup, that’s exactly my thinking too.

[ot]

Although a business card has a similar shape to a playing card, it wouldn’t make sense to put a business card into a deck of playing cards. Yes, it fits physically, but it doesn’t belong there and it alters the ‘meaning’ of the deck.

No, but it could be good fun seeing other players try to work out what is going on :D[/ot]

18

I would argue that the <h4> subheadings in the final section are absolutely justified, because they are equivalent to the <h4> headings in the other sections; it would be mad to consider them as <h3>, with the concomitant headache of getting styling consistent, just because there is a level missing from the hierarchy at that point.

You mustn’t confuse a shared relationship with malformed heading structure.

19

Steve D:

It can sometimes help to sketch out your page using boxes to group together related content and sub-sections, as in this example:…

this is exactly how i am trying to learn to think. But my questions remains . In the example you provided. What happens if the MAIN ARTICLE is written to have parts or subheads? dont these have the semantic meanings?

for example , thes assume the text you get for the MAIN article is like this…:

Spiderman
Your Friendly Neighborhood Web Crawler
paragraph text paragraph text paragraph text…
paragraph text paragraph text paragraph …

With Great Power comes great Responsibility
paragraph text paragraph text paragraph text…

every Body Gets ‘One’
paragraph text paragraph text paragraph text paragraph text paragraph …

would that not structure to something like :
<h1> Spiderman
<h2> Your Friendly Neighborhood Web Crawler
<h3>]With Great Power comes great Responsibility
<h3>every Body Gets ‘One’

see what I mean??

Now following the rest of you diagram … I would have to ponder if the minort articles would be <h4>? also wouls the sidebar and navigation be H2? or h5? or h4?

OR maybe I am wrong all together ( which is one of the main issues I am having)… and that page info for the main story should have been structured as:
<h1> Spiderman<span> Your Friendly Neighborhood Web Crawler
<em> or <b>With Great Power comes great Responsibility
<em>or <b> every Body Gets ‘One’

see where my confusion comes from now?

20

<h1> Spiderman<span> Your Friendly Neighborhood Web Crawler
<em> or <b>With Great Power comes great Responsibility
<em>or <b> every Body Gets ‘One’

Nope nope. Remember, the Web Standards Evangelical Movement will NOT be able to send jack-booted storm troopers into your room at night if you get the header order wrong, but absolutely someone with a screen reader will be cursing your name if you have this big wall of text and instead of headers, you have em’s and b’s (again, b is typographic and typographic doesn’t mean “it’s supposed to look bold” but how printers have traditionally used bold face for certain kinds of information).

Now I’ll admit I have done this a few times:
<h1>Spiderpig <small>does whatever Spiderpig does</small></h1>

where the small is really, really stretching it but I do it in a case where the name of the article and the tagline, as a sort of motto for a company, are kept together and the <small> is used also as an extra CSS styling hook. Something I’ve picked up from deathshadow.

But in general, I would do it the way you started with:

<h1> Spiderman
<h2> Your Friendly Neighborhood Web Crawler
<h3>With Great Power comes great Responsibility
<h3>every Body Gets ‘One’

Assuming that Spiderman is the main topic, Friendly Neighborhood Web Crawler was a subheader, and then if the other two headers were part of Friendly Neighborhood Web Crawler.

If they are not, then this could be more appropriate:
<h1> Spiderman</h1>
(text is optional)
<h2> Your Friendly Neighborhood Web Crawler</h2>
(text…)
<h2>With Great Power comes great Responsibility</h2>
(text…)
<h2>every Body Gets ‘One’</h2>
(text…)

I don’t know the references to the last two so I don’t actually know if they have anything to do with Friendly Web Crawler. If you make those last two h3’s, that tells me that Great Power and Body Gets One have something to do with Friendly Web Crawler.
If they are h2’s then it tells me it’s a main thing about Spiderman like Web Crawler is.


                          1. Spiderman:
2. Friendly Web Crawler  2. Great Power   2. Get One

means something different than


        1. Spiderman
        2. Friendly Web Crawler
3. Great Power      3. Get One

I can’t ASCII so just pretend this is a bit like a flo-chart and there are lines pointing between headers.

Anyway because I am not that familiar with Spiderman, this is a good example, because the point is, the header level tells me who belongs to what. Headers tell me if Gread Power is a section of Spiderman or more specifically a section of Spiderman, Friendly Web Crawler.