question about adding a title and alt tag to a header picture

7 replies
Hi Warriors,

I'm wondering if you can help me with this... I'd like to be able to add a title tag and alt tag to my image in the header of my blog. I'm wondering how I can do this. The images is in the css file and I don't know how to add those tags to it. Any suggestions?

Thanks!
Rebecca
#adding #alt #header #picture #question #tag #title
  • Profile picture of the author Emmanuel Betinis
    You don't add TITLE tags to images. You add TITLE tags to pages.

    You may, however, add ALT tags to images. This is a good idea for
    ONpage SEO (amongst other things).

    In order to add an ALT tag to an image, first locate the code that contains the <IMG SRC tag and immediately follow it with

    ALT="alt-text-here"> to close the tag.
    {{ DiscussionBoard.errors[870357].message }}
  • Well, I know that it's possible to add title tags to images because I've done it... you can check it out at this website... A to Z Tree Service Tree Service Oregon - Grants Pass, Medford, Ashland, Rogue River Valley. when you put your cursor over the pictures (minus the header ones), a title exert will come up.

    my issue is I don't know how to add that tag to an image in a css file.

    anyone know how to do this?

    thanks,
    rebecca
    {{ DiscussionBoard.errors[870562].message }}
    • Profile picture of the author Tsnyder
      Originally Posted by RebeccaLynn View Post

      Well, I know that it's possible to add title tags to images because I've done it... you can check it out at this website... A to Z Tree Service Tree Service Oregon - Grants Pass, Medford, Ashland, Rogue River Valley. when you put your cursor over the pictures (minus the header ones), a title exert will come up.

      my issue is I don't know how to add that tag to an image in a css file.

      anyone know how to do this?

      thanks,
      rebecca
      You're confusing what you see with the coding name of the tag.

      Here's the coded tag from one of the images on the site you linked... it's
      an alt tag... not a title tag.


      src="http://atoztree.com/images/headline.jpg" alt="Oregon Tree Service Oregon, Oregon Arborist, Tree Removal, Tree Care, Tree Cutting, Tree Services"

      As you can see, it's exactly as anapest posted.

      Here's the title tag from the same site...

      <title>A to Z Tree Service &raquo; Tree Service Oregon - Grants Pass, Medford, Ashland, Rogue River Valley</title>

      See the difference?

      Tsnyder
      Signature
      If you knew what I know you'd be doing what I do...
      {{ DiscussionBoard.errors[870581].message }}
  • Profile picture of the author Emmanuel Betinis
    Rebecca,

    after looking at the example you posted, I do
    indeed understand what you're talking about now.

    Refer to the code below:

    <img src="http://YOUR-DOMAIN.COM/IMAGE-NAME.JPG" alt="This is the ALT text for the image" title="And here is the title you were speaking of - This text will show up as a pop-up on a MOUSEOVER like you were talking about.">

    Give that a shot.
    {{ DiscussionBoard.errors[870643].message }}
  • Profile picture of the author Tsnyder
    You're welcome, Rebecca...

    Tsnyder
    Signature
    If you knew what I know you'd be doing what I do...
    {{ DiscussionBoard.errors[872289].message }}
  • Profile picture of the author The Pension Guy
    While the two attributes (not tags!) for images (alt and title) seem to be similar, they have very different functions. Besides the fact that "alt" - correctly - doesn't show up in Firefox.

    alt is an alternative for an image for those that cannot see it; title is a kind of annotation or adding further information about an element (not only image).

    alt attributes are a more important part of a document, since they are an essential part of it, as opposed to a title which just provides (optional) additional information. Additionally, an alt attribute is an accessibility feature, whereas titles are something of a usability enhancement.



    More:
    http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
    and
    http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3
    Signature

    {{ DiscussionBoard.errors[872497].message }}
  • Profile picture of the author Andrew E.
    Rebecca,

    Here is a quick overview:
    There is an alt ATTRIBUTE, a title TAG, and a title ATTRIBUTE.

    The title TAG goes at the top of your page, and it's what you see in your browsers title bar (this page has "question about adding a title and alt tag to a header picture" at the top).

    An alt ATTRIBUTE belongs to the IMG tag, and is used primarily for accessibility reasons (like for screen readers for the blind), but it has some SEO effects.

    The title ATTRIBUTE belongs to the a tag, and serves two purposes:
    1. It gives a link a description besides what is between the two <a>...</a> anchor tags, giving the link some context. This may also serve some SEO purposes, but the jury is still out on that one.
    2. It produces a little window with the title attribute when you hover over a text-link, similar to the kind you get when you hover over an image that has an ALT description.
    Here are some examples for you:
    TITLE TAG:
    HTML Code:
    <title>This is my website</title>
    ALT TAG:
    HTML Code:
    <img src="myimage.jpg" width="50" height="50" ALT="This is a description of my image." />
    TITLE ATTRIBUTE:
    HTML Code:
    <a href="http://www.google.com" TITLE="Link to Google">Google Search</a>
    {{ DiscussionBoard.errors[872693].message }}

Trending Topics