images & alt/title tags

  • I’ve read that it’s important to use alt tags in connection with images displayed on one’s blog so that the material will be properly indexed & crawled by the search engine bots. Until now, I’ve mostly been naming my title tags & not using my alt tags. Should I be using them? Should I be using both? Does it matter?

Viewing 8 replies - 1 through 8 (of 8 total)

  • It is to comply with web standards, and to allow for visitors who surf the web, for what ever reasons with graphics turned off or simply text only browsers, to see text representations of graphic images.

    Thread Starter richards1052

    (@richards1052)

    Yes, I understand that & thanks for clarifying…

    But does it matter whether you use title tags (I have filled in title information for some of my images) or alt tags for images (for which I haven’t)?

    I’m sorry, I miss understood. The alt tag is required, the title tag is a standard tag. FF doesn’t show the title when moused over if using the alt tag, only if the title tag is included.

    So, if you want your visitors to be able to mouse over for a title in any browser, use both. If you want to be valid code, always use the alt, and remember to close “/” the tag.

    I thought you were refering to using title tags in the anchor tag. Which is thought to be a good practice for accessiblity.

    Thread Starter richards1052

    (@richards1052)

    What would the anchor tag be in image display code?

    Moderator James Huff

    (@macmanx)

    Anchor tags are used to quickly move to a location on the page. For example, Rin uses the anchor tags #bottom and #top to quickly move to the bottom (where the search field is located) and to the top (where the menu bar is located). Anchor tags are not required for images and should only be used in navigational situations to avoid excess scrolling.

    As for alt and title tags, use both. It’s better for site accessibility.

    No when I say anchor tag I mean like this <a href="yoursite.com" title="Your Site">Linking to a site</a>

    The title attribute is a standard attribute, meaning it’s not tag specific. Same as id, style, etc.

    Attributes like src, are tag specific.

    Thread Starter richards1052

    (@richards1052)

    Thanks for those helpful answers.

    Tags are <body>, <a>, etc. They’re also known as “HTML elements” within the DOM. Attributes are things like title=, alt=, etc. Properties are parts of CSS, for instance background-color in <body style=”background-color: red; font-weight: bold;”>. Those are the 3 things people get mixed up most often.

    alt is a required attribute. Title isn’t required, but I recommend including title. Title should be just a single word or phrase, whereas alt should be a sentence or two, describing what a missing image should result in, or a text-only browser or browser with images turned off should see. For some unimportant images you could put in alt=””, or navigation images, something like alt=”[Downloads]”. In the case of navigation images, you could make the title title=”click here to download”, since even though there is no rule on this in the specification, browsers generally honor title over alt when showing a tooltip/titletip (text that appears in a yellow box when you hover over an image). An example valid <img> tag would be:

    <img src="images/gecko.png" alt="[ A picture of a gecko clinging to the wall, and a blowup of the microscopic hairs that help the gecko stay connected to it via van-der-walls forces]">

    If you wanted to make a navigation link, you could do:
    <a href="articles.html"><img src="images/nav/articles.png" alt="[Articles]" title="Click here to view articles"></a>

    For bullets, you could do:

    <img src="bullets.gif" alt="->">

    For smilies:

    <img src="smiley.gif" alt=":-)">

    If the image isn’t important, like one some people use to clutter up their pages with animations, you could do:
    <img src="annoyinganimatedgif.gif" alt="">

    Take the second half of this comment, paste it into a blank html file, and look at it in Firefox to see the correct behavior. Since the images aren’t there, it’ll show the alt. Try hovering over the navigation link, and you’ll see the tooltip.

    I can’t think of too many cases where you’d want alt to be an empty string, except for decorative images that don’t add any useful content.

    See Hixie’s evil test for more info.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘images & alt/title tags’ is closed to new replies.