alt and title attributes in IMG and A tags

**weegillis** · #1 (**permalink**) 06-15-2009, 03:54 PM

This page is set up for testing of mouse over effects on images and anchors containing (or not) alt and title attributes. Various configurations are tested, many of which are moot, but I threw them in, anyway.

I'm stunned by my findings, which puts a lot of my past (and recent) thinking out of skew. Now it will take a careful review of my work to see how it measures. Argh! More work!

Others are welcome to post their findings for browsers not tested here, which are many since I only tested on the most recent versions of IE, Opera, Firefox, Chrome and Safari (all on Windows XP machine).

The page is coded in HTML 4.01. Will the effects will be the same in XHMTL? Don't know. Will have to test.

Link: alt and title attributes in <IMG> and <A> tags

**weegillis** · #2 (**permalink**) 06-15-2009, 05:04 PM

Below is the shortened, "lite" version, with moot points and code samples redacted:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>alt and title attributes in &lt;IMG&gt; and &lt;A&gt; tags</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="language" content="en-CA">
<meta name="description" content="A web page to test mouse over effect on IMG and A tags with and without alternate text or title attributes">
<meta name="keywords" content="HTML,img tag,a tag,attributes,alt,title,browser test">
<meta name="author" content="RC Pierce">
<style type="text/css">
body {margin: 0; padding: 0; text-align: center; font-size: 100%; color: #000; background: #fff;}
h2 {font: bold 80% Verdana,Geneva,sans-serif;}
#content {width: 90%; margin: 0 auto; text-align: left;}
#content li {font: normal 80% Arial,Helvetica,sans-serif;}
img {vertical-align: middle; display: inline;}
img,
a img {border: none;}
#content li li {font-size: 100%;}
em,
code {font-family:Courier,serif;}
em {color: #600; background: #fff; margin-right: 0.5em;}
code {color: #060; background: #fff;}
li ul {margin-bottom: 1em;}
</style>

</head>
<body>
<div id="content">
<h1><em>alt</em> and <em>title</em> attributes in &lt;IMG&gt; and &lt;A&gt; tags</h1>

<h2>Stand alone image</h2>
<ol>
<li><img src="#" alt="ALT on &lt;IMG&gt;" width="120" height="60">
Tool tip in IE.<ul>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li>no <em>title</em> attribute</li>
</ul></li>
<li><img src="#" title="TITLE on &lt;IMG&gt;" width="120" height="60">
Tool tip in all browsers.<ul>
<li>no <em>alt</em> attribute</li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><img src="#" alt="" title="TITLE on &lt;IMG&gt;" width="120" height="60">
Tool tip in all browsers.<ul>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><img src="#" alt="ALT on &lt;IMG&gt;" title="" width="120" height="60">
No tool tip in IE due to empty title attribute.<ul>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><img src="#" alt="ALT on &lt;IMG&gt;" title="TITLE on &lt;IMG&gt;" width="120" height="60">
Title attribute in toop tip for all browsers.<ul>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
</ol>

<h2>Stand alone anchor</h2>
<ol>
<li><a href="#">&lt;A&gt; with no <em>title</em> attribute</a></li>
<li><a href="#" title="">&lt;A&gt; with empty <em>title</em> attribute</a></li>
<li><a href="#" title="TITLE on A">&lt;A&gt; with <em>title</em> attribute</a></li>
</ol>

<h2>Anchor wrapping an image</h2>
<ol>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li>no <em>title</em> attribute on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#"><img src="#" alt="ALT on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in IE.<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li>no <em>title</em> on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#"><img src="#" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em> on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#"><img src="#" alt="ALT on &lt;IMG&gt;" title="" width="120" height="60"></a>
Empty title on IMG overrides alt attribute: No tool tip (in IE).<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#"><img src="#" alt="" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#"><img src="#" alt="ALT on &lt;IMG&gt;" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li>no <em>title</em> attribute on &lt;A&gt;</li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" title="" width="120" height="60"></a>
The title on A is pre-empted by an empty title on IMG: No tool tip in IE or Opera.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#" title=""><img src="#" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in all browsers.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
Title on IMG in tool tip for all browsers.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li>no <em>alt</em> attribute on &lt;IMG&gt;</li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="" width="120" height="60"></a>
No tool tip in IE. Tool tip for all others.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;&quot;</em></li>
<li>no <em>title</em> attribute on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#" title=""><img src="#" alt="ALT on &lt;IMG&gt;" width="120" height="60"></a>
Tool tip in IE.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li>no <em>title</em> attribute on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="ALT on &lt;IMG&gt;" width="120" height="60"></a>
IE tool tip is alt text, others use title on A.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li>no <em>title</em> attribute on &lt;IMG&gt;</li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="" title="" width="120" height="60"></a>
No tool tip in IE or Opera. Tool tip in others.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#" title=""><img src="#" alt="ALT on &lt;IMG&gt;" title="" width="120" height="60"></a>
No tool tip in IE due to empty title attribute on IMG.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#" title=""><img src="#" alt="" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
All browsers show title on IMG in tool tip.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="ALT on &lt;IMG&gt;" title="" width="120" height="60"></a>
No tool tip in IE or Opera. Tool tip in others.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
All browsers show title on IMG in tool tip.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title=""><img src="#" alt="ALT on &lt;IMG&gt;" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
All browsers show title on IMG in tool tip.<ul>
<li><em>title=&quot;&quot; on &lt;A&gt;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
<li><a href="#" title="TITLE on &lt;A&gt;"><img src="#" alt="ALT on &lt;IMG&gt;" title="TITLE on &lt;IMG&gt;" width="120" height="60"></a>
All browsers show title on IMG in tool tip.<ul>
<li><em>title=&quot;TITLE on &lt;A&gt;&quot;</em></li>
<li><em>alt=&quot;ALT on &lt;IMG&gt;&quot;</em></li>
<li><em>title=&quot;TITLE on &lt;IMG&gt;&quot;</em></li>
</ul></li>
</ol>
</div>
</body>
</html>

Please do not post this code on a live domain.

mannequin-lady · #3 (**permalink**) 06-15-2009, 05:17 PM

Quote:

Originally Posted by weegillis

This page is set up for testing of mouse over effects on images and anchors containing (or not) alt and title attributes. Various configurations are tested, many of which are moot, but I threw them in, anyway.

Others are welcome to post their findings for browsers not tested here, which are many since I only tested on the most recent versions of IE, Opera, Firefox, Chrome and Safari (all on Windows XP machine).

Link: alt and title attributes in <IMG> and <A> tags

Did you mark which ones are moot? We opened up a can of worms, it seems.

I saved the page. Thank you. I guess you "volunteered" enough for a while!

mannequin-lady · #4 (**permalink**) 06-15-2009, 05:20 PM

I'm glad you did that because I was just about to ask for the code and no, I won't put it on a live domain.

Thanks very much!

mannequin-lady · #5 (**permalink**) 06-15-2009, 05:49 PM

weegillis, I removed the older test page from my domain and I'm studying the new code you provided. Also, I installed IE 8 on the secondary PC so I can compare the results, once I have some.

Since you've been so busy with this project, you may have missed this. I think everybody who I was trying to give credit to missed it, so here is what I posted in the reputation definition thread:

I have to provide reputation comments for twenty different people before I can give credit to the few who are actually helping me? That doesn't seem right.

I like giving credit where credit is due, such as to the following people:

weegillis, ctabuk, webnauts, deepsand, jordanMcClements, crankydave, tubby and rah.

Thank you to all of the above people for helping me with various elements of website design, Google AdSense, SEO and forum tips, among other topics.

Sincerely,

Steph

Reputation System Details

**weegillis** · #6 (**permalink**) 06-15-2009, 06:03 PM

Redacted are,

The first four in the top section of the full version

1 and 2, 4 and 6, 8 and 12, 16 and 20 in the bottom section

mannequin-lady · #7 (**permalink**) 06-15-2009, 06:07 PM

Quote:

Originally Posted by weegillis

Redacted are,

The first four in the top section of the full version

1 and 2, 4 and 6, 8 and 12, 16 and 20 in the bottom section

As long as I have the code you posted with the redactions retracted -

I should be all set.

Thanks again!
Steph

**weegillis** · #8 (**permalink**) 06-15-2009, 06:10 PM

You're welcome, Stephanie. I hope it proves useful to you and everyone else. it sure opened my eyes!

mannequin-lady · #9 (**permalink**) 06-15-2009, 06:20 PM

Quote:

Originally Posted by weegillis

You're welcome, Stephanie. I hope it proves useful to you and everyone else. it sure opened my eyes!

It's definitely useful to me. I'm going to start fresh with it tomorrow. It's been a long day.

It should help a lot of others, also. Maybe we (you) will "make a difference"! After all, the point of this topic is to improve website accessibility. (IMO)

Now, if only there was a program that would do automatic closed captions for videos. Maybe in the year 2025.

Have an excellent day!

Steph

**weegillis** · #10 (**permalink**) 06-16-2009, 01:51 PM

My conclusion?

Text for users in the title attribute of the image. Everyone sees this in all browsers. A short, meaningful description ought rightly repeat or paraphrase the more complete details that appear in the page, proximity being a possible factor. SEO quality would apply, just as any well formed and optimized copy in the page. Write a long caption, cut it in half and polish, and you'll be left with a nice bit of text for the title. Limit the length to meet with search engine guidelines.

Text for user agents in the alt attribute. As long as the title attribute is set and populated with text, alt text doesn't display in IE.

For SEO, it makes perfect sense to use a brief keyword packed phrase that is more than 12 characters long, but less than 25 (my numbers, requires more investigation). Only populate alt attributes with text for images that both relate to the page, and that you want to have indexed.

I'm only speculating, though one can reason that there would be a suitable ratio of text in content to text in attributes. It bears further investigation. Assuming 400 words in the body, how many would be reasonable in the attributes? Anybody?

As to title attributes on anchors, there exists the question, "What will the user see in the tool tip?" If the title attribute on the image is populated with text, nobody sees the title text on the anchor. If a title attribute on the image exists but is NULL, IE and Opera see nothing, while other browsers revert to the text in the title attribute of the anchor, if it exists.

From an SEO standpoint, it seems most appropriate to use the text from the TITLE element of the target page, assuming it has been optimized for search engines. Otherwise one might rip some choice words from the meta description or the body of that page; words that have been optimized for the referring page, as well, would make sense.

What the user sees if one uses the title attribute on the image is consistent across all browsers so I would reason that this is the best place to insert meaningful text that relates to the image, the page and the call to action implied in the outbound link.

What this all boils down to is that all three attributes appear to have a separate, distinct use, so I'm going to go with all three, placing the appropriate text in each, knowing that the user only sees one phrase in the tool tip, the title on the image.

mannequin-lady · #11 (**permalink**) 06-16-2009, 03:46 PM

Quote:

Originally Posted by weegillis

My conclusion?

Text for users in the title attribute of the image. Everyone sees this in all browsers. A short, meaningful description ought rightly repeat or paraphrase the more complete.

Text for user agents in the alt attribute. As long as the title attribute is set and populated with text, alt text doesn't display in IE.

For SEO ... Only populate alt attributes with text for images that both relate to the page, and that you want to have indexed.

From an SEO standpoint, it seems most appropriate to use the text from the TITLE element of the target page, assuming it has been optimized for search engines.

What the user sees if one uses the title attribute on the image is consistent across all browsers so I would reason that this is the best place to insert meaningful text that relates to the image, the page and the call to action implied in the outbound link.

What this all boils down to is that all three attributes appear to have a separate, distinct use, so I'm going to go with all three, placing the appropriate text in each, knowing that the user only sees one phrase in the tool tip, the title on the image.

I removed some of this so I wouldn't be repeating the whole thing, as educational as it is!

I need the conversation to relate to eCommerce sites, more than content based sites.

My sites are retail and depend on the photos, so that's what I have to focus on. I'll see if I can whittle down the code to the bare minimum for one of my product images and build it back up, using the code and tips you provided.

This is much appreciated,

Steph

mannequin-lady · #12 (**permalink**) 06-16-2009, 04:02 PM

I need a real life example. Can someone please enter the code for the pirate image on the below page, using the title tag, the anchor tag text (?) and the image tag?

Or using the correct code if I didn't paraphrase it correctly.

Ferocious Pirate Ship, Skull and Dagger Statue

Please?

Thank you,
Steph

**weegillis** · #13 (**permalink**) 06-16-2009, 07:45 PM

HTML Code:

<img
 border="0"
 ALT="collectible pirate ship skull pirate hat buccaneer statue figurine"
 src="collectible-knights-warriors-pirates/pirate-ship-skull-sword.jpg"
 width="416"
 height="311"
>

I broke it up so we could see all the attributes. The raw code should stay on one line to prevent page breakage (which may or may not happen depending on browser).

alt="looks good, except for repeated word "pirate."
(I recommend lower case on all tags and attributes just to get into a good habit.)

title="Three masted buccaneer ship with cloth sails and statue of pirate skull with cap and stainless steel knife"

Not really a suggestion, mind you. Just tried to piece something different from the text in the page.

mannequin-lady · #14 (**permalink**) 06-17-2009, 08:00 AM

Quote:

Originally Posted by weegillis

[html]
I broke it up so we could see all the attributes. The raw code should stay on one line to prevent page breakage (which may or may not happen depending on browser).

alt="looks good, except for repeated word "pirate."
(I recommend lower case on all tags and attributes just to get into a good habit.)

title="Three masted buccaneer ship with cloth sails and statue of pirate skull with cap and stainless steel knife"

Hi, weegillis,

I tried the code but something is wrong. Also, the help I need is with this men's gifts page, since it shows the thumbnails and titles that refer to the actual product pages.

We're still working with the pirate ship figurine.

I split it up for legibility:

<a href="pirate-ship-skull-dagger-scene.html" target="new">

title="Three masted buccaneer ship with cloth sails and statue of pirate skull with cap and stainless steel knife">

<img border="0" src="collectible-knights-warriors-pirates/knights-warriors-pirates-previews/pirate-ship-skull-sword-prev.jpg" width="146" height="106"></a>

Thank you,
Steph

**weegillis** · #15 (**permalink**) 06-17-2009, 01:50 PM

Link: HTML a target Attribute

You will see that target has only five possible values: _blank, _self, _parent, _top or a plain text name. Your site isn't a FRAMESET, so the last one is out.

The chief use of target is to do just that, target a window; that is, which FRAME in the set is to become the active window. Sites that don't use frames will typically employ the target="_blank" attribute to open a link in a new window. This is most common.

New windows can be confusing to users, and 'break the back button.' Something you may not wish to happen? Perhaps for the time being remove that attribute and stick to one active window.

HTML Code:

<a href="example.html" title="TITLE element from target page (or anything else)">
<img src="example.jpg" alt="text equivalent * " title="The tool tip text description for the user AND a call to action to indicate the link" width="146" height="106">
</a>

There is more about alternate text than meets the eye. Webnauts describes the accessibility concerns that alt was intended to help address. In my above posts I was leaning toward SEO use of alt, which is perhaps misleading. You'll understand better once you read the post below:

Thread: Use Alt Attributes with Care

There is such a thing as over-optimization, but then I wouldn't know anything about that. Accessibility concerns must come first, user experience second, and search engines last. Your framework and proper use of recommended tags and attributes will make the page accessible. The content and navigation will make the site usable. Optimization can go so far as to make it unusable, even while the search engines are having a ball.

Recommendation: Keep everything in balance for the sake of the end user.

* text equivalent - after reading Webnaut's post this should be clear.

Segue:
One thing is certain, if an image contains text, the exact text should be in the alt="text equivalent" attribute. Best way to avoid this? By not using images to convey text.

mannequin-lady · #16 (**permalink**) 06-17-2009, 08:14 PM

Quote:

Originally Posted by weegillis

Link: HTML a target Attribute

There is more about alternate text than meets the eye. Webnauts describes the accessibility concerns that alt was intended to help address.

Thread: Use Alt Attributes with Care

Yes, there's a LOT more to alternate text! The pages you're referring to are what I printed out and read over and over again and decided I needed an example to combine the ideas from both threads. Thank you very much for the html example.

Quote:

Originally Posted by weegillis

Accessibility concerns must come first, user experience second, and search engines last.

That sounds like the proper sequence to me!

Please take another look at the pirate scene to see the changed code.

This is the actual code in case you can't view the page the image is on:

HTML Code:

<img border="0" src="collectible-knights-warriors-pirates/knights-warriors-pirates-previews/pirate-ship-skull-sword-prev.jpg" [B]alt="pirate ship skull pirates hat buccaneer statue figurine"[/B] title="stone resin with cloth sails pirate ship buccaneer statue with a dagger, skull and hat. Buy it now, matey!" width="146" height="106">

and this is the text link for the pirate scene, underneath the image:

HTML Code:

<a href="pirate-ship-skull-dagger-scene.html">Pirate Scene with Buccaneer Statue</font></a>

Can the "alt" text be different from the "title" text or do they have to match? In other words, can I use the code as above, or am I supposed to use it as I edited it below?

HTML Code:

<img border="0" src="collectible-knights-warriors-pirates/knights-warriors-pirates-previews/pirate-ship-skull-sword-prev.jpg" [B]alt="stone resin with cloth sails pirate ship buccaneer statue with a dagger, skull and hat"[/B] title="stone resin with cloth sails pirate ship buccaneer statue with a dagger, skull and hat. Buy it now, matey!" width="146" height="106">

Thank you!!!

Steph

**weegillis** · #17 (**permalink**) 06-18-2009, 02:33 AM

Quote:

Originally Posted by mannequin-lady

Please take another look...

Impressive! I do believe you have hit the nail on the head. That is if what we've concluded here is actually on the right path. Looks like you think we are--your example is spot on.

Quote:

Originally Posted by mannequin-lady

Can the "alt" text be different from the "title" text or do they have to match?

Different schools of thought on this one and all persuasive...

Based on findings, alt is not meant to duplicate anything in the title attribute of the image or the link. It is meant to convey 'text equivalent,' within its most appropriate context, and can do so in any number of ways. If we stick to this usage of alternate text, it can be put to bed.

The real work is in the title attributes for the image and the anchor element, and, as you'll see in the code below, the link text. Your example code provides lots of variation while focusing on the alternate terms that may describe the same thing, and optimizing for those terms, obviously. It's a thought out and painstaking process, I can guess!

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Code snippet example</title>
<style type="text/css">
body {
 margin: 0;
 padding: 0;
 font-size: 100%;
 color: #000;
 background: #fff;
}
table {
 border-collapse: collapse;
 width: 100%;
}
table, td {
 margin: 0;
 padding: 0;
 vertical-align: top;
 text-align: left;
}
#catalog td {
 width: 25%;
 font: normal 80% Verdana,Helvetica,Arial,sans-serif;
 text-align: center;
}
#catalog a {
 text-decoration: none;
 color: #00f;
 background: transparent;
}
#catalog a:hover {
 color: #f00;
 background: transparent;
}
#catalog a span {
 text-decoration: underline;
 display: block;
}
#catalog a:hover span {
 text-decoration: none;
}
img,
a img {
 border: none;
 display: inline;
}
</style>

