Question About h4 Tag Instead of Span, Link in h4, and h4 Before h2

[gouri]

I had a couple of questions about improving markup, and I was hoping that you guys could help me with this.

On several pages of a website, I have the following in the body section of the HTML source code:

An h1 tag in its own block and after that in the body text block, it says Chapter 1, a few paragraphs below that, and then a link to another page.

I am thinking of coding this in the following way:

<h1>Build a Great Widget</h1>
<h4>Chapter 1</h4>
<p>Text here</p>
<p>Text here</p>
<p>Text here</p>
<h4><a href>Building Red Metal Widgets</a></h4> (There is a link to another page within the h4 tag)

(1) Would it be ok to do the above or should I use span tags where I have the h4 tags?

In the h4 tag at the top, I don’t have keyword phrases that I want the page to rank for, but in the h4 tag at the bottom, the link within it is often a keyword phrase that I want the page that it links to to rank for. Could having a link with keyword phrases within an h4 tag be over optimization? I suggested the above structure because I think that it is good markup, but I don't want to over optimize. Also, I have heard that it is okay to put a link in a heading tag but can you tell me if it is okay to do this?

(2) Does using h4 tags instead of the span tags help to make it clearer to the search engines what the page is about? Theme, content, etc.

(3) If using the h4 tags is over optimization, can I perhaps use the h4 tag at the top and at the bottom, where I have the link with the keyword phrase, use the span tag instead of the h4?

(4) Is it ok to use an h4 tag after an h1 and not have h2 and h3 tags on the page? h2 and h3 tags, I think, are good to use for sections of a page, but when a page only has paragraphs and you are saying something like Chapter 1, I think that it is better to use an h4.

On other pages of the site, I would like to make the markup in the following way:

<h1>Build a Cool Widget</h1>
<h4>Chapter 2</h4>
<p>Text here</p>
<h2>New Methods<h2>
<p>Text here</p>
<h2> Older Methods</h2>
<p>Text here</p>
<h4><a href>Building Smooth Green Widgets</a></h4> (There is a link to another page within the h4 tag)

(1) When I did some research on the internet, I mostly read that heading tags should be in order. Would it be okay to have the h4 tag before the h2 tags?

Another thing that I had a question about is the signature. I am thinking of coding my signature on the contact page in the following way:

<h4>
Name
www.buildinggreatwidgets.tld (in link form and there are keywords in the domain. The domain is also in link form in the footer of the website.)
[e-mail] (in link form and there are keywords in the domain name portion of the address)
</h4>

(1) Would this be good markup without over optimization? Or should I use the span tag instead?

I know that I have asked a lot of questions, but I want to code my pages properly. Many of you probably have more coding experience than me.

I would really appreciate your responses.

[lucy24]

:: peering into crystal ball ::

You're basing this on built-in header size, aren't you? Otherwise there would be no reason for a structure of

<h1>
. <h4>
. . <h2>
. . <h2>
. <h4>

YES, the headers should be sequential. That is: not in numerical order from top to bottom, but nested from outside to inside. They're one of your most important semantic markings.

<h1>only one on the page *
. <h2>second-most important category: 1 or more per page
. . <h3>subdivision within the <h2> group: 1 or more per <h2> as needed
. . . <h4>subdivision within <h3> ... et cetera.

If the "look" of your page requires <h2> to be smaller than <h4>, say so in the CSS.

There may be situations where it's appropriate to use headings for a link by itself, but I can't think of any offhand. Here what you probably want is just bigger text, maybe centered or set off in some way.


* Google hates me because I generally have only one <h1> per directory. Secondary pages are, well, secondary. To me that means <h2>.

[gouri]

Hi Lucy,

You're basing this on built-in header size, aren't you? Otherwise there would be no reason for a structure of

<h1>
. <h4>
. . <h2>
. . <h2>
. <h4>

The text size of the h4 would be smaller than the text size of the h2. It would be the size of the text in the paragraphs. Does this make it okay to use the h4 before the h2 tags?

