Jump to content

Need good articles on how and why to use Headers (h1 - h6) correctly


shelfimage

Recommended Posts

Allow me to poll opinions on something that is related to this subject.

 

Should the site's logo be wrapped in a H1? Or, a P, or nothing at all? What do you think is most effective for SEO and semantics? I'm starting to think that nothing at all is better, but I'd like to hear other thoughts before I standardize my (new) approach of this. I've seen situations where the logo is in a H2 or H3 before an H1 appears on a page which is incorrect inmho.

Link to comment
Share on other sites

Allow me to poll opinions on something that is related to this subject.

 

Should the site's logo be wrapped in a H1? Or, a P, or nothing at all? What do you think is most effective for SEO and semantics? I'm starting to think that nothing at all is better, but I'd like to hear other thoughts before I standardize my (new) approach of this. I've seen situations where the logo is in a H2 or H3 before an H1 appears on a page which is incorrect inmho.

 

I didn't realize there was a debate about this. I just thought that it was right to wrap the logo in an h1 and have been doing so on my sites. Hmmm... I look forward to hearing more about this.

Link to comment
Share on other sites

The logo should be just that...a logo. For Google, Yahoo, etc. they will not care. The

tag can define the business name and a short page title and the h1 should be used for the page's content title.<p> </p> <p>I don't use </p> <p>, <span>, <h1>, etc. for the logo. I only use a div. The logo will not serve any purpose beyond what it was intended to do. Wrapping a <h1> tag around the logo will only limit your ability to one heading for all pages unless you use a h2 or another h1 but we all know that using two h1 in incorrect and I think some search engines penalize you for inproper use.</h1> </h1></span></p>
Link to comment
Share on other sites

I thought the 2 benefits of wrapping the logo in an h1 were these:

 

1. If someone has images disabled, they will still see an emphasized title of the site.

 

2. Having the name of the business in the h1 increases optimization.

 

Apparently I was taught wrong (and I learned it all right here at KS)? :/

Link to comment
Share on other sites

Should the site's logo be wrapped in a H1?

Hard to say, I think this debate is still going on.

I looked now how big standards guys go about and saw that some of them use

to display logo ( Maxdesign, Andy Clark,Bereastreet), giving the alt description or the link title , the others use h1 further in the content ( Hicksdesign, Molly) as a title for each page.

I think if you promote your brand, you use your logo as h1, if your product ( or web content) is advertised, use

to title every page.

Link to comment
Share on other sites

I thought I have written on that?

 

Anyways, it is based on Logic, 1 comes before, 1 is more important than 6... So there is no logical reason to do it out of order.

 

The W3C states that you may start in the middle... say H3, however all following headers must be H4, H5 and H6. You are not to jump around.

 

It is also worth noting that headers are the fastest and most used way for screen reader users to surf web sites. They can literally Tab through the headers to get quickly between interesting sections. So by not using headers, or using them wrong, it can break one of the most useful tools vision impaired users have.

 

As for the H1/banner/logo question. It has been argued and no real victor as far as I know, but the vast majority of developers seem to choose H1 for the content of that page.

 

Basically H1 Stands for the Most important part of the page, the highest root level. Some feel that is the site itself, so logically for them, H1 is the banner, site title whatever.

 

I believe in the book idea. I know what book I am reading aka what site I am on. So if the title of the book is on every page it makes no difference to me other than it is wasting space. 5,000 page titles could shorten a book bay pages if a sentence of content were there instead. So for me the only real importance is the chapter title, that suggests what the chapter is about and breaks up the book into readable chunks. (Imagine war and piece with not chapter breaks. :o)

 

So for the site the most important item for me is the page title, the header that tells me what the page is about, if it holds the info I look for. So logical to me is that the page title be H1, each H1 different for each page, then that broken into chunks. I see no fundamental use to the user having the same H1 (page banner/logo) as an H1, it is not the most important thing on the page for user or search engine... it makes the site look like every page is the same and I think would hurt SEO. The Logo or banner is just that and image identifying the web site/company. The Alt attribute will tell us the same without the image... so it is a waste of H1 power. H1 should highlight to the search engine and user just what THAT page is about... not what the whole site is about. The whole site is about widgets... THIS PAGE is about BLUE widgets.

 

I believe one should never use H1 for site identification outside the index page.

Link to comment
Share on other sites

At this time there is no right or wrong per say, just majority. I believe when I read up on it that the W3C seemed to lean towards content as H1, but that may be my take on it since I feel that way.

 

I did forget my reminder that we build web sites for People, not machines. Priority should go to making the site better and more useable for the people and not search engines. decisions should always default to what is best for the user.

Link to comment
Share on other sites

I agree almost entirely with LSW; blind people won't see the logo or banner so they will have the alt tag and the h1 should be for the page title.

 

HOWEVER, just suppose the site designer is designing different pages for cameras, TVs and computers and he has a logo on each page showing an image and text in the image showing cameras, TVs and computers which forms the page title and there is no other page title, then I would put that in an h1.

Link to comment
Share on other sites

I was wondering what is the best way to use headers.

This is a good question. I have no clear answer but already had a thought on that.

 

Some people use h1 for their logo image across all pages and use it a 2nd time for the page topic.

