valid html header

Question

Is there any way to write a valid header/link/image? Something like

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

(with an image set as background and the text moved way to the left so its not visible via css)

Answer 1

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.

Answer 2

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.