Part of this topic is covered in my post Why does alt-text not show up in Firefox? which deals mainly with images, but the subject deserves it’s own post as using titles on links will help robots give links (and text) a higher priority when it comes to ranking the content of your web page.

 

As explained in my other post on alt text which you should read first, alt text is for browsers that have images turned off or for people who use screen readers and gives a brief description of what the image is, whereas the title text is what is supposed to be displayed when you hover over an image (or word, or link, or whatever you want to title), supplying additional information.

 

The confusion between alt text and title text is that Internet Explorer displays ‘Alt Text’ when hovering over an image, and all the good browsers (like Firefox, Chrome and Safari) don’t. Instead, the good browsers only display ‘Title Text’ over images.

 

---

How to ‘title text’ your links and text.

 

Try hovering over this link: www.worcestershirewebdesign.co.uk.

Now try hovering over this word: here.

The code for putting title text over a link is:

<a href=“http://www.worcestershirewebdesign.co.uk” target=“_blank” title=”Using title text over links“> www.worcestershirewebdesign.co.uk </a>

and the code for putting title text over normal text is either:

<p title=”Using title text on words”>here</p>

or:

<span title=”Using title text on words”>here</span>

NB: the <p>…</p> tags will start a new paragraph, as they are paragraph tags, and the <span>…</span> tags will allow you to title-text a word within a sentence.

The code above is in xhtml but works fine in plain, old fashioned, boring html (and if you are still using html, WHY?)

 

---

And now the benefits of using title text on links.

 

Our internet friends, the robots, sometimes have a hard time working out what is relevant and what is not on your web page. They take a good look at the meta data for the Title, Description and Keywords, and most of your page ranking comes from those three, in that order. Then your tags H1, H2, H3 (and so on) come in to play and finally your content.

You may have heard the expression “Content is King“… well it is. After looking at your meta data, tags etc., it is the uniqueness and relevance of your content that makes search engines sit up and take notice.

The robots don’t actually understand what you write, they’re robots after all, and artificial intelligence is still sixteen years away, but what they can understand is what you do to your content to make it stand out. They know what BOLD is, they know what ITALICS are, and they sure know how to read TITLE TEXT.

All of these tell robots that “Hey!, This text or link is just a little bit more important than all the rest.”

 

Will using Title-Text on links make your website jump from a PageRank 0 to a PageRank 7 overnight? Not in your wildest dreams!

What it will do is get you in the habit of doing the right thing for your website. As with most other methods of Search Engine Optimisation (or Optimization as my spell checker keeps nagging me), any gains are strictly long-term. With the Millions of websites and Billions of web pages out there, any slight edge your website has over it’s nearest competitors could mean the difference between hitting page one or page two of Google for a particular search query… and that difference is huge.

So using title text and other SEO techniques now could pay dividends for the future.

 

A final word of caution – don’t overdo it.

Robots may not be intelligent, but they can spot someone abusing SEO techniques a million miles away.

 

---

Related information and links.

 

Why does alt-text not show up in Firefox?

I hope you found this information useful and I welcome your comments. If you have any specific questions related to website development, please email me or post a comment.

 

Worcestershire Web Designer

 

 

 

---

I recently installed Firefox, but every time I previewed my website, hovering over the images produced no ‘alt text’.  It worked fine in Internet Explorer so why not Firefox?  Was something wrong with it?

It turns out the opposite is true, it is Internet Explorer that’s wrong for showing alt text in the first place.  Alt text is text information equivalent to the image’s content or function. It may be used when a human or a robot may want to use text instead of an image, or for people who view pages in text-only mode, or who are blind or visually impaired and use screen readers or for people who just turn off images. The alt-tag is an alternative for that image, hence the name.

 

---

Let’s see an example using my company logo:

The code for this is:

<img src=”http://worcestershirewebdesign.co.uk/blah…/blah…jpg” alt=”Worcestershire Web Design – quality, affordable websites” />

(I’m using xhtml in this example, but html works the same)

If you hover over this image in Firefox, Safari or Chrome, no alt-text appears, but switch over to Internet Explorer and the alt “Worcestershire Web Design – quality, affordable websites” appears.  Why? read on…

 

---

So what should ‘alt-text’ look like anyway?

Using the above example with my browser’s images turned off and as you can see, the ‘alt‘ text is displayed where the image would have been if I hadn’t have turned it off.

 

---

So how do I get the alt-text to appear in Firefox?

Apart from turning your images off, you don’t – you use a ‘title-tag’ instead.  Title-tags are the correct way to get text information to appear on screen when hovering over an image with your cursor, not alt-tags.  Title-tags are coded in the same way as alt-tags, but you just change the word ‘alt’ to ‘title’.

Using the same example as before:

The code for this now is:

<img src=”http://worcestershirewebdesign.co.uk/blah…/blah…jpg” title=”this is an example use of title text” />

If you hover over this image in Firefox now, the words “this is an example use of title text” appears.

 

---

So which tag is correct, ‘alt’ or ‘title’?

Actually, you should be using both just be aware of the different uses.

• Alt text: shown in place of an image to give people the equivalent of what the picture was, taking into account if the image has content or has a function (a photo of a horse shows content, a link-button image has function)

• Title text: shown to give an image, text or link some title text

Using the same piece of code again but this time with both alt and title tags:

<img src=”http://worcestershirewebdesign.co.uk/blah…/blah…jpg” alt=”Worcestershire Web Design – quality, affordable websites” title=”this is an example of title text”/>

 

---

Are there any other uses for title text?

Plenty. Try hovering over this word: here.

Now try hovering over this link: www.worcestershirewebdesign.co.uk.

The simple code used for getting title text to appear over a word is:

<p title=”Use title text on words”>here</p>

and again for a link:

<a href=“http://www.worcestershirewebdesign.co.uk” target=“_blank” title=”Or you can use title text over links“>www.worcestershirewebdesign.co.uk </a>

 

Many thanks to Florent V. for correcting some errors that were originally on this page.

 

---

Related information and links.

There is an excellent article on the appropriate use of alternative text at WebAIM.org which goes into much more detail. Definitely worth a look.

Not using Firefox yet?  download the latest version for free at http://www.mozilla.com/en-US/firefox/

Latest W3Schools figures show 47.5% of people now use Firefox http://www.w3schools.com/browsers/browsers_stats.asp

Figures from other sites show different statistics on browser usage so you may also want to check out: http://gs.statcounter.com/

 

 

I hope you found this information useful and I welcome your comments.

If you have any specific questions related to website development, please email me or post a comment.

 

Worcestershire Web Designer

 

 

 

---