What to do when you have a Logo and Company Name

For my last project, I implemented the “Gilder-Levin Method” which has text wrapped in an < H1 > tag, but then uses CSS to cover this text up with a logo. (The benefit being that sighted users see a logo, but non-sighted users and search engines see your H1 text.)

I really like that approach, but for my latest project, there is a gotcha…

For this new client, he wants his Logo plus his Company Name and Address in the header.

So how should I handle this as far as semantics and layout go?

1.) I assume the Company Name is the < H1 >, but what about the Address and Tele #?

2.) What do I do with the Logo now?

3.) Can I still use the “Gilder-Levin” approach?

I was envisioning that the Logo would be to the far left, and then adjacent to it would either be the Company Name/Address/Tele # on 3 separate lines, or possibly all on one line.

Thanks.

I think using H1 for logo isn’t good idea.
H1 should be used for page title.
If you use it in logo that means all your pages have the same title?

1 Like

Personally, I don’t want to debate the H1 thing, but suffice it to say that it has been debated on SitePoint and the Internet in the past, and I think having your Company Name be the H1 makes more sense. (Not everyone agrees.)

Besides, the H1 and the < title > are independent…

Thoughts on my questions?

Personally, I don’t want to debate the H1 thing, but suffice it to say that it has been debated on SitePoint and the Internet in the past , and I think having your Company Name be the H1 makes more sense. (Not everyone agrees.)

Please supply a link to the discussion?

Besides, the H1 and the < title > are independent…

This may confuse crawlers and impose a penalty whereby your site will not be indexed.

Thoughts on my questions?

An actual screen-dump, wire-frame or mockup would be useful otherwise it is difficult and virtually impossible to pass any thoughts.

I’ve found a couple, but they’re quite old:

3 Likes

@TechnoBear

The threads you listed were not started by @mikey_w

To avoid confusion I think it would be best to await the requested links :wink:

1 Like

This is true, but the original quote said

[quote=“mikey_w, post:3, topic:117683”]
suffice it to say that it has been debated on SitePoint and the Internet in the past
[/quote]and didn’t mention usernames. I was just trying to be helpful. However, as you say, it would be more helpful for mikey_w to link to the relevant topic(s).

2 Likes

Unless I’m missing something, this seems fairly obvious. Your title goes in the “h1”, the addrees and phone go within “address” tags, the logo as an “img”. You can use an explicit alt attribute and file name to indicate the img is the company logo.
If you really want to spell it out to the crawlers, use structured data to say what the company is, where it is (address) and that the image is the logo.
For the record, IMO use only one “h1” on a page, that’s why we have h2, h3, etc…
Have “h1” unique on each page, it identifies the page, not the site and should relate to the “title” tag.
This does beg the question of how to make the company name something prominant, you would think there would be some kind of html tag for that, like a global title for the site, but I’m not aware of such a thing. For that reason structured data should be considered for the benefit of crawlers, and visual styling and placement for human visitors.

Yes that thread was one that I already had bookmarked as deathshadow made some compelling arguments for using the h1 as the company name/logo.

When dealing with company websites I often find that the most important thing to the company is their company name. Most people know of a company name and search based on that company name so it should be the most important thing on the page. Of course people also search based on product which is why most company names carry a tagline which can be incorporated onto the company name.

e.g.
“Company Name - the best “insert product here” you can get.”

If the site is not a ‘company site’ then the ‘site name or logo’ is not really as important and its the content that is more important.

I would include that as a background image to the Company name text.

No need for image replacement techniques if you are using text for the company name.

That would be a separate element.

There is strong debate about using address tags for company addresses as the address tag is meant to be the address of the ‘maintainer of the document’. This may not be the same as the address of the company you are displaying and should not be used for any old address. (I think this is another area where the html authors have tried to be too clever and an address really should be a simple container for an address.)

1 Like

I actually read the above linked thread now.

Yes, some good points, but I’m not 100% convinced.

This is more where I’m coming from. Yes I made a site with the organization name in big letters across the top of every page. But really that’s just branding, it’s function is to say, although maybe rather loudly and proudly, “Hey, we created this content! Recognise and remember us.”. But then it’s the content that you are actually interested in, and the content is not necessarily about us, it is in fact about <h1>This</h1>; and there we have a very relavant, meaningful and unique h1 element on one of our unique pages which accurately describes the content of the page.
To try this idea, I have looked at a few sites, and played “find the h1”. Looking at both selly sites and info sites, the content title seems to be winning over logo/org-name. Though I suppose, just cos everyone’s doing it, doesn’t necessarily mean its right, but I was looking at some big, well known sites, and this one.