</head>
<body>
<table summary="Catalog items in this category" id="catalog">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<a href="pirate-ship-skull-dagger-scene.html" title="Pirate Ship Skull and Dagger Statue">
<img src="collectible-knights-warriors-pirates/knights-warriors-pirates-previews/pirate-ship-skull-sword-prev.jpg" alt="pirate ship skull pirates hat buccaneer statue figurine" title="stone resin with cloth sails pirate ship buccaneer statue with a dagger, skull and hat. Buy it now, matey!" width="146" height="106">
<span>Pirate Scene with Buccaneer Statue</span></a>
</td>
</tr>
</table>
</body>
</html>

I put it in a full html page so you can see it in the rough. A lot of code was removed that is covered in the CSS. You could use this for a starter external stylesheet, if you wanted.

Notice I went with a single link? My reasoning is that one link will pass more juice than when it split between two links. More investigation required.

The span around the link text allows us to turn off normal text decoration for the link, yet keep it in effect for the link text. This keeps the underline from skewering the image. As a display: block; element it does not require a line break so we eliminate that nasty BR tag.

Notice also that the tool tip text on the image is the title on the image, where as the tool tip on the link text is the title on the anchor? Hate to say it, but I held this one back on purpose... It is just too tempting to get all technical about the link text.

In your example the mix of diction is very good, and doesn't spam or repeat (too much?).

