How to mark up a Company Logo?

[DoubleDee]

On my Home Page I have decided to use "Image Replacement" and put my Company Name in an <h1> behind my Company Logo.

However, on all other pages, there will be an <h1> that is unique to that page.

For example, on a page with an article "Postage Meters can Save You Money!", that title will be the <h1>.

In cases where a web page has a clear <h1>, what should I do *semantically* with my Company Name and Company Logo?!

In the past, I just did this...

        <div id="logo">
          <a href="/index.php">
            <img src="/images/debbie_160x45.png" width="160" alt="Debbie" />
          </a>
        </div>

Because my Company Name and related things are in the <meta> tags on every page, maybe that is enough?

To me, CONTENT is the most important thing. And everything else - including Company Name/Logo/Tag Lines - is just "marketing mumbo-jumbo". (Then again, "Branding" is an important topic, and one you don't want to totally blow off?!)

So what is a good strategy?

BTW, I'm trying really hard to use proper semantics that would make someone like DeathShadow proud!! (Of course, that is a tall order!!)

Sincerely,


Debbie

[oddz]

Paragraph tag.

[deathshadow60]

It has a "clear" h1 alright, the logo; because if for example you have headings in your sidebar that are NOT subsections of the heading in your content area, they should ALL be h2. "Most important" in the heading order means significance STRUCTURALLY, not in terms of content relation -- which is where most people screw it up.

H1 is the topmost STRUCTURAL heading under which all other heading tags are the start of subsections. As such it should be the first heading on the page, and I often prefer to have it as the first content element.

Think of it like a newspaper -- on the front page you have the name of the paper, the CTA headine LARGER than any other text, and dozens of other headlines and section titles. STRUCTURALLY every headline and section title on the page are H2, regardless of what size they are being shown at... since they're all siblings to each-other on the page and subsections off... the paper itself (h1). On every subpage what's the first thing on the page? The name of the paper... it may be being presented in a smaller text, but it's still the H1 of every page.

K-12 Gets New Building
would not be a subsection of
Mayor Caught Taking Million Dollar Bribe
-- at least, we hope not... Their PRESENTATION might be different, but structurally they are both the same LEVEL heading.

Having your logo and/or site name as a h1 on some pages and not others is structurally inconsistent, more work/code server-side, and on the whole not only bad practice, IMHO it's semantically incorrect. Suck it up and use a h2 on what you seem to think are going to be your H1's because to be frank, they aren't... ESPECIALLY if you have other headings on the page which are not subsections of it... all you are doing at that point is breaking the structural layout.

Remember my saying "If you choose your tags based on their default appearance, you're choosing the wrong tags"? Append to that "If you are choosing them based on SEO..." -- which is the only reason to flip them around like that.

NOR are a couple of words or a obvious heading element a paragraph -- semantics does NOT mean just slapping paragraphs around anything that happens to have text inside it.

[DoubleDee]

It has a "clear" h1 alright, the logo; because if for example you have headings in your sidebar that are NOT subsections of the heading in your content area, they should ALL be h2. "Most important" in the heading order means significance STRUCTURALLY, not in terms of content relation -- which is where most people screw it up.

H1 is the topmost STRUCTURAL heading under which all other heading tags are the start of subsections. As such it should be the first heading on the page, and I often prefer to have it as the first content element.

Think of it like a newspaper -- on the front page you have the name of the paper, the CTA headine LARGER than any other text, and dozens of other headlines and section titles. STRUCTURALLY every headline and section title on the page are H2, regardless of what size they are being shown at... since they're all siblings to each-other on the page and subsections off... the paper itself (h1). On every subpage what's the first thing on the page? The name of the paper... it may be being presented in a smaller text, but it's still the H1 of every page.

K-12 Gets New Building
would not be a subsection of
Mayor Caught Taking Million Dollar Bribe
-- at least, we hope not... Their PRESENTATION might be different, but structurally they are both the same LEVEL heading.

Having your logo and/or site name as a h1 on some pages and not others is structurally inconsistent, more work/code server-side, and on the whole not only bad practice, IMHO it's semantically incorrect. Suck it up and use a h2 on what you seem to think are going to be your H1's because to be frank, they aren't... ESPECIALLY if you have other headings on the page which are not subsections of it... all you are doing at that point is breaking the structural layout.

Remember my saying "If you choose your tags based on their default appearance, you're choosing the wrong tags"? Append to that "If you are choosing them based on SEO..." -- which is the only reason to flip them around like that.

DEEP POST...

Well, you definitely rocked what I *thought* was the correct way of doing things - and what some other SitePoint smarties recommended. (Don't ask for names this time, because I don't remember, but it was some people I trust on here I'm sure?!)

It is hard to argue with a well-written (and polite) response.

I can still sorta see it the other way, but I think your arguments are pretty convincing.


(Now watch Debbie go blow a nice day...)


So, even if you are 110% correct semantically and all of that, "in the real world" what do Search Engines like Google think?

Because, let's be honest here, I'm not just attempting to build a quality website for the love of all-things-IT...

I am doing this to make some $$$, and as such, I want to do things which help people find my website and find my articles as quickly as possible, so that once they get there, they can see how much I have to offer.

Can I have it both ways?

Can I change my approach (again) and make "Double Dee, Inc." my <h1> on *all* pages and then make everything else (i.e. Column Headings, Article Titles, etc) <h2>'s and not get penalized by the Google's of the world??

NOR are a couple of words or a obvious heading element a paragraph -- semantics does NOT mean just slapping paragraphs around anything that happens to have text inside it.

So what is the correct way to handle those scenarios??

What do you do with something like this...

What is an
S-Corporation?
(Learn more here)

or something like this...

Hello. Log In to access premium content. Not a Member? Start Here

or something trickier like in an E-commerce Catalog like...

*Denotes Required

or

In Stock.

It is almost like they should have created a <phrase> tag in HTML 4?!

Sincerely,


Debbie

[oddz]

In my opinion any heading is not appropriate for a logo/site name because it is not actually a relevant part of page content. It is merely "decoration" and thus why I do not believe it plays any role in the actual hierarchy of the content. For that reason I feel that a paragraph tag is most appropriate.

[DoubleDee]

I like DeathShadow's response, but am curious what others think...

What do you think, Paul O'?

Stomme poes?


Debbie

[DoubleDee]

Some interesting comments on this topic from the web...

http://prandall.com/2009/02/06/the-h1-debate/

Accessibility

After looking into the subject of headings and accessibility, I came across a YouTube video by Aaron Cannon, and Accessibility Consultant who says:

All good screen readers offer a feature to jump from heading to heading. Assuming that headings are used properly on a website they can give an overview of what the author wanted to stand out. What were the important sections of the website.

http://uk.youtube.com/watch?v=AmUPhEVWu_E

With a screen reader, pressing the H key takes you to the first heading, and allows you to jump from headline to headline. This allows you to jump to the content and start reading. Using the same H1 would mean that a screen reader would read out the company name/logo every single time on each page. Is that useful? Is it the best use of an H1? Once maybe, but on every page, I can imagine it gets repetitive for the user.

Some more links...
http://developer.cmzmedia.com/?p=242

http://www.h1debate.com/

http://www.gravityswitch.com/blog/sh...-headline_104/


I liked what DeathShadow had to say, but it worries me about a Screen Reader saying "Double Dee, Inc." 10,000 times as a user navigates to new pages on my site.

I also worry that - right or wrong - sites like Google are more concerned that the heirarchy begins with the "content" (e.g. Article Title "Postage Meters can Save You Money" is the <h1>) versus "site structure" (e.g. "Double Dee, Inc." is the <h1>)

Where are you Paul O??

Others?



Debbie

[deathshadow60]

1) This is a REALLY old argument... coming down to do you cater to one small subset that doesn't obey the structural rules, or do you use HTML for what it's for?

2) I reallly feel you are worrying for nothing over search engines. The MINOR ranking difference between a h1 and a h2 is so small that unless you're polishing a turd -- aka a site that has no content of value, it means NOTHING. You have content of value semantically marked up, that people want and will share links to, minior details of what you put the h1 on means jack. Anyone telling you otherwise has been dipping too hard into the SEO kool-aid.

