html - About the title/alt attributes

Question

I understand the purpose of the title and alt attributes, but I just do not understand the best use for them or if I can use the same title/alt more than once.

For example, take a website about dogs:

From my understanding all img tags need an alt attribute:

<img src="Husky.png" alt="Husky" />
<img src="Rottweiler.png" alt="Rottweiler" />

Is it good practice to use the same alt attribute for multiple pictures on the same subject?

<img src="Husky2.png" alt="Husky" />
<img src="Husky3.png" alt="Husky" />
<img src="Husky4.png" alt="Husky" />

Is it good practice to use a title/alt attribute in every tag? What about using the same attribute more than a few times?

Example:

<ol title="This Dog">
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
</ol>

<div id="body">
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
</div>

My understanding is that the title attribute acts as a tooltip that appears when hovering over text. The kind of thing that has to be done in newer browsers but alt and title used to do the same thing back in older browsers. Those attributes also serve as a method for search engines to recognize your website.

Answer 1

My understanding is that the title tag acts as a tool tip/hover over information type of thing in newer browsers and the alt tags use to do the same back in the older browsers.

No, the title and alt attributes have a different meaning/purpose (not old method vs. new method).

---

title

The title attribute is a global attribute, which means that you can use it on all elements. In general (note that one some elements (e.g. the abbr element) it has a special meaning) it is defined as:

The title attribute represents advisory information for the element […]

You should read the definition of the attribute, it explains how it should (not) be used.

alt

The alt attribute can only be used on the area, input (for image buttons) and img element. For img, it has this meaning:

the value of the alt attribute is the img element’s fallback content, and provides equivalent content for users and user agents who cannot process images or have image loading disabled.

There are many rules how you should (not) use this attribute.

---

So, the alt attribute is an alternative to the image: EITHER you see the image OR you read the alternative text. The alt value should not be given/presented as an addition to the image.

The title attribute gives additional information, that would be provided to both (the users that see the image and the users that read the alternative text). However, you shouldn't use the title attribute as the only means for information of importance, because …

• … the typical presentation is often "hidden" behind a tooltip (users don't necessarily know that a tooltip is present at all, because they don't hover over all elements)
• … keyboard or touchscreen users often cannot see the tooltip at all, because they can't hover
• … screen readers often don't read/announce the title value (in the default settings)