I have problem with that because the two h1 don't have the same level. The title of the whole site (here written on a picture) should contains the title of the page; they are not two distinct things. The title of the page is part of the site, not something on its own.

 

Other websites might use h1 for the logo on the main page only. On all other pages h1 will belong to the name of the page topic.

I would agree with that if a website was a "linear media". But it's not. You may arrive on any page of the site with a search engine and so you'll miss the main title.

 

Or maybe some might use h1 for the logo on each page and then h2 once for the topic of each page.But then the h1 will be the same on each page and I doubt that is good?

Why so ? Is it a position in search engines issue? If yes I think indexing should not disturb the logical structure of a page. If there is an other reason I'd like to hear about it.

 

So which of these do you think is best?

I choose, actually, the last one but It could change ;)

 

Logos which are images should not be inside an

they should be implemented as a background image on the body or a

or

.

If there is an information on that logo it has to be in the html with the alt attribute correctly filed up. If this information was a text and that I would write it with an h1, the image has also its place in an h1.

Link to comment
Share on other sites

HOWEVER, just suppose the site designer is designing different pages for cameras, TVs and computers and he has a logo on each page showing an image and text in the image showing cameras, TVs and computers which forms the page title and there is no other page title, then I would put that in an h1.

 

Well, then it is in fact acting as a header and that is fine. If it is just the company Logo... than it falls back on my post above. It will still have the alt text either way and hopefully that will include that it is for Photography etc.

 

Of course there are always exceptions to rules... and there may be a web site who's design goes against the norm so you make the needed changes.

 

Logos which are images should not be inside an

they should be implemented as a background image on the body or a

or

.

I believe the logo/banner should always be an image, that way you have the alt attribute to ID the site. If it is a background, there may be no way to ID the site if you pop up in the middle with a screen reader. The background is for unimportant design features. But as stated, not in a H1.

 

Or maybe some might use h1 for the logo on each page and then h2 once for the topic of each page.But then the h1 will be the same on each page and I doubt that is good?

Why so ? Is it a position in search engines issue? If yes I think indexing should not disturb the logical structure of a page. If there is an other reason I'd like to hear about it.

As far as indexing goes I mentioned it above. The H1 is one of the most important parts in SEO and it is wasted if the H1 is Killersites on every page. What the site is is of little SEO interest, it is covered/indexed in the Alt attribute of the banner/logo. The H1 should describe what that page is about and every page should have a H1 to do just that. This makes it logical for the human... "Oh! So this page is about Blue Widgets! Just what I wanted... so where are the middle sized blue widgets?" At which time they scan down the H2 tags to find it.

 

One description you missed is Navigation. Some developers believe that the Navigation is important and may use an H1. I never agreed with this, but that is personal preference. You can have multiple H1 in theory... but that for me defeats the semantics of having the H1 be the most important thing on the page... the page title and that representing the content.

 

You could for instance use H2 for the Navigation... but is the navigation really a sub section of the content, I don't believe so.

 

Then there are sections of sub navigation, if you have new nav links that directly represent the content of that page... lots of info about how special only blue widgets are, then it can be argued that it is a subsection of the content as no other page links to that page (except the site map). So that as an H2 may be fitting.

 

What if for instance your navigation has sections. You have your basic pages... about us, home etc., then you have different widget pages, but then you have videos about widgets, then you have documentation about widgets... all this in the global navigation. Then it would be correct and logical to box these, maybe have a H1 for the navigation as a hole and H2s for each subsection of the navigation... multimedia, support documentation etc., That is a case where multiple H1s could be acceptable, one for the Navigation and one for the content. But if the content is just your basic Nav bar... I would not use a H1 for it.

Link to comment
Share on other sites

I'd vote against using heading tags for the Logo or the navigation.

Headings should deal with the page content, IMHO. Logo's and Nav links are not content relative to the page on the web. Sure, I put them on the pages, but rarely print them, and definitely don't use heading tags for them.

Link to comment
Share on other sites

I started using H1 to wrap logos a couple years ago if they contained relevant and significant text that describes the page/site. My thought was this is good for accessibility and search engines because it clearly defines the role of the company name and tagline.

 

As I continue reading about search engine likes/dislikes, Google would rather have ONE H1 per page. So, I am switching gears and instead of using H1, I may use a to wrap it and I make image replacement possible regardless of the the logo's and text's container. An element is enough to perform image replacement. I believe the W3c recommendations suggest using one h1 too, although I don't recall a strict recommendation.

 

 

My initial question was a request for references for what I (and most of us here) already understand about header usage.

 

My second topic was a thought somewhat related to this because I've been changing how I approach Header tags and logos. And, I want to solidify my approach and pass it on to other folks I work with.

 

 

Sometimes as we develop sites we wear blinders because there is so much going on and going into the development of a site layout. Especially when working against deadlines. So, I do my best to question myself and love having this resource to read what other folks have to say too! :)

Link to comment
Share on other sites

Like I said, I had thought I had written on the subject. You may not want to use the thread if your trying to make a point but you can quote some of the things said here.

 

I checked my bookmarks and have nothing for Headers, just to basic I guess. All I can quote is the demonstration put on by a blind user showing how he speeds through (well built) web pages using header tags. But no articles and such.

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...