h1, h2, etc tags on images?

J

jrbryner

[H]ard|Gawd
Joined
Feb 6, 2001
Messages
1,530
Hey, just trying to see if this is proper or not. Is it okay to wrap image tags with header tags, like an h1 tag? The reason being is tha that the image is a title of a section, or a page, and if images are turned off the browser will still render the header tag on the alt tag.

But then again a header tag I think should denote text contained inside it, so I don't know if that method is quite right. Wanted to get some thoughts on it.
 
No, its not proper, but it is okay to have an image for the background of an h1, h2, etc.


What people usually do is this:

html markup
--------------------
Code: 
<h1>Heading</h1>


css
------------------
Code: 
h1 {
     width: 250px;
     height: 100px;
     background: url("images/heading.jpg") no-repeat;
     text-indent: -9999px;
}
 
HAX! but what if someone has a 10,000 pixel wide monitor? seems like cheating to me.... but i don't have any better suggestion so we'll just leave it at that for the moment ;)
 
That has the same effect as:
Code: 
   h1 {
   	 width: 250px;
   	 height: 100px;
   	 background: url("images/heading.jpg") no-repeat;
   }
   
   <h1><span style="display: none;">test</span>&nbsp;</h1>

I think that feels a little bit less like a hack than the previous suggestion.

The problem with both methods is that any browser that honors the CSS will display nothing if images are turned off. The first example because the browser will still render the text off of the screen, and the second, because it just doesn't render at all.

Both methods would work for browsers with CSS disabled however, although that's not what you were looking for.
 
Code: 
h1 {
   	 width: 250px;
   	 height: 100px;
   	 background: url("images/heading.jpg") no-repeat;
   }
<h1><span style="display: none;">test</span>&nbsp;</h1>

-----------------------
   
h1 {
     width: 250px;
     height: 100px;
     background: url("images/heading.jpg") no-repeat;
     text-indent: -9999px;
}

what if the user disables images (but not the stylesheet) ? neither of these methods will work correctly.
 
Well, either way. If CSS is disabled or the browser isn't CSS capable, just want to do it the correct way. I like that 2nd one a bit better. Would something like the following work/be correct?
Code: 
    h1 {
    	 width: 250px;
    	 height: 100px;
    	 background: url("images/heading.jpg") no-repeat;
    }
    h1 b {
          display: none;
    }
    <h1><b>Title</b></h1>
 
here's what i use
Code: 
h1
{
	padding: 0;
	margin: 0;
	height: 20px;
	font: bold 1.3em georgia, sans-serif;
	background: transparent url(/IMAGES/img.jpg) 50% 50% no-repeat; /* fancy-schmancy image to replace ugly default text */
	color: #000;
}

h1 span
{
	/* Works in Mozilla and IE 5.0, 5.6, 6.0, Opera 7+ not sure about other browsers */
	position: relative;
	display: block;
	color: #000;
	padding: 10px 0; /* position default text to be in the same position as the background image text */
	z-index: -1; /* then move it behind the background image */
}

<h1><span>The Title</span></h1>
 
Hartlove said:
That has the same effect as:
Code: 
   h1 {
   	 width: 250px;
   	 height: 100px;
   	 background: url("images/heading.jpg") no-repeat;
   }
   
   <h1><span style="display: none;">test</span>&nbsp;</h1>

I think that feels a little bit less like a hack than the previous suggestion.

The problem with both methods is that any browser that honors the CSS will display nothing if images are turned off. The first example because the browser will still render the text off of the screen, and the second, because it just doesn't render at all.

Both methods would work for browsers with CSS disabled however, although that's not what you were looking for.
Click to expand...

That is not any less a hack IMO, not to mention extra meaningless markup and it doesnt work for most screen readers.

You're right about both methods flaw though, that is image-replacements downfall.
 
Persoanlly, for webpages I'd go with the OP's:

Code: 
  <h1><img alt="" /></h1>

It's not a hack, will display what you want if css and/or images is disabled. All the other suggestions account for situations that a webpage may not make use of while sacrificing too much in it's use on the web.

If this wasn't used for the web then yes, you'd probably want to avoid using an image as a header in the first place.

--KK
 
KingKaeru said:
Persoanlly, for webpages I'd go with the OP's:

Code: 
  <h1><img alt="" /></h1>

It's not a hack, will display what you want if css and/or images is disabled. All the other suggestions account for situations that a webpage may not make use of while sacrificing too much in it's use on the web.

If this wasn't used for the web then yes, you'd probably want to avoid using an image as a header in the first place.

--KK
Click to expand...
If images are disabled or you are using a text based browser that will display nothing, hardly accessible.
 
jizzypop said:
If images are disabled or you are using a text based browser that will display nothing, hardly accessible.
Click to expand...

How is that? On text based browsers, the alt text in the img tag will display so you do not lose accessibility in that situation.

edit: I just tested it in two different text based browsers and it shows fine....

--KK
 
KingKaeru said:
How is that? On text based browsers, the alt text in the img tag will display so you do not lose accessibility in that situation.

edit: I just tested it in two different text based browsers and it shows fine....

--KK
Click to expand...
You're right, I'm not sure what I was thinking.

I think its just bad semantically to use just images.
 
Well that's good news. I'm gonna stick with that solution for now then. I've tried about all the suggestions though. maw's worked pretty well, but it did a couple screwy things with some positioning (because of my CSS, not because of his solution), and I didn't want to go too far off course to fix it. The javascript replacement worked okay, but required more scripting than I want to put in there.

I guess I'll stick with the <h1><img> for now, I already have the rest of the sections templated that way anyhow.

Site in development is http://asi.interactive-id.com/, images/tags in question are the top image at the very top, and the section titles in the middle boxes.

I'm going for most accesible without losing the integrity of the design here.

Thanks for the discussion.
 
Looks good overall - just one note :

Most ppl have come to expect, on a page with a large logo/banner at the top, the large logo/banner to be a link, generally to the top of the site.
 
You must log in or register to reply here.
Back
Top