SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alt or Title attributes

    Should I add a title attribute to my main navbar links? I've seen this done with some links on other sites and have read that it can increase SEO.

    Also what would I do with say 100 thumbnail gallery images regarding alt attributes and/or title attributes? Currently I have an alt attribute set on each one that says something like: Click to view larger image.

    This doesn't really benefit me SEO wise, but I suppose helps usability. Should each thumbnail's alt attribute actually say what the image is of? Or perhaps have a title attribute to?

    I'm trying to get the best out of SEO with this site but also make sure it's very usable.

  2. #2
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The alt attribute should give a text alternative to the picture, the "click to view.." is not correct usage, and offers nothing to the people that will make use of the alt attributes in the first place.

    The title attribute should give the user some idea of what they can expect at the other end of the link.

    So an image link would look something like this.

    <a href="#" title="Click here to see larger image"><img src="#" alt="Picture of a thing"></a>
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  3. #3
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like your picture: Chorlton and the Wheelies—Classic!

    The title attribute should give the user some idea of what they can expect at the other end of the link.
    I with you on the alt attribute but regarding the title attribute, I should explain something. I'm using lightbox 2.0 so after clicking on a thumbnail, the contents of the title attribute would show up below the larger image opened in the lightbox. Here's a sample of the code:

    Code:
    <a href="images/mammals/image-1.jpg" rel="lightbox[mammals]" title="Badger"><img src="images/mammals/thumb-1.jpg" width="100" height="100" alt="Click to view larger image" /></a>
    So in this case I couldn't really have Click to view larger image in the title attribute!

    I could change the alt attribute to say the same as the title though, but would there be any point having 2 attributes saying the same thing?

    I'm not sure what to do?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The alt attribute is used for when the image can't be displayed, where the alt text is used to represent that image. If the image is decorative instead of functional, you should provide just an empty alt attribute instead.

    The title attribute is used to provide additional information to the image, such as when someone hovers over the image. This though should not be the only way people gain access to that information.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    The alt attribute is used for when the image can't be displayed, where the alt text is used to represent that image. If the image is decorative instead of functional, you should provide just an empty alt attribute instead.
    No, if the image is decorative instead of functional it should not be in the html at all, but pulled in as a background image in the CSS.
    Ed Seedhouse

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In theory, yes. But it's not always practical. Imagine a newspaper site where each article has an associated image to draw interest to it. You'd have to pollute the style sheet with thousands of IDs to handle this with CSS.

    For design elements that occur on every page (or at least several pages), then it's different.

    Idealism is all good and well, but sometimes you'll have to be a bit pragmatic, too.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    In theory, yes. But it's not always practical. Imagine a newspaper site where each article has an associated image to draw interest to it.
    That would be content, not background, and belongs in the html.
    Ed Seedhouse

  8. #8
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rabbitsfeat View Post
    Also what would I do with say 100 thumbnail gallery images regarding alt attributes and/or title attributes? Currently I have an alt attribute set on each one that says something like: Click to view larger image.
    The definition for the alt attribute in the sitepoint html reference says:

    "For an image that’s contained inside an a element, and is thus being used as a link, use an alt attribute that explains where the link goes, or what activating the link will do."

    So following that def using "Click to view larger image" might work. The alt def page gives other good guidelines on what to include in alt.

    Don't get me wrong, I'm not trying to spark an alt attribute debate as I think everyone has varying opinions, and, to some effect they're all right.

    I read almost everywhere that the title attribute is for extra information for a page element. If you have extra information then use title.

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    That would be content, not background, and belongs in the html.
    Those images are not always 'content'. You'll often see generic stock photos used that have little to do with the article itself. It's just eye-candy that attracts the reader's attention to the article.

    Quote Originally Posted by tictike View Post
    So following that def using "Click to view larger image" might work. The alt def page gives other good guidelines on what to include in alt.
    On the other hand, if someone is seeing the alt text they aren't seeing the image, so they'll have little incentive to click on it to get a larger image which they also cannot see.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Those images are not always 'content'. You'll often see generic stock photos used that have little to do with the article itself. It's just eye-candy that attracts the reader's attention to the article.
    Well, with any conceptual division there will always be cases that straddle the borderline, since any such division is always somewhat arbitrary. But one must draw the line somewhere.
    Ed Seedhouse

  11. #11
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    On the other hand, if someone is seeing the alt text they aren't seeing the image, so they'll have little incentive to click on it to get a larger image which they also cannot see.
    Good point, so "click to view larger image" should go in a title attribute?

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tictike View Post
    Good point, so "click to view larger image" should go in a title attribute?
    I'd say that's more appropriate, but that's just my personal opinion.
    Birnam wood is come to Dunsinane

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,870
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by tictike View Post
    The definition for the alt attribute in the sitepoint html reference says:

    "For an image that’s contained inside an a element, and is thus being used as a link, use an alt attribute that explains where the link goes, or what activating the link will do."

    So following that def using "Click to view larger image" might work. The alt def page gives other good guidelines on what to include in alt.
    The reason for specifying where the link goes is because people who get the alt attribute will have that as a text link since they can't see any images. If the link is simply to a larger version of the image that they can't see then the link is useless to anyone who can see the alt attribute. They are not going to 'see' a larger version of "click to view larger image" if they click on the link so such alt text is always a LIE. If the image actually links to another page of content then that's where using the alt attribute to say what that page is about is useful.

    When specifying an alt attribute you should state the information that the image is meant to convey.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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