IMG REPLACEMENT

[aoeui]

you know it, classics
have text inside H1, image on background

CSS

text-indent: -9999px;

background: url('../img/logo.png') no-repeat;

width: 200px;

height: 100px;

what about
have H1 solo with ID and just shoot it out of the page at top
underneath have img in link solo ?

HTML

Krsiak.cz

+

CSS

#site-description {

position: absolute;

top: -9999px;

}

[wolfcry911]

what about it?

why not just

The alt text will be read by screenreaders, viewed by people with images off, and seen by crawlers as the h1 text. Whereas your method lists the site name twice.

[TheDoc]

First, I wouldn’t use the h1 for the company name on every page, I would use it for the title of the page that the user is currently on. If it’s the home page, then by all means use the h1 – but any other page should be using the h1 as the page title.

Now then, onto some code. For the sake of argument, I will use the h1.

HTML:

Company Name

CSS:

h1 #logo {

display: block;

width: ; /* width of logo */

height: ; /* height of logo */

text-indent: -9999px;

background: url('path/to/image.png') no-repeat;

}

[wolfcry911]

google themselves say its okay to use more than one h1 per page (but to be reasonable).

with images off the method fails (I realize its a minute percentage).

[chrisburton]

I think a lot of people get that assumption because of WordPress.

[chrisburton]

The site would have to load CSS anyway and the image within the html. Why not just use CSS to display it?

[chrisburton]

I’m not sure what you were saying then but I’ll answer your question along with adding my opinion.

“Firstly answer this: is a logo content or style?“
– I do believe it can be both without excluding the other.

“it is content and as such should be represented in your HTML correctly (using an img tag with the alt attribute)“
– Semantically (HTML only) speaking, I would agree. The correct way, I believe would be to render it in your stylesheet excluding it in HTML – slowing down page load.

[chrisburton]

I only like discussions like this when others are open minded, as you are.

Isn’t whatever in the -head- section rendered first? Therefore, if there is an inline image it would render after the stylesheet.

[Author]

Posts