Submit Your Article Forum Rules

Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: alt and title attributes in IMG and A tags

  1. #1
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,796

    alt and title attributes in IMG and A tags

    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

  2. #2
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,796

    Re: alt and title attributes in IMG and A tags

    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.

  3. #3

    Re: alt and title attributes in IMG and A tags

    Quote Originally Posted by weegillis View Post
    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!
    Hidden Content and Hidden Content for Friends, Family and Dogs.
    Hidden Content

  4. #4

    Re: alt and title attributes in IMG and A tags

    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!
    Hidden Content and Hidden Content for Friends, Family and Dogs.
    Hidden Content

  5. #5

    Thumbs up Re: alt and title attributes in IMG and A tags

    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

    http://www.webproworld.com/webprowor...tml#post444929
    Hidden Content and Hidden Content for Friends, Family and Dogs.
    Hidden Content

  6. #6
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,796

    Re: alt and title attributes in IMG and A tags

    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

  7. #7

    Re: alt and title attributes in IMG and A tags

    Quote Originally Posted by weegillis View Post
    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
    Hidden Content and Hidden Content for Friends, Family and Dogs.
    Hidden Content

  8. #8
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,796

    Re: alt and title attributes in IMG and A tags

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

  9. #9

    Re: alt and title attributes in IMG and A tags

    Quote Originally Posted by weegillis View Post
    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
    Hidden Content and Hidden Content for Friends, Family and Dogs.
    Hidden Content

  10. #10
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,796

    Re: alt and title attributes in IMG and A tags

    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.

Similar Threads

  1. Title and Alt attributes on Images
    By Rod Abbotson in forum Search Engine Optimization Forum
    Replies: 11
    Last Post: 07-12-2009, 03:17 PM
  2. Alt Vs. Title - Battle of the Attributes
    By mjtaylor in forum Search Engine Optimization Forum
    Replies: 25
    Last Post: 03-28-2008, 11:30 PM
  3. Image alt tags and link title attributes
    By Holicc in forum Search Engine Optimization Forum
    Replies: 15
    Last Post: 01-24-2007, 10:22 PM
  4. ALT vs. TITLE attributes: how to correctly use them
    By Faglork in forum Accessibility and Usability Forum
    Replies: 1
    Last Post: 03-08-2005, 03:39 PM
  5. Formatting Meta tags: title VS DC.title VS http-equiv=title
    By Sergio Simarro in forum Search Engine Optimization Forum
    Replies: 8
    Last Post: 05-27-2004, 12:48 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •