CSS, images, and invisible <span> text

[Tristan Miller]

Greetings.

Occasionally I come across sites that use something like the following
combination of CSS and HTML:

h1 {
height:100px;
width: 500px;
background:url(welcome.gif) no-repeat;
}

h1 span {display:none;}

<h1><span>Welcome to my home page!</span></h1>

I'm a bit confused by this usage. What is the reason for doing it this way
rather than doing everything in HTML, as follows?

<h1><img src="welcome.gif" width="500" height="100" alt="Welcome to my home
page!" /></h1>

Is it because <img> is not allowed in headers? Regardless, where in the
(X)HTML specifications is it explained which tags are allowed to occur
within which other tags?

Regards,
Tristan

--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you

[David Dorward]

Tristan Miller wrote:

Greetings.

Occasionally I come across sites that use something like the following
combination of CSS and HTML:
<snip> Image Replacement Code </snip>
I'm a bit confused by this usage. What is the reason for doing it this
way rather than <snip>

.... using alt.

Some people believe that search engines give lower weight to alt text then
real text and are happy to make their sites less accessible to people who
browse with CSS enabled and images disabled.
--
David Dorward http://dorward.me.uk/

[Alan J. Flavell]

On Fri, 3 Oct 2003, Tristan Miller wrote:

[snip question already answered by David Dorward]

[f'ups narrowed as this part is specific to HTML]

Is it because <img> is not allowed in headers?
By no means: <img> most certainly _is_ legal in <h*> heading markups,
and if the image forms part of a heading certainly _should_ be put
there, for logical structure (even if many browsers will not care one
way or the other).
Regardless, where in the (X)HTML specifications is it explained
which tags are allowed to occur within which other tags?

Technically, that is determined by the DTD. If you don't feel up to
tackling that yet, then you'll find a useful reference format derived
from it (at least for HTML4), along with other useful matter at the
WDG, see e.g

E.g for your present question, start at
http://www.htmlhelp.com/reference/html40/
Go to http://www.htmlhelp.com/reference/html40/alist.html

From there choose e.g H1, you'll find it can contain "inline
elements". Click on the link to find what those are.

Conversely, choose IMG, and find what it may be contained in.

good luck

[jake]

In message <13*****************@ID-187157.news.dfncis.de>, Tristan
Miller <ps********@nothingisreal.com> writes

Greetings.

Occasionally I come across sites that use something like the following
combination of CSS and HTML:

h1 {
height:100px;
width: 500px;
background:url(welcome.gif) no-repeat;
}

h1 span {display:none;}

<h1><span>Welcome to my home page!</span></h1>

I'm a bit confused by this usage. What is the reason for doing it this way
rather than doing everything in HTML, as follows?

<h1><img src="welcome.gif" width="500" height="100" alt="Welcome to my home
page!" /></h1>

Is it because <img> is not allowed in headers? Regardless, where in the
(X)HTML specifications is it explained which tags are allowed to occur
within which other tags?

Regards,
Tristan

Read this:

http://www.stopdesign.com/also/articles/replace_text/

........... but be sure to read the last paragraph.

regards.
--
Jake

[Barry Pearson]

Alan J. Flavell wrote:
[snip]

By no means: <img> most certainly _is_ legal in <h*> heading markups,
and if the image forms part of a heading certainly _should_ be put
there, for logical structure (even if many browsers will not care one
way or the other).

[snip]

That helps to answer one of my problems. I'm not sure if it answers it all.

None of my photograph pages has a header. I've considered that the photograph
is logically the header - it sets the semantic context for what follows. The
images have alt text, which is what I would put in a header if I were to have
one. (And, perhaps incidentally, the page title is typically the same as the
alt text).

I'm currently updating my photograph pages via large-scale "find & replaces".
(I've just discovered that they validate as 4.01 Strict, so this is a very
easy way of turning 100s of my pages into DOCTYPE 4.01 Strict!) It would easy
to make the image element the sole content of an h1 element. Semantically I
think it makes sense. Syntactically it appears to be OK.

Is there a downside?

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/