In any case, even if the text in the anchor title is appropriate (and possibly its own subtle call to action) the link text should really be doing the job. Then... We could be tempted to use the tool tip to try to persuade a little bit more...

We have already stipulated that the alt text need not duplicate, and one supposes this should also take into account the link text. One will wish to closely examine the interplay of all these elements to be sure not to shoot one''s foot off.

Bottom line is there are a number of possible places to be playing up any focus element:
1. The page (which includes all titles, headings, surrounding text and emphasis, and meta elements)
2. Link text
3. Link title attribute
4. Image alt attribute
5. Image title attribute
and a sixth, although this is stretching, just now, longdesc. The seventh, one supposes, would be in the target document, but from a different take, looking in reverse.

Balance, distribute and relate.

B-D-R.

CDBDRRRRRRR

mannequin-lady · #18 (**permalink**) 07-03-2009, 09:57 AM

weegillis, a lot of this last post is above and beyond my capabilities at this time, especially since I'm not using CSS yet. I bought a great book and am studying it.

It really is going to be too massive an undertaking for me to re-do these sites, so I'm going to try to add things slowly and maybe it will all mesh together by five years from now. I have too many pages and two websites. It's not humanly possible for me to do all this and still have an offline life.

Your help has been fabulous! I'm going to move part of the code over to the accessibility forum, because I need to make sure everything is according to the "rules".

