RE: [WSG] Image markup clarification

[Paul Bennett]

Happy New Year to you too Robin!

You may want to look at CSS image replacement:

http://www.google.com/search?q=css+image+replacement

Personally, I've had good experience with the very simple:



Paul 



From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of 
Robin @ Xplore.net
Sent: Tuesday, January 09, 2007 8:23 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] Image markup clarification



Happy New Year Group,

 

Could someone please clarify for me the best way to markup an image in a 
template, take a header image for example. In the interest of keeping structure 
from content I have recently been using background images wherever possible to 
keep my markup as clean as possible but I have been reading an article on the 
importance of the alt text for SEO.

Is there a definitive answer?

I want the best search engine rankings but I also want clean markup.

 

Robin 

 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*** 
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*** 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[Brian Cummiskey]

Robin @ Xplore.net wrote:


Happy New Year Group,

 

Could someone please clarify for me the best way to markup an image in 
a template, take a header image for example. In the interest of 
keeping structure from content I have recently been using background 
images wherever possible to keep my markup as clean as possible but I 
have been reading an article on the importance of the alt text for SEO.


Is there a definitive answer?

I want the best search engine rankings but I also want clean markup.


Robin, there is no definitive answer, but there are many 
image-replacement techniques.



http://www.mezzoblue.com/tests/revised-image-replacement/
http://www.mikeindustries.com/blog/archive/2004/08/sifr


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[David Dorward]

On Tue, Jan 09, 2007 at 08:23:18AM +1300, Robin @ Xplore.net wrote:
>Could someone please clarify for me the best way to markup an image in
>a template, take a header image for example. In the interest of
>keeping structure from content I have recently been using background
>images wherever possible to keep my markup as clean as possible but I
>have been reading an article on the importance of the alt text for
>SEO.

Does the image convey information? Then it should be an  with alt
text.

Is the image purely presentational? Then its a toss-up between
background image and  with an empty alt attribute.

-- 
David Dorward  http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[Paul Novitski]

At 1/8/2007 11:23 AM, Robin @ Xplore.net wrote:
Could someone please clarify for me the best way to markup an image 
in a template, take a header image for example. In the interest of 
keeping structure from content I have recently been using background 
images wherever possible to keep my markup as clean as possible but 
I have been reading an article on the importance of the alt text for SEO.

Is there a definitive answer?
I want the best search engine rankings but I also want clean markup.



Background images, not being IMG elements, can't have ALT attributes, 
so that part's easy.  If you've decided that an image is truly decor 
and doesn't need to be a foreground image, it also doesn't need (and 
can't have) alt text.


Determining which images are decor and which are truly content can be 
difficult at times as there can be lots of grey area.  One could 
argue that if the image is not necessary to understanding the page 
content, it's decor.  It helps if you turn images off in your browser 
and see if the integrity of the page suffers as a result.


The correct markup will depend on whether you're using HTML or 
XHTML.  For XHTML it's:




Other attributes are available; see:

HTML 4.01 Specification
13 Objects, Images, and Applets
13.2 Including an image: the IMG element
http://www.w3.org/TR/html4/struct/objects.html#edef-IMG

Regards,
Paul 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[John S. Britsios]

Robin,

since you are using background images, I assume that the images are 
meaningless, and only for decoration reasons.


Therefore you do not need alt attributes there. It is true that alt 
attributes are a little piece of the search engines algorithms,
which can boost a bit your rankings, but they are not there for stuffing 
with keywords.


And for the minimal boosting, it is not worth to spoil your clean code. 
That is a fact!


Work on more important on-site and off-site factors for achieving higher 
rankings.


The golden rule in SEO is: Optimize for engines, with humans in mind!

Best,

John

--
John S. Britsios
Web Architect & Business Consultant

Webnauts Net & SEO Workers (Main Office)
Koblenzer Str. 37A
D-33613 Bielefeld

Webnauts Net & SEO Workers (U.S. Office)
5 Ivanhoe Drive
Urbana IL 61802

http://www.webnauts.net
http://www.seoworkers.com




Robin @ Xplore.net wrote:


Happy New Year Group,

 

Could someone please clarify for me the best way to markup an image in 
a template, take a header image for example. In the interest of 
keeping structure from content I have recently been using background 
images wherever possible to keep my markup as clean as possible but I 
have been reading an article on the importance of the alt text for SEO.


Is there a definitive answer?

I want the best search engine rankings but I also want clean markup.

 


**Robin **

 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*** 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] Image markup clarification

[Robin @ Xplore.net]

Thank you for your reply's to this post, and your interesting comments.

 

That has now given me some clarity on the subject.

 

I hadn't thought about the actual content of he image as having information
before and therefore being part of the structure.

 

Again Excellent

 

Thank you.

 

 

 

 

Robin Gorry

Senior Web Developer

Xplore Net Solutions 

d:  00 64 (0)6 834 24 84

f:  00 64 (0)6 834 24 86

e :   [EMAIL PROTECTED] 

w: www.xplore.net   

 

Take control of your website - ask me today about Xsite-tomorrows Content
Management System

CONFIDENTIALITY: This e-mail and any attachments are confidential and may
also be privileged. 
If you are not the named recipient, please notify the sender immediately and
do not disclose the contents to another person, use it for any purpose, or
store or copy the information in any medium.

  _  

From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED]
On Behalf Of Robin @ Xplore.net
Sent: Tuesday, 9 January 2007 8:23 a.m.
To: wsg@webstandardsgroup.org
Subject: [WSG] Image markup clarification

 

Happy New Year Group,

 

Could someone please clarify for me the best way to markup an image in a
template, take a header image for example. In the interest of keeping
structure from content I have recently been using background images wherever
possible to keep my markup as clean as possible but I have been reading an
article on the importance of the alt text for SEO.

Is there a definitive answer?

I want the best search engine rankings but I also want clean markup.

 

Robin 

 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*** 
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[Barney Carroll]

Paul Bennett wrote:

Personally, I've had good experience with the very simple:



Paul 


I'm in two minds over this technique - on the one hand the image has 
meaning, and therefore should be part of the markup; on the other hand 
this might feel a bit bloated for some, since there are not two objects' 
worth of meaning there - I use this:


HTML:
Page title

CSS:
h1
{
display: block;
width: 200px;
height: 100px;
background-image: url(pagetitle.gif)
font-size: 1px;
font-size: 0;
color: [background-colour];
}

This is slightly messy because many browsers (IE and WebKit for 
starters) don't recognise "font-size:0" as valid, so I have to make what 
might be considered an ugly compromise by giving that text the illusion 
of invisibility with their minimum font-size and a specific color.


However I can see how this is too much of an unstable compromise for 
most people. There is a halfway house I've seen done gracefully which 
still has two elements but keeps plain old h1 text:


HTML:
Page title

CSS:
h1 div
{
width: 200px;
height: 100px;
background-image: url(pagetitle.gif)
}

At the end of the day it's a question of semantic aesthetics. I can 
easily see many people far preferring Paul's unambiguous and predictably 
rendered system, but I've also met a few people who for reasons as vague 
as mine simply aren't happy enough to have an image contain that amount 
of meaning.


Regards,
Barney


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[David Dorward]

On Tue, Jan 09, 2007 at 10:13:00AM +, Barney Carroll wrote:
> h1
> {
> display: block;
> width: 200px;
> height: 100px;
> background-image: url(pagetitle.gif)
> font-size: 1px;
> font-size: 0;
> color: [background-colour];
> }

Problems include:

* Users with images turned off see nothing
* Most browsers have a Minimum Font Size these days

-- 
David Dorward  http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[John Faulds]

Page title


hx tags can't contain block level elements. You should use an inline  
element like a span instead.



--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[Barney Carroll]

David Dorward wrote:

* Users with images turned off see nothing


This is a difficult one. I have a FF extension that disables flash by 
default (mostly to avoid downloading, seeing and hearing awful adverts), 
and in doing so I am resigned to occasionally seeing the site in ways 
the designer did not intend. I grumble at a lot of stuff, but when this 
deprives me of content and/or the rest of the site refers to things I 
don't understand, I blame only myself.


People who disable images fit into the same box as those people who 
attach !important to their custom stylesheets... They are aware that 
they are depriving themselves of the designer's intention. This 
philosophy can't be taken too far, but within reason I believe that, 
quite literally, we cannot cater for people who deliberately chose to 
turn off content.


For what it's worth, the instance I use this in has h1 as the site title 
and h2 as the section title - these things are already, to an extent, 
implicit, and hence not absolutely crucial to the viewer. Because I'm so 
used to developing sites with CMS, the page title and all crucial 
subordinate information cannot have this treatment. For example, I have 
objections to CSS zen garden in the way it has many sub-headings as images.



* Most browsers have a Minimum Font Size these days


That's what the colour and 'font-size:1px' properties are about. 
Granted, the text may still be visible. At least Firefox loves me back :).


--
Barney Carroll
Text Matters

