Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML img tag: title attribute vs. alt attribute?

People also ask

What is the difference between alt tag and title tag?

In the context of the image tag, alt text is used to describe visual elements to users who can't see them, either because the image failed to load or because they are using a screen-reader. The image title attribute is only visible on mouse-over and displays just the image title.

Can alt and title tags be the same?

Almost always. Alt tags are supposed to convey the same information as the image. (essentially, alt data is just inline document text) Titles describe the image.

Can alt text be the same as image title?

When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image.

What are alt attributes and title attributes?

The alt and title attributes of an image are commonly referred to as 'alt tag' or 'alt text', and 'title tag'. (Technically they're not tags, they're attributes, but you don't need to worry about that). These attributes allow you to add textual descriptions of your image, which can help with both SEO and accessibility.


They are used for different things. The alt attribute is used instead of the image. If the image can't be shown, and in screen readers.

The title attribute is shown along with the image, typically as a hover tooltip.

One should not be used "instead" of the other. Each should be used properly, to do the things they were designed to do.


I'd go for both. Title will show a nice tooltip in all browsers and alt will give a description when browsing in a browser with no images.

That said, I'd love to see some stats of how many "surfers" out there going to a "store" to browse merchandise actually have images turned off or are using a browser that doesn't support images. I think the days where 90% of the population is using a 28k modem to connect to the InterWeb is looooong over.


alt and title are for different things, as already mentioned. While the title attribute will provide a tooltip, alt is also an important attribute, since it specifies text to be displayed if the image can't be displayed. (And in some browsers, such as firefox, you'll also see this text while the image loads)

Another point that I feel should be made is that the alt attribute is required to validate as an XHTML document, whereas the title attribute is just an "extra option," as it were.


That's because they serve different purposes and they both should be used not just one over the other.

The "alt" is for what you guys already said, so you can see what's the image it's all about if the image can't be displayed (for whatever reason), it also allows visually impaired people to understand what's the image about.

The "title" attribute is the correct one to show the tooltip with a title for the image.


In my opinion should the alt text always describe what is visible in the picture, for the case that the image is not displayed.

alt = text [CS] For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.

w3.org


I believe alt is required for strict XHTML compliance.

As others have noted, title is for tooltips (nice to have), alt is for accessibility. Nothing wrong with using both, but alt should always be there.