Thank you so much!

Steph

**weegillis** · #19 (**permalink**) 07-03-2009, 03:38 PM

Perhaps you won't need to or want to change over the whole site. A page at a time can be added that has no dependency on the other pages. The new pages can be CSS based, using a common external stylesheet. Using CSS, it is possible to create nearly the exact look of the rest of your site so they won't jump at anyone. Once you get a handle of the method, you'll never want to go back to the old ways, again.

One can understand that after doing a thing for years, and getting very efficient using the software and tools you've been using, it can be a real hit on productivity when you toss that all aside and take a new tack. But like I said, a page at a time will give you time to learn, to experiment and create new ways to be 'more' productive.

There is one thing by which we may differ the most: I've never built a page with WYSIWYG, so have no idea how little or how much productivity is improved by it. In this regard, I'm poorly qualified to offer advice. Sounds like a cop out...

mannequin-lady · #20 (**permalink**) 07-04-2009, 10:12 AM

Quote:

Originally Posted by weegillis

Perhaps you won't need to or want to change over the whole site. A page at a time can be added that has no dependency on the other pages. The new pages can be CSS based, using a common external stylesheet.

Using CSS, it is possible to create nearly the exact look of the rest of your site so they won't jump at anyone. Once you get a handle of the method, you'll never want to go back to the old ways, again.

