There are a few browsers (Firefox, Opera) that treat image alt text as if it were normal text on the page, when the image isn’t present. If the reader turns images off to save bandwidth, we can still visually treat the images by styling the alt text, and this could be especially handy in regards to site logos.
For example, while working on Rollyo, I marked up the site’s logo with an <h1> element:
<h1><img src="img/logo.gif" alt="ROLLYO" /></h1>
I don’t pledge allegiance to any specific markup convention for site logos, but with images turned off, you can see that Firefox treats the alt text “ROLLYO” as a level 1 heading (Figure 1).
- Figure 1
This is a nice way of keeping the visual hierarchy of things consistent, even in the absence of images. And yes, this does rely on the browser’s own built-in stylesheet, which customarily displays headings large and bold.
If you don’t agree with wrapping a site’s logo in a heading element (and I often go back and forth), then there’s another approach. Just add a few font styles for whatever element your logo happens to be sitting in (provided there is no other text in there as well).
For example, if it’s sitting in a <div>, as it is here on SimpleBits:
<div id="logo"><img src="img/logo.gif" alt="SimpleBits" /></div>
Then adding a few CSS rules to that specific element would do the trick (Figure 2):
#logo {
font-size: 130%;
font-weight: bold;
}
- Figure 2
When the image is there, no harm done. When the image isn’t there, then the alt text will be larger and bold, thus keeping a visual heirarchy consistent. At present, this will work in Firefox and Opera (AFAIK). But it’s really just a tiny little enhancement.
Related: See also this previous SimpleQuiz discussion regarding site and page titles.
Dribbble What are you working on? 
Instapaper Icon design 
Sass For Web Designers Paperback + eBook A Book Apart
CSS3 For Web Designers Paperback + eBook A Book Apart
Bulletproof Web Design Third Edition New Riders 
Handcrafted CSS Book and DVD New Riders 
Web Standards Solutions Special Edition Friends of Ed
48 Comments
That is quite nice, thanks for showing us. I’m definitely going to try that in future sites.
Just curious, but why wouldn’t you wrap the site logo in a header element? To me it makes more sense to use an h1 than a div with a id. Its less markup and it degrades nicer (with the browsers default styles).
I’ve never given much thought to this subject, but what you said makes complete sense. I’ll definitely keep this in mind.
Sorry to double post, but am I missing something or is there no feed for comments on articles? I like being able to keep up to date to response to my comments through my feed reader (Waggr).
I do that a lot.
For anyone trying this at home, remember to remove any margin or padding from the h1, or funny things will happen.
Another good practice is that the logo links back to the site home, so we’d have:
<h1><a href=”/”><img … /></a><</h1>
Why not just use the header as an image? You can do the same thing with an h1 with “rollyo” in it, then use CSS to move/hide the text and put in a background image of the logo. It saves you some markup, and you never have to change the markup if you need to change the logo.
Dan, those are both nice options, but why don’t you replace the logo with a CSS image-replacement technique? Is it just a matter of preference, or do you have a reason for not using IR?
On the Free the Slaves site, I’ve marked up the logo with a paragraph tag and replaced it using Phark image replacement. I could arguably be better off with an H-element for the logo, but do you think an img is the better choice?
Is there any reason for the wrapper div instead of applying the styles to the image directly?
Aside from being a block element, I mean.
Is there any reason at all why one could not write CSS like:
img.logo { font: 120%/1.4 Zapfino, cursive; }
?
Regarding Image Replacement: for site logos, I often want them coded in the page as an
<img />. For printing, or when CSS is disabled or unsupported, the logo remains. It depends on the importance of the logo I suppose — whether there’s a distinct mark, etc.There are also other reasons to avoid IR of course, but I don’t want to split this thread off onto another path. Be sure to read up on the pitfalls of the current techniques.
Joe, I tried your suggestion, and here are the results:
1. In Safari, no alt text is displayed.
2. In Firefox, I got your expected result.
3. In IE, I got the regular red X and “unstyled” alt text.
@Joe – I don’t see any reason why that wouldn’t be OK. I happen to have a
<div>available, but applying aclassoridto the image itself should (I think) theoretically accomplish the same goal (with less markup!).@Kevin – Like I said, only Firefox and Opera appear to treat alt text in this manner. So we’re only catering to those folks here. Thanks for checking.
Building on what Joe said:
img.logo[alt] { ...rules... }I didn’t know Firefox or Opera did that. That’s good to know.
Seems like it would be a logical step for browsers to take, but only two do it. I guess everyone else assumes images always load!
I’ve always marked up images (especially text-as-image) this way, even back when I was using tables. My feeling was that it’s more semantic, and I hoped that it would make a difference — if not in browsers, then at least in screen readers.
It’s funny, I noticed the same behaviour in Firefox just the other day. Definately a good feature.
Oooh, cool – I’ve been doing something that Dan’s only just mentioned! I’ve been doing that for a year or so, but as the effect never worked in IE I used the attribute selector: #logo[alt] which works as well.
This was an interesting read. Thanks Dan. I never knew that Opera and firefox would actually apply formatting to the ALT text. I can probably use this on upcoming projects.
Wouldn’t it better if we had the following
XHTML:
<h1><span>NOMINOC</span></h1>CSS:
h1 {padding: 0; margin: 0; display: block; background: transparent url(img/logo.png) no-repeat 0 0;}
h1 span {display: none;}
I know that Google and other search engines love header tags, and I am not sure if they take in IMG Alt attribute as the text within tags.
@Tom: That is how I like to do it, usually with a width/height rule also though.
Chris: Oops. yea. :)
@Tom – I’m not sure how search engines treat alt text, either. But as mentioned earlier, any IR technique has it’s pitfalls, and I wasn’t aiming to debate for or against image replacement here — just pointing out that if you are using an image-based logo, then there are a couple of browsers that will display its alt text nicely.
Dan,
I usually take the same approach with using heading tags. It seems like the best way to do it from a semantic point of view.
Then, of course, it’s that ever-going debate if a logo is presentation or content. Using an image (within header tags or styled directly for proper
altpresentation) is more fool-proof than image replacement techniques. But now I’m drifting off-topic, sorry…Is there any recommendation saying how the
altshould be presented? As plain text or as a broken image?Thanks for the great article.
I’ll definitely be using it in my sites from now on.
FWIW, this is actually the way
altwas always supposed to work. It is an “alternative”, ie something that can serve as a true stand-in for the image when the image is missing. That’s why 99% of the images on the should havealt=""– people who put a description or caption there are mistaken, that sort of thing goes intitle.I realise that you’re trying to achieve something different semantically by using a H1, but an alternative with no additional mark-up is to set a font size on the image in this manner:
img#logo {
font: normal 130px arial;
}
I’ve tested this in Mozilla and Opera with good results. Opera has a few quirks unless you set a height and width on the image. IE remains oblivious to the whole concept, of course.
Not an improvement, but just another approach.
Just like the site name: SimpleBits.. who would’ve thought! :)
@Robert – I’ve never heard of this debate for the logo being content or not. It seems only logical that the logo is content. Could you possibly point me the direction of this discussion? I’m really interesting in this debate.
@Sean #2
One very good reason for not using <h1> for logos is that search engines look to see if the <h1> text is relevant to the page content and especially the <title>. If you ever use a tool like WebCEO or some other Search Engine Optimization (SEO) tool, the first thing it’ll warn you about is the descrepency between the document <title> and the <h1>. My own site doesn’t follow these rules b/c I wasn’t aware of it when I built it.
Another approach that seems to work ok is placing the logo text inside <big> tags. The BIG tag can be styled, and is both semantic and helpful when CSS is turned off.
Just my 3 cents. Nice post Dan.
@Shaun,
Calling it the ever-going debate was maybe an overstatement! :-)
Dan, sorry for going a bit OT here: I had a post and discussion about image replacement in my blog: Is image replacement really worth it? where it came up.
The W3C recommends that the h1 be the same as the title. I interpret this to mean that both should refer to the title of the document, not the site.
If I’m not mistaken I think Digital Web Magazine uses this technique for their logo. That was where I first saw it in actions when I was digging around their HTML & CSS etc :o) They wrap theirs around a <h1> element, which is a better option, no? If CSS is off along with images the logo/site name will still be obvious as it will render using browser’s default <h1> settings.
I know that Google and other search engines love header tags, and I am not sure if they take in IMG Alt attribute as the text within tags.
No one knows the inner working of Google, but their image search seems to rely heavily on ALT attributes, and since alt attributes have been around forever, and serve a very real purpose, I see no reason to not just wrap the inline image in H1 tags.
@Tom & Chris Jones: If you hide the span inside h1 with display:none, it won’t be heard by people using screenreaders (see skip-nav-discussion) and they’re left with an ‘empty’ header, isn’t it?
Maybe something like:
h1 span {
position: absolute;
font-size: 0;
left: -1000px;
}
would be better? Makes sense?
The search engine will definitely look at the
altattribute of an image. Usually, thealtattribute is the image’s name when you search for that name.In Opera, when images are hidden, there is a border around the image which looks awfully displeasing.
@oemebamo:
This technique has a drawback : if you turn off images, but leave css on, nothing will display…
Jacob Patton, regarding your comment.. correct me if i’m wrong, but when i go to the freetheslaves site, with images turned off, i do not see a logo.. anywhere.
Dan: You wrote that “At present, this will work in Firefox and Opera (AFAIK)”. Should this be interpreted to mean that you don’t test with Opera? If that’s the case, you really should, especially now that it’s free.
@Joen – Nope, I meant “those are the only two browsers that I know support styling alt text”. We also know it doesn’t work in Safari, and all flavors of IE. Testing in Opera is how I discovered that it’s supported there ;-) And that’s great news that it’s now free.
Dan: Thanks for clearing that up.
I have been reading your blog for a couple of years now, but never left a comment until now. So while I’m at it, I’d just like to say keep up the good work!
Dan, that is quite an interesting find that you found there :)
I quite like the mozilla.org approach… A negative text-indent that displays the H1 tag when styles are disabled.
Yeah, I’ve always preferred this method to image replacement. Works with images off and CSS on. Keeps the logo in the printed version. Closer to the XHTML 2.0 way of doing things (i.e. <h1 src=”img.jpg”>)
I wasn’t sure about it, because one time (haven’t been able to find it online since) Dave Shea made a comment suggesting that <h1><img> was somehow distasteful, though I don’t think he said why. But I’ve never figured out what’s wrong with it.
Firstly, on semantics. Logo (or header as a whole) on the webpage is nothing more than a running title (titre de colonne in French, Kolumnentitel in German, колонтитул in Russian)) and should be treated as such. End of story. For those who is in armored vehicle—no h# tags. ;)
As for the styling of “alt” text, I was concerned about it few years back, cause I always wanted to control it. Since I used mostly Opera in the past 4-5 years I didn’t really bother about IE, although I think minimally it actually does style some of it if I remember right. I need to check on it.
Considering this does not work in Safari, I guess image replacement would be a better choice (at least for now).
I’m wondering whether removing the alt text and putting it next to the img tag would be a good idea. The image could be put in front of the text, hiding it when images are enabled. (I’m aware that similar image replacement techniques exist, but as far as I know none of these use img tags… correct me if I’m wrong.)
Aristotle:
Very often, is abused. People heard that there should be an alt and they put
alt=""in every image tag. It is especially true for the code generated by image host. There’s numerous time the images fail to load (when there are too many on the same page) and I cannot right-click > show image in firefox since there’s no way for me to select it!“If it’s content, please put something in the alt.” I really want to say so to those guys, before I realize the code on the discussion board are not written by the poster…
For those who don’t know (and those who do), IE displays ALT text as a tool-tip if you hover over the image with your mouse. This seems to be another one of Microsoft’s brilliant ideas to conquer the WWWorld.
Anyhow, FF and Opera are on the right track when it comes to ALT text – it guarantees that the user will never be left “stranded”. It also seems more practical that way – plus, it makes [most] people happy.
And besides, your HTML pages won’t validate if you don’t include ALT in every IMG tag.
It’d be interesting to know if the search engines would consider an alt text within H1 tags to be equivalent to headlines. I guess it wouldn’t hurt to put the tags around the img tag. Your post is very interesting by the way, Dan. It would never have crossed my mind if I never read it here.
Very often, is abused. People heard that there should be an alt and they put alt=”" in every image tag. It is especially true for the code generated by image host. There’s numerous time the images fail to load (when there are too many on the same page) and I cannot right-click > show image in firefox since there’s no way for me to select it!
Css is wrong