Image title and alt Tags – What’s the Difference?

Image title and alt Tags – What’s the Difference?

Image title and alt Tags – What’s the Difference?

Almost all web designer are use image title and alt tags for better search ranking but many of them doesn’t understand what’s the difference between image title and image alt text and keep both same.

What is Image Title Tag?

In HTML if you want to give a title for your image, use image tag title attribute. When user mouse over on the image the text inside the title tag will display in a popup. Title text is also important for web accessibility (WCAG) for poor vision visitor who use screen reader. Screen reader will read the page text and when its come to an image, it will say Image: Title. So it’s important that your image title is relevant to your image.

how to add image Title tag in HTML

<img title=”” src=””http://www.example.com/wp-content/uploads/image.jpg”” alt=”” width=””300″” height=””199″” />

What is image Alt Tag?

Alt (or Alternative Text) is another attribute added to an image tag in HTML. if your image fails to load in a browser alt text appears inside the container. Alt text is also very important for SEO. When search engine crawlers try to gather data from your site it helps search engines understand what an image is about.

How to add image Alt tag in HTML

<img src=””http://www.example.com/wp-content/uploads/image.jpg”” alt=””alternate” width=””300″” height=””199″” />

You May Also Like

About Author

I’m a UX/UI Designer & Front End Developer with experience in WordPress, Web Design, HTML5/CSS3…

Get a quote

Personal Information
Project Information
- Services you require