ansaurus

Question

valid html header

Answer 1

+5 A:

Something like:

<h1 id="logo"><a href="index.html">Company Name</a></h1>

#logo a {
    display: block;
    width: 200px; /* width and height equal to image size */
    height: 100px;
    background: transparent url(images/logo.png) no-repeat;
    text-indent:-9999px;
}

The problem with you original markup is that <a> is an inline element and <h1> is a block element. An inline element cannot contain a block element.

roryf 2009-05-08 12:47:14

hiding the text using css is a bad idea. why not use the an image and the alt attribute? (that's what it's for)

Adrian Mester 2009-06-24 12:59:38

Answer 2

+1 A:

That is invalid HTML code, but you can use CSS with the valid code to achieve what you want:

HTML

<h1 id="logo"><a href="index.html">Company name</a></h1>

CSS

h1 a:link, h1 a:visited {
  display: block;
}

You may further style the A element to achieve what you want.

Ionuț G. Stan 2009-05-08 12:47:33

You don’t need to address the status.

Gumbo 2009-05-08 13:00:42

@Gumbo, I believe it's an instinct that I have due to some IE 6 bug, don't remember which though.

Ionuț G. Stan 2009-05-08 13:13:18

Answer 3

+1 A:

This is valid and i think achieves what you are looking for, i.e. the entire Image is a link to the home page.

<a href="index.html"><img src="logo.png" id="logo" alt="Company Name" /></a>

If all you do is wrap the H1 tag in your example, then the link is only clickable around the text. This will exclude the margin of the H1 tag.

This doesn't require CSS to hide text, as the Company name is in the ALT attribute, which is read by Google and screen readers.

Another Way:

If you actually need an image as a background and text in the foreground there is another way about it:

<body>
   <div id="header"> 
      <h1>Some Text Here</h1>
   </div>

   <div id="main-content">
       ... lots of content here ...
   </div>
 </body>

CSS:

#header { 
    height: 55px;   // The height of you image
    width: 780px;   // The width of the image
    background: url(picture.png);
    margin: 0 auto; // To keep this div centered 
}

#header h1 {
    font-family: 'Times New Roman';
    text-decoration: bold;
    margin-left: 55px;  // This makes the text come in 55px from 
                        // the left of the containing div. Adjust to suit.
    margin-top: 10px;   // Same as above.
}

This is a useful method if you want to change the text often. A quotes of the day type thing or if your boss is always asking you to tweak the background image.

Seanchán 2009-05-08 12:58:37

Answer 4

+3 A:

No, anchor elements cannot contain h1 elements.

Also, background images should be reserved for backgrounds - a logo is not a background, it is important information.

<h1><a href="/"><img src="/images/logo.png" alt="Company Name"></a></h1>

Remember that, while the identity of the company is probably the most important heading on the homepage, it probably is not on other pages - so the should usually be downgraded to a elsewhere.

David Dorward 2009-05-08 12:59:36

Good point about not using <h1> on sub-pages. I think whether the logo should contain an <img> or not very much depends on the design in question though.

roryf 2009-05-08 13:01:57

how does img alt stand vs h1 in SEO?

doug 2009-05-08 13:14:21

AFAIK it doesn't make a difference, google would ignore the image and read the alt text anyway and it doesn't process CSS (I think...)

roryf 2009-05-08 14:28:21

I'm 99% sure that H1 ranks *much* better than img alt text. I'm very fond of using the replace-H1-with-an-image CSS 'trick' myself.

da5id 2009-05-12 01:16:01

ansaurus

tags:

views:

answers:

valid html header

related questions