Or should I use span tags instead of the h4 tags for both Chapter 1 and the link and maybe make the text in them bigger than the text size of the paragraphs, but not as big as the text in the h2 tags?

For the pages on which I don't have h2 tags, should I use span tags instead of h4 tags and make the text in them bigger than the text size of the paragraphs?

[lucy24]

You need to separate two things: semantics/structure, and presentation. First separate them in your mind ;) and then you can separate them in the code.

The stuff you're calling h4 is more important than the stuff you're calling h2. It's closer to h1 in the hierarchy. The stuff you're calling h2 is less important than the the stuff you're calling h4. It's further down the hierarchy.

Heading numbers are concepts: h1 is more important than h2 is more important than h3 and so on down. Matter of fact, where is h3 in all this?

First lay it out conceptually. Think of an outline:

I. Build a Cool Widget
. 1. Chapter 1
<p>Text here</p>
. 2. Chapter 2
<p>Text here</p>
. . a. New Methods
<p>Text here</p>
. . b. Older Methods
<p>Text here</p>
. 3. Chapter 3

and so on.

Match that up with h1, h2, h3 and so on downward.

And now, after you've got the organization and structure in place, you can mess with how it looks. That's what style sheets are for. I don't know of anyone who uses the default styles as-is (left-aligned, boldface, slightly bigger h1-h2-h3, absurdly small h5-h6). For example my boilerplace CSS-- the part I slap in place before I even get to the details-- says

h1, h2, h3, h4, h5, h6 {text-align: center;
font-style: normal; font-weight: normal;
padding: 0; margin: 1em 0; line-height: 1.2;}

And then you get into the details of font-size and exact margins for each heading type. You might even use something like {display: run-in} if you want something that's structurally a header but you don't want it to stand out at all.

[piatkow]

As a novice webmaster I had a site slapped by G because I used an h2 or 3 instead of h1 because it gave the display that I wanted.

Then I discovered CSS, used a styled h1 and got the page up to number 1 for the sites main search terms.

[gouri]

Lucy,

You need to separate two things: semantics/structure, and presentation. First separate them in your mind ;) and then you can separate them in the code.

That's good advice. Let me try to approach it that way.

The stuff you're calling h4 is more important than the stuff you're calling h2. It's closer to h1 in the hierarchy. The stuff you're calling h2 is less important than the the stuff you're calling h4. It's further down the hierarchy.

Heading numbers are concepts: h1 is more important than h2 is more important than h3 and so on down. Matter of fact, where is h3 in all this?

What I have in the h2 tags are more important than what I have in the h4 tags. I am showing this on the site by making the text in the h2 tags larger than the text in the h4 tags. Can I do this or should I use the span tag instead of the h4 tags even if the text in the h2 tags is larger?

I didn't use the h3 because I think that the h2 and h3 tags are used to indicate sections of a page. Chapter 1 and a link to another page on the site, I felt, aren't sections so I thought that I should use an h4. Is it okay to do this?

[drhowarddrfine]

Headings are not used to indicate importance. Headings are titles for sections and ALL headings, h1-h6, are the beginnings of sections. If you want to emphasize importance, that's what <em> is for.

[phranque]

The global structure of an HTML document:
http://www.w3.org/TR/html401/struct/global.html [w3.org]

http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements

...

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

[piatkow]

@drhowarddrfine what Lucy means is that the numbers indicate the RELATIVE importance of the different titles.

[lucy24]

I guess what I should have said is: The text after the headings. The headings themselves are just labels showing a position in a hierarchy.

Now, if the heading text itself is important, then you need to stop and ask whether it's actually a heading at all. Or are you just labeling it <h2> so you don't have to go in and define something like

p.super-duper-really-amazingly-important {font-size: 200%; font-weight: bold; margin: 2em 0 1em; letter-spacing: .1em; padding: .5em; border: 2px solid red;}

(improvising here :) )

[drhowarddrfine]

And @lucy24 said exactly what I mean.