473,325 Members | 2,671 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

CSS, images, and invisible <span> text

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
Jul 20 '05 #1
4 10407
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/
Jul 20 '05 #2
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

Jul 20 '05 #3
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
Jul 20 '05 #4
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/
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Alexander Ross | last post by:
I have an html snippet, and I want to remove any <span> tags that have a specific attribute (class=none) ex. The quick brown <span class="animal">fox</span> jumped <span...
4
by: Kerri | last post by:
Hi, I have a span as below. <span id="lblTest" style="color:#FF0033;font- weight:bold;">This is a test.</span> When the user clicks a checkbox I call below code to set my span text to...
13
by: Mikko Ohtamaa | last post by:
From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to...
5
by: Kathryn | last post by:
Good morning! I am having a problem with a span. I have items, of which I only want to show the first X characters on the screen. If the user prints the page, I want the entire item to print....
3
by: Tristan Miller | last post by:
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; }
18
by: Timothy Casey | last post by:
Thanks in advance... =~= Timothy Casey South Australia worloq@iprimus.com.au Formerly: casey@smart.net.au
9
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from...
2
by: xhe | last post by:
I met a very headache problem in javascript, I think this might be difference between IE and NS / Safari. I have a text area <form> <textarea name='tex1' onkeyup='displayit();'></textarea>...
0
by: =?Utf-8?B?RXRoYW4gU3RyYXVzcw==?= | last post by:
Hi, I have some methods which generate html formatting for text on the fly. I generally use <spantags and that works fine. But, I would like to be able to combine different formatting elements on...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.