There is one thing by which we may differ the most: I've never built a page with WYSIWYG, so have no idea how little or how much productivity is improved by it. In this regard, I'm poorly qualified to offer advice. Sounds like a cop out...

First off, it's NOT a cop out. Hand coding really appears to be the best so you have complete control over what's in it and what can be deleted as useless.

Since, at various times, I've hired different web designers for the five sites I had (now there are two), my website incorporates at least three different designs, all coded in a completely different way. That doesn't even count the foil art site.

So, wading through and trying to fix so many different styles of coding is just too much.

As an example, the first two links used to be separate sites:

Jewelry .925 Sterling Silver Jewelry and Costume Fashion Jewelry - this jewelry site uses frames, but I was at least able to remove the backgrounds and other useless objects and make it look somewhat like the dress forms site.

Art Prints Posters Home Office School Room Children's Decor - this art prints site uses a popup method for enlarged views of the prints I sell. I have not removed the background because I'm in love with it.

This is the main site where I've consolidated my jewelry and art prints websites:

All Dress Forms Mini Dress Form Miniatures at All Dress Forms

I thought I may be able to do one page at a time using CSS like you said, but the thought of redoing approximately 2500 pages, counting both sites, is really too much.

I think my time is better spent marketing the goods! Disclaimer: This opinion may change over time.