Information design: we help explain things using
language | design | systems | process improvement
___
phone +44 (0)118 918 2382  email [EMAIL PROTECTED]
web http://www.textmatters.com


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[David Dorward]

On Tue, Jan 09, 2007 at 10:53:07AM +, Barney Carroll wrote:
> >* Users with images turned off see nothing
 
> This is a difficult one. I have a FF extension that disables flash by 
> default (mostly to avoid downloading, seeing and hearing awful adverts), 
> and in doing so I am resigned to occasionally seeing the site in ways 
> the designer did not intend. I grumble at a lot of stuff, but when this 
> deprives me of content and/or the rest of the site refers to things I 
> don't understand, I blame only myself.

Hopefully the extension allows access to the alternative content that
HTML allows to be provided. So while you might not get the same design
as the author intended, the content is still available (except in
certain special cases, such as games).
 
> People who disable images fit into the same box as those people who 
> attach !important to their custom stylesheets... They are aware that 
> they are depriving themselves of the designer's intention. 

... but still get the alt text, so they should still get the content
(except for certain special cases such as photo galleries).

HTML comes with built in methods of providing alternative content for
pretty much everything that isn't text. There's no need to try to turn
the concept upside down and have text replaced with other content
using CSS - it doesn't work as well.

-- 
David Dorward  http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[Barney Carroll]

David Dorward wrote:

HTML comes with built in methods of providing alternative content for
pretty much everything that isn't text. There's no need to try to turn
the concept upside down and have text replaced with other content
using CSS - it doesn't work as well.


If anything, I'm suggesting markup content that's 'stronger' than alt 
tags. Removing significant text content is not my game at all.


> What does being a graphic designer have to do with not using the
> mechanism built into HTML to provide graphical content with an
> accessible, text-based fallback, but instead using CSS to create a
> similar, but less accessible, effect?

I think there's been a horrible misunderstanding somewhere. I don't 
think anybody in this conversation has made any false moves as regards 
accessibility.


I am talking about visual content defined by CSS that isn't in the scope 
of s, yet may need alternative text content for those without 
visual reference... Which can be handled in a great many ways, and could 
be handled in many more (CSS is constantly evolving, I'm not suggesting 
anything's being coldly ignored by the powers that be). 'Images' is a 
very limited way to address many visual semantics a designer may wish to 
incorporate into a site, and occasionally those semantics may be 
arguably crucial rather than additional - in which case some clever use 
of markup/styling is needed.


As much as this sounds like dodgy territory, I don't think the practical 
examples I suggested way back in the thread (unorthodox styling in 
headers) caused that much of a problem (apart from the invalid  
within ). If they did, please refer back to them (all observations 
are useful!) - but I fear we're getting rather vague and argumentative here.


Regards,
Barney


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Image markup clarification

[David Dorward]

On Tue, Jan 09, 2007 at 12:59:18PM +, Barney Carroll wrote:

> If anything, I'm suggesting markup content that's 'stronger' than alt 
> tags. Removing significant text content is not my game at all.

I can't see any suggestion in the specification that so much as
suggests alt text has any less weight than regular text.
 
> I think there's been a horrible misunderstanding somewhere. I don't 
> think anybody in this conversation has made any false moves as regards 
> accessibility.

Pretty much every image replacement technique has accessibility
problems, most often in the scope of Images Off/CSS On situations, but
often in others as well.
 
> I am talking about visual content defined by CSS that isn't in the scope 
> of s, yet may need alternative text content for those without 
> visual reference... Which can be handled in a great many ways, and could 
> be handled in many more (CSS is constantly evolving, I'm not suggesting 
> anything's being coldly ignored by the powers that be). 'Images' is a 
> very limited way to address many visual semantics a designer may wish to 
> incorporate into a site, and occasionally those semantics may be 
> arguably crucial rather than additional - in which case some clever use 
> of markup/styling is needed.

The thread started with discussion of a header image, and the focus
has been very much on how to include images, so I think if we are
going to expand the discussion beyond that then we need to clearly
identify what is being discussed. I'm afraid that I'm having a hard
time coming up with examples.

> As much as this sounds like dodgy territory, I don't think the
> practical examples I suggested way back in the thread (unorthodox
> styling in headers) caused that much of a problem (apart from the
> invalid  within ). If they did, please refer back to them
> (all observations are useful!) - but I fear we're getting rather
> vague and argumentative here.

As I think I mentioned at the time, they have a number of drawbacks
that cause some users to get either no content, or visible text
overlapping the image. Those drawbacks don't appear when using an img
element with alt text (since that is what alt text is designed for).


-- 
David Dorward  http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***