Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Use of 'alt' and 'title' tags for images and hyperlinks?

Featured Replies

I am going through my website adding all the alt and title tags to my images and hyperlinks. I was just wondering if you have a footer like the attached image, is it best to still add the title="" to the hyperlinks or leave blank?? Will it aid SEO, was thinking it may make the footer look 'messy' what you think?

 

Cheers

post-17236-127469147134_thumb.jpg

every link you have should have titles, every image should have alt tags, if they dont google will demote you!!

 

Plus its extra keywords. Remember only do the titles and alts to that specific page as mulitpul links with the same title will effect your google ranking also!!

 

Hope this helps...

  • Author

Would you add both the alt and title elements for links on an image or just the alt?

 

For links you dont want to use the title tag on such as my navigation i take it that doing title="" is ok?

 

I'll get this sorted today hopefully - 20 pages to do lol

for the image links you do not need a title as it is already stating to google what the image is.

 

In the navigation if it has a link, it needs a title, Same with images if it has an image, it needs a alt!

 

Hope this helps, If so please click the plus sign :)

for links you dont want to provide to google as links out just use the nofollow rule on the links, but keep using titles as it all helps with keywords, the more you have regarding the page specifics the better your google ranking.

  • Author

cheers for that mate, will just add them in everywhere! May explain why its low in search engines at the mo, but its only been live 3 weeks or so!

normally if you are looking at hard keywords like Web Design, Graphic Design etc unless your website is about 3-5 years old, content changes constantly and you have alot of high quality backlinks you are not going to get to first place on page 1.

 

But you can get on first page if you have all them but the long lasting url.

 

So good luck in your google ranking for the future :)

How can you give images an ALT tag if they are in the background of a div?

 

And if you are using HTML Strict - surely this isn't possible anyway?

When you say an image is a background image, has this image got text in it?

 

If so, you are better using the image replacement technique.

 

This is the html I have at the top of one of my websites.

 

       <div id="header">
           <h1>Drumcorn Farm Cottage</h1>
           <small>Northern Ireland Tourist Board 4 Star Rated</small>
       </div><!--end header-->

 

and this would be the css for the above.

 


#header {
position: relative;
}

#header h1 {
text-indent: -9999px;
background: url(images/logo.png) no-repeat 25px 25px;
height: 126px;
}

#header small {
text-indent: -9999px;
position: absolute;
font-size: 14px;
background: url(images/nitb.png) no-repeat;
height: 75px;
width: 155px;
top: 51px;
left: 799px;
}

 

Basically what I'm doing is pushing the text off to the right of the page at -9999px and putting an image where the text would be.

Background images do not have alt tags as it is not html coding, its css... even when you use background in the html it is really still css within html.

 

Let me re answer the image one.

 

If you are using a <img src> you will need a alt tag

 

Hope this helps

Yes, thanks. I use background images for pretty much everything apart from the logo.

 

Should I be doing otherwise? Especially for photos of people etc...?

The title= attribute is to add additional information to an element to give the user further information about it purpose or meaning...

 

For HTML4...

 

This attribute offers advisory information about the element for which it is set.

 

For HTML5...

 

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; and so forth. The value is text.

 

W3 description at http://www.w3.org/TR/html401/struct/global.html#h-7.4.3

 

For the OP's original question, I can't see any added value for adding title attributes to your footer links.

 

The ALT attribute should be used for alternative text for when images are not available.

The title= attribute is to add additional information to an element to give the user further information about it purpose or meaning...

 

For HTML4...

 

 

 

For HTML5...

 

 

 

W3 description at http://www.w3.org/TR/html401/struct/global.html#h-7.4.3

 

For the OP's original question, I can't see any added value for adding title attributes to your footer links.

 

The ALT attribute should be used for alternative text for when images are not available.

 

Yes the alt is originally made for when images are not available and link titles are to explain what the links are for, you are correct about that. But you will see that google uses these to find what the site is all about, with you saying there is no need for adding titles to the footer is like putting a gun to your head regarding optimising your website for search engines.

 

I have only been doing search engine optimisation for about 20 months but i have pushed over 100 websites to first page of google using these methods.

 

Google state the main areas inwhich they look for are as follows:

 

All images to have alt tags and relevent to page and content.

All links to have titles and nofollow rules to prevent google following them and relevent to page and content.

Keywords to be specific to the content on that page.

Quality backlinks.

Long lasting domain name. (A must for tough keywords like web design etc).

w3c to optimise it more.

Tabless so that google bots can easily read through the site.

Content updated frequently!!

High unique traffic.

 

DO all these and google will push you up the rankings.

 

mrsminkie use your background images as if you over populate it, google will just skim over it.

But you will see that google uses these to find what the site is all about, with you saying there is no need for adding titles to the footer is like putting a gun to your head regarding optimising your website for search engines.

The title= attribute is for adding extra information to an element when it's relevent or helpful to the visitor. Search engines are normally perfectly capable of learning what an element is about without the need for a title.

 

In the case of an A tag...

<a href="portfolio.html">Web design portfolio</a>

...is more than adequate for assistive device users and search engines to know what to expect when they click the link.

 

If you were to do something like...

<a href="portfolio.html" title="Web design and development portfolio">Web design portfolio</a>

...it doesn't really add any value. In fact for users of assistive devices it's a hinderence and a frustration!

 

Now, if you were using generic link text you could argue that a title attribute might add value, eg:

<a href="portfolio.html" title="A selection of screenshots from various web design projects">Portfolio</a>

...still frustrating for assistive device users but at least they're know what type of portfolio content they'd be reading about.

 

Some content systems are guilty with placing title= attributes everywhere, Wordpress is one such culprit, see http://www.webmasterworld.com/accessibility_usability/4128520.htm

 

"optimising for search engines" may seem appealing but I've always maintained the best approach is to write for your visitors, not robots :)

  • Author

If you take a look at my navigation at the top of the page here >

 

http://www.pbwebdesign-warrington.co.uk/

 

I have added the title="" element to all links and sub links within the navigation.

 

Now if you use the navigation hovering over the different links it is pretty annoying having the title element pop up everytime you hover over a link.

 

If you compare it to a page on my site that has no title="" in the navigation it is more use-able.

 

What do you think, not have the title="" in the navigation at all, or leave it in there OR just leave it blank as in title=""

its up to you, inregards to that, are you doing it to please users, which in my opinion it doesnt bother me about the title popup or are you wanting better placement in google?

 

Take this website for instance... all footer links have titles apart from the nofollow links.

 

But on the other hand i know that people who are not very good with computers will want to know what they are clicking before clicking the links.

 

Anyways good look what ever you decide :)

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.