About the attributes Title / Alt;

Question

Hope I can post this.

I understand the purpose of the title and alt attributes, but I just don’t understand how to use them better or if I can use the same / alt header more than once.

For example, a site about dogs:

From my understanding, all img tags need an alt tag:

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

Is it good to use the same alt tag for multiple images on the same issue

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

Is it good to use the title / alt tag in each tag? How about using the same tag 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> 

I understand that the title tag acts like a hint / hover over the type of information in new browsers, and the alt tags use the same thing in older browsers. They also serve as a method for search engines to recognize your site.

I hope I have a point in my questions.

Answer 1

I understand that the title tag acts like a hint / hover over the type of information in new browsers, and the alt tags use the same thing in older browsers.

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

---

Headline

title attribute is a global attribute , which means that you can use it for all elements. In the general case (note that some elements (for example, the abbr element) have a special meaning), it is defined as:

The title attribute is advisory information for the [...]

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

alto

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

the value of the alt attribute represents the backup content of img elements and provides equivalent content for users and user agents who cannot process images or disable image loading.

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

---

Thus, the alt attribute is an alternative for the image: either you see the image, or you read the alternative text. The alt value should not be presented / presented as an addition to the image.

The title attribute provides additional information that will be provided both (to users who see the image and to users who read alternative text). However, you should not use the title attribute as the only means of information of importance, because ...

• ... a typical presentation is often hidden behind a tooltip (users don’t necessarily know that a tooltip is present at all because they don’t hang on all the elements)
• ... the keyboard or touch screen often do not see a tooltip because they cannot overhang
• ... screen readers often do not read / declare the value of title (in the default settings)

Answer 2

ALT: Alt text means an alternative source of information for those people who decide to turn off images in their browsers and those user agents who simply cannot "see" the images. He must describe what the image is and make these visitors interested in it. Without alt text, the image will be displayed as a blank icon: without alt

In Internet Explorer, Alt also appears when you hover over an image. In addition, Google has officially confirmed that it focuses mainly on alt text while trying to figure out what the image is.

Image is from alt, but the image is not displayed.

 <img src="a.png" alt="Ann Smarty"> 

Another image without alt and the image is not displayed.

 <img src="a.png"> 

Name: The name of the image (and the name of the element speaks for itself) must contain additional information and follow the rules of the usual name: it must be relevant, short, memorable and short (the heading "offers advisory information about the element for which it is set"). In FireFox and Opera, it appears when you hover over an image: an image with a title and image display.

 <img src="a.png" title="Optimize Images For Search Engines, Social Media"> 

More details: http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/