What is the best method to code a logo with slogan in a header?

Question

Which method is best?

<div id="header">
 <a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
    <h1>slogan of company</h1>
</div>

<div id="header">
 <a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
    <p>slogan of company</p>
</div>

<div id="header">
 <a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
    <span>slogan of company</span>
</div>

<div id="header">
   <div id="logo">
     <a href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
        slogan of company
   </div>
</div>

Answer 1

The slogan is probably subject to some design rules (e.g. the position relative to the logo). As the slogan probably makes little sense in a content / SEO way anyway, and it's more important it looks right, I would recommend putting the slogan into the image.

Answer 2

Looks good, apart from the fact that a slogan isn't really a heading, hence a <span> or something without semantic meaning should be used instead of <h1>

Answer 3

I would think a better approach would be to have the slogan as a span. The slogan is not truly the first header of your document. Think if it were a table of contents would you see the slogan as the first entry?

Answer 4

In general, I think you'll see everyone's slogan as an image rather than text (with the text as the alt attribute). And href="#" means "go to the top of this page." It should probably be a link to the home page instead. ...As long as you use alt, search engines will index it properly. If this is the home page, that might justify having the name and slogan in h1 and h2 elements, but elsewhere it's probably not necessary. It's probably better to drive traffic based on the actual content of the page and not try to make every page the same in the eyes of search engine spiders. The company name is probably already in the url, which is plenty.

Answer 5

I guess not; It's better to do it like this:

<h1 onclick="document.location='/';"><span>CompanyName</span></h1>
<h2>Slogan here</h2>

Since your logo is part of the layout and not a image in context (for example a product picture) you should put it in the h1 background.

Do your CSS like this:

h1 {
 background-image: url(logo.png);
 width: 200px;
 height: 80px;
 cursor: pointer;
}

h1 span {
  display: none;
}

This way it is both readable for the and user and a search engine.

Answer 6

No, something like the following would be better:

<div id="header">
    <h1><a href="#" title="Company">Company</a></h1>
    <h2>Slogan</h2>
</div>

h1 { text-indent: -90000px; background: transparent url(/img/logo.png) no-repeat left top;  width: 172px; height: 80px; }
h1 a { display: block; width: 172px; height: 80px; }

The h1 is only used once, for the company itself. Then you replace that logo text with an image using CSS. This way you keep the markup within your CSS.