3) Again, much like a previous topic we discussed, you're talking about it like screen readers are the only thing to make use of it... forgetting data scrapers, keyboard navigation, other media types like print... If you are thinking about the behavior of a specific target device when choosing your tags, you're completely missing the point of HTML; device neutrality. Open up a site in Opera, go into preferences and turn on "single key shortcuts" (something that if you know what you're doing works in mini/mobile -- and is one of the reasons people use it).... Q/A now navigate you through anchors, W/S now navigate you between headings (and any child textnodes of those headings), and E/D navigate you through every element on the page.

4) In talking to people who use screen readers, they're actually a mixed bag on this. Usually the people who use screen readers WITH visual display (which I really don't get the point of) are the only ones who kvetch about it being read twice -- those who use JUST the screen reader like to have the site title read again when they arrive on a page or navigate it, so they know where they are and that they haven't been sent to some other website... besides, is hitting "H" again REALLY that hard to do?

5) The H1 as the 'most important' instead of the 'structurally most important' makes all the subheadings be total gibberish. The entire purpose of a heading tag is to mark the beginning of a subsection... the purpose of lower order (higher numbered) heading tags are to mark subsections of the higher order (lower numbered) tag preceding it. If all the h2 and lower order headings on the page are not subsections of what the H1 is declaring, you are using numbered heading tags wrong. PERIOD, end of story.

