Jump to content

Headline hierarchy


Ant

Recommended Posts

I was told here to keep my headings in order from h1-h6 etc to help with SEO. I have a page that I want to have an h1 and then immediately under an h2 headline, BUT under the h2 I would like to have an h1 again. Is there a problem with that? Most of the time DESIGN WISE I can keep to a uniform h1, h2 h3 hierarchy , however there are times i want to throw in a big headline under the smaller one.

 

Theres also some instances where some of my headings(text ) do not fall into h1-h6 categories. For instance I may have a headline thats h2 but it's a different color and italic. Should I make a class and add it to say an h2 heading or just give it a class with no p, or h tag denoted?

 

Thanks

Ant

Link to comment
Share on other sites

Yes, I think there is a problem with that. It's been debated often but the consensus is that the h1 heading should be for the page title, not the website title (except on the homepage) so if your website is for a town council and you have several pages for health, education, street maintenance, etc. each page would have h1 for health etc.

 

If you want to have larger type for a later heading, either code h2 or h3 with larger font-size or use a p tag with a larger font size.

h1 { font-size: 30px; }
h2 { font-size: 25px; }
h3 { font-size: 40px; }
p.large { font-size: 45px; }
HTML
<h1>H1 heading</h1>
<h2>H2 heading</h2>
<h3>H3 heading in larger font-size</h3>
<p class="large">Largest paragraph font</p>

 

I have a website where I used a h1 tag with large font-size for the page title but I wanted the website title still to appear over the top of it so I used a p tag set above the h1. A search engine will still latch onto the h1 tag for SEO purposes.

 

There's no reason why you can't have class or id for h tags so that they can be styled differently on different pages. h1#type1 {...} h1#type2 {...} etc. but only use each h tag once on a page.

Edited by Wickham
Link to comment
Share on other sites

Wickham thanks for the breakdown, I understand.

 

One question: What's the difference between page title and website title.

 

It's this part from your post:

 

"Yes, I think there is a problem with that. It's been debated often but the consensus is that the h1 heading should be for the page title, not the website title (except on the homepage) so if your website is for a town council and you have several pages for health, education, street maintenance, etc. each page would have h1 for health etc."

Link to comment
Share on other sites

Correct. The website title/page title -- at least in my particular context above -- has nothing to do with the <title> element. You can't obviously put a <h> tag within your <title> element.

 

In many cases, the <title> element will contain both the page title and the website title -- for example: "<title>About Me - Ben's Portfolio Website</title>"

Link to comment
Share on other sites

ok, got it.

 

So if for some reason I had my sites NAME on each page(not sure why I would want that)

it's best if it is NOT an h1 heading, but rather a p tag. The page title, i.e. about us, contact us etc is better being an h1 tag.

 

 

Thanks

Ant

Link to comment
Share on other sites

So if for some reason I had my sites NAME on each page(not sure why I would want that)

Think of it this way -- most sites have a logo of some sort which usually indicates the site name.

 

it's best if it is NOT an h1 heading, but rather a p tag. The page title, i.e. about us, contact us etc is better being an h1 tag.

Correct.

Link to comment
Share on other sites

... etc. but only use each h tag once on a page.

Can we debate this? It doesn't make sense to me for any tag other than H1 and possibly 2 - but - looking for example at a report to compare, we have the report title <h1> only once, several main sections <h2>s (a few of them) and each has sub-sections <h3>s.

 

Why should I not have more than one sub-header on a web page?

Link to comment
Share on other sites

Can we debate this? It doesn't make sense to me for any tag other than H1 and possibly 2 - but - looking for example at a report to compare, we have the report title <h1> only once, several main sections <h2>s (a few of them) and each has sub-sections <h3>s.

Wickham may need to clarify... I personally try to use the <h1> only once per page, but the rest I may use multiple times depending on the situation.

Link to comment
Share on other sites

Yes, I wasn't thinking because I often use h2 h3 etc for sub-headings many times on a page but only have one h1 heading (so Google doesn't get confused with more than one h1. The h1 seems to be more important to Google than h2, h3 etc.).

 

Re Ant's query, If your website is for Wiltshire Council that would probably be in the h1 tag on the home page but for other pages for Eduction, Health, etc. the h1 would be for Health on one page, Education on another, etc. If you want to show Wiltshire Council on other pages, use a p tag or a logo.

Link to comment
Share on other sites

Lots of sites have a logo image that has the website name in it, so it's an alternative to a h1 tag.

 

So then the homepage might have the logo and also h1 with a full website name while other pages have the logo with the website name and h1 tag for the heading describing the content on that page.

Link to comment
Share on other sites

Lots of sites have a logo image that has the website name in it, so it's an alternative to a h1 tag.

 

So then the homepage might have the logo and also h1 with a full website name while other pages have the logo with the website name and h1 tag for the heading describing the content on that page.

 

 

 

Got it,thanks wick.

 

Ant

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...