Steph

mannequin-lady · #21 (**permalink**) 07-04-2009, 10:23 AM

Quote:

Originally Posted by weegillis

I put it in a full html page so you can see it in the rough. A lot of code was removed that is covered in the CSS. You could use this for a starter external stylesheet, if you wanted.

One more comment about the html you painstakingly posted. I created a new page in my WSYWIG program to view it and it's overwhelming. For instance, I'm so far behind the current way of coding, that I don't even know for sure what a code snippet is.

I'm not trying to engage you in a discussion of code snippets. I'm trying to state that although I appreciate all this wisdom, I think it's too late for my sites to redesign them. I'm not superwoman and this project is too much.

People starting a new site would definitely benefit from this help. Let's hope they get into the conversation!

**weegillis** · #22 (**permalink**) 07-06-2009, 08:04 PM

HTML Code:

<div>
<dfn>Code Snippet: a piece of code that can be replicated and inserted elsewhere in a page or a site.</dfn>

Often we repeat a structure over and over, with only the contents changing, not the markup code that wraps it. If using CSS and a class, the structure may even maintain its presentation and positioning properties. Most HTML editors offer a way to store and retrieve snippets.

Similar to templates, snippets are not meant as templates, as much as chunks of repeated code. Code that appears in the template for a site pretty much covers the core page layout, where code in a snippet will confine itself to a small block of markup that is not usually included in the actual template, or may repeat a small section of the template.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Alt Vs. Title - Battle of the Attributes	mjtaylor	Search Engine Optimization Forum	25	03-28-2008 11:30 PM
Image alt tags and link title attributes	Holicc	Search Engine Optimization Forum	15	01-24-2007 10:22 PM
ALT vs. TITLE attributes: how to correctly use them	Faglork	Accessibility and Usability Forum	1	03-08-2005 03:39 PM
Formatting Meta tags: title VS DC.title VS http-equiv=title	Sergio Simarro	Search Engine Optimization Forum	8	05-27-2004 12:48 PM
Page Elements, Tags and Associated Attributes	fathom	Search Engine Optimization Forum	4	03-22-2004 04:55 PM