Which apparently is "so confusing" (Whiskey tango foxtrot) it's why HTML 5 with it's new structural rules pretty much says "shtup it, every one is too stupid to do anything but sleaze it out any old way"... Way to man up guys!

[DoubleDee]

1) This is a REALLY old argument...

But it's new to me. And being a "seeker of truth" I have to look at both sides of things and do my best to make an "informed" decision - which is sooo hard on the Internet!!

coming down to do you cater to one small subset that doesn't obey the structural rules, or do you use HTML for what it's for?

I like what you said, and I want to re-write my site to follow what you've recommended, DeathShadow, but from what I researched yesterday, I just fear being punished by the Google's of the world for doing the "right" thing?!

2) I reallly feel you are worrying for nothing over search engines. The MINOR ranking difference between a h1 and a h2 is so small that unless you're polishing a turd -- aka a site that has no content of value, it means NOTHING. You have content of value semantically marked up, that people want and will share links to, minior details of what you put the h1 on means jack. Anyone telling you otherwise has been dipping too hard into the SEO kool-aid.

Okay, that is what I would *hope* is the case.

Continue...

3) Again, much like a previous topic we discussed, you're talking about it like screen readers are the only thing to make use of it... forgetting data scrapers, keyboard navigation, other media types like print... If you are thinking about the behavior of a specific target device when choosing your tags, you're completely missing the point of HTML; device neutrality.

Okay, fair enough.

4) In talking to people who use screen readers, they're actually a mixed bag on this. Usually the people who use screen readers WITH visual display (which I really don't get the point of) are the only ones who kvetch about it being read twice -- those who use JUST the screen reader like to have the site title read again when they arrive on a page or navigate it, so they know where they are and that they haven't been sent to some other website... besides, is hitting "H" again REALLY that hard to do?

Just trying to be sensitive to those who use Screen Readers.

I did read something similar last night, in that, "What if someone comes to your website, but NOT through the Home Page?! If you use Logo/Company Name for your <h1>, then any point-of-entry will still let people know they are on "Double Dee, Inc.".

5) The H1 as the 'most important' instead of the 'structurally most important' makes all the subheadings be total gibberish. The entire purpose of a heading tag is to mark the beginning of a subsection... the purpose of lower order (higher numbered) heading tags are to mark subsections of the higher order (lower numbered) tag preceding it. If all the h2 and lower order headings on the page are not subsections of what the H1 is declaring, you are using numbered heading tags wrong. PERIOD, end of story.

I agree. And that is why I like your earlier pontification!

Which apparently is "so confusing" (Whiskey tango foxtrot)

Added a new form of sarcasm to the vocab, I see...

it's why HTML 5 with it's new structural rules pretty much says "shtup it, every one is too stupid to do anything but sleaze it out any old way"... Way to man up guys!

I agree.

Okay, so - unless I get some compelling argument today - I'm sold on what you've said about the "proper" way to use <h1>'s, and am going to re-tool my website. (And if I don't become a multi-millionaire in 2012, not only will I not share any $$$ with you, DeathShadow, I'll be darn mad at you!!!)

Hey, nobody ever said it was easy molding a "newb" into a superstar like you...

Thanks for enlightening me some more. (I really appreciate it!!)

Sincerely,


Debbie

[barrykins]

So use h1 for the logo?

Or not..

Wouldn't someone want to know that its the top element of every page (the company's name) if images and css are disabled?
Or is it a given that the name of the website it the most important. If so, what do you use to markup the logo?