The whole address thing is a strange one.
The way I interpreted the use of address was, for example, if you had a page with reviews for restaraunts, and you have a review for “Jack’s Steak House” at such-a-steet, such-a-town, and the “The Star of India” at some other address. Then you don’t use address tags on those addresses.
But then you have your “Contact Us” page with your contact details, there you do use address tags. Having the address in the title bar with the logo I would think was a similar case, though I may be inclined to consider putting it in the footer instead.
Is that right?

That’s more or less what I assumed and I would go along with that.

I believe there may be a semantic distinction between a “document maintainer” and a ‘site owner’ but that may be be that these things were originally defined long before we started messing things up :wink:

I may be chiming in a little late but maybe this will help.

Answering your Qs first:

1.) NO MATER what you don’t want that info with a header. So table the idea for a moment.

2.) This is an aestethic consideration

3.) of course.

Additionally, I would not make the logo dependent on being inside an H1 tag. HTML5, for example allows multiple H1, but prior versions do not. In either case, consideration for what goes in an H1 ( or any other tag) should be purely semantic. For the rest of the expiation I will focus only on HTLM4 and below.

Avoid breaking the sequence of the Hxs; that no matter how tempting don’t ever do: h2…h3…h3…h1… etc, always have your headings in order: h1 …h2…h3…h3… h2…h3…h4…h2… etc

One pattern I follow is making a .logo{} class I can then apply my styles to any tag as needed. I usually use <h1 class="logo"> Company Name</h1> for the home and/or about us pages and <div class="logo"> Company Name</div> for the rest

I probably would structure my code as follows:

    <div class="mast">
         <div class="logo"><a href="homepage.com"> Company Name</a></div>
          <address> 
                 <a href="tel:18475555555" role="phone">1-234-555-1234</a>
                 <span>234 some Street. </br> City, State </span>
      </address>
</div>

style as desired.

I am being loose by putting the phone number within the address tag, but as this is technically " contact info for the owner of the site it should squeak by semantically. You may hear that the address tag is typically used in the footer, but then again this information typically goes in the footer too. :wink:

[quote=“TechnoBear, post:7, topic:117683”]
This is true, but the original quote said

@TechnoBear and @John_Betong,

I don’t rememberl where I read things - it was a long long time ago - but here is what I recall…

Some people think the H1 should just be the topic of the current web page (e.g. “Review of Must-Have Camping Gear”) whereas other people think that your company (e.g. “Paul’s Outdoor World”) should be the H1 since everything ultimately ties back to the business.

I tend to agree with the second approach, because I think everything should tie back to your company brand.

This has been debated online, though, and my goal is just to figure out how to do the markup properly, and not debate if something should be an H1 or H2 or whatever. :smile:

Sam, I am using HTML4, so there wouldn’t be an < address > tag as far as I know…

Yes, there would:

http://www.w3.org/TR/html4/index/elements.html

(According to the SitePoint Reference, it’'s been around since HTML2.)

Mikey, the address tag is part of HTML4 as well.

I tend to agree with the second approach, because I think everything should tie back to your company brand.

try think of it from SEO point of view. People don’t search for a brand they search for some sort of “topic” by using an H1 related to the page topic you give importance to the topic over the brand which means that a search engine will, for example index that page higher up when searching for that page’s topic. Make sense?

1 Like

Looking at other site’s view-source can be enlightening. For example, the “h” tags for this page are

<h2>
   <a href="/t/what-to-do-when-you-have-a-logo-and-company-name/117683">What to do when you have a Logo and Company Name</a>
</h2>

<h2>Welcome to The SitePoint Forums.<\/h2>
<h3>Some helpful posts to read.<\/h3>
<h3>More help and feedback<\/h3>

That’s what I was doing when I mentioned playing “find the h1”. Interesting that this page does not have one. On the sitepoint homepage its <h1>Sharing Our Passion for Building Incredible Internet Things</h1> the logo is an img in a div with a class, that’s what I found on many sites.
But I’m not going to argue about h1 as page name Vs company name. Opinions are clearly divided and possibly both could be correct in their individual circumstances, depending on what is more important to your site, branding or content.
Like I said to begin with, <h1> with whatever title you think most important, <img> for the logo with descrptive alt text, add if you wish markup to say “Yes, this is the logo for this company” for the belt and braces approach. And if you want the address up there also, do so, using the <address> tags if available in your html version and aplicable to the rules of semantics in this case, if not, wrap it in any suitably styled span or div and don’t sweat about it, you could add structured markup to spell out the meaning of the address if you desire.

From a SEO point of view, try searching for this thread title.

Google returned the result with a highlighted title followed by a link to the site, then a first post snippet.

Opening the link showed this thread which i believe is what a user would expect?

I agree.

Can you explain what you mean?

I was going to have a header like one of these two samples…

(Less desired)

(Preferred)

So I believe either of those would translate to…

<img src='' alt='' />
<h1>ACME Company</h1>
<???>123 Main Street, Anytown, USA (808) 555-1212</???>