Alternative text - image alt text HTML

The term "alt text" (alternative text) refers to an attribute in HTML code applied to images.

This attribute is one of many on a list of tasks you should do when building a website for three very important reasons:

1) using alt text helps with search engine optimisation
2) people with disabilities are assisted by the use of alt text, making your website more accessible
3) the alt text attribute is required if you are to comply with coding standards (W3C)

Applying the alt text attribute is easy, as shown in the example below:

<img src="/images/mercedes-cls350.jpg" width="300" height="200" alt="Mercedes CLS 350" />

This code above shows the source/path of the image (img src="/image/), the name of the image file (mercedes-cls350.jpg), the height and width, and finally the alt text describing the image. Please note the above code shows the XHTML example with the closed img tag, as opposed to HTML 4 where no close is required (<something /> versus <something>). In the image above, I have also used a <title> which looks like this: title="Mercedes CLS 350" (place your mouse over the image to view).

Search Engine Optimisation

At this stage, Google cannot read what is in an image. If you have a photo of a car for example, Google has no idea it is a car. If you add descriptive text, Google can read that text, and assign a certain amount weight to the key phrase or word you use.

The file name is important also, and easy to alter. If the file name of you car photo is (eg) DSC2006.jpg, change the file name to something more relevant, such as motor-car.jpg, or even better, the actual make and/or model of the car (eg) mercedes-cls350.jpg (if of course your car photo is of a Mercedes CLS 350).

Accessibility

People who are vision impaired may use text-to-speech readers to browse your website. The reader program will pick up the alt text and tell the vision impaired visitor that there is an image of a car, and what sort of car it is.

Validated Coding

It is debatable whether validated coding may assist in search engine optimisation, however in my experience, that is the case. If a search engine crawler can find its way around your website and pages easier, surely complying with standards is worth the effort?

And, by complying with standards, it means the majority of people (who are familiar with valid coding) will be able to follow the HTML markup easier. Besides, it looks "cleaner", and is a lot neater and easier to work with.

To conclude, follow these basic rules:

Rename your image files to be relevant to the image - 2 or 3 words at most.

Use alt text to give your image readable and search engine friendly relevant text.

Try to use validated markup code (HTML, XHTML, etc).

You can check the validation for both your web pages and cascading style sheets (CSS) at the W3C website's HTML Validator and CSS Validator.

Has this article been helpful or interesting?
Why not share it with others? Simply place your mouse over the buttons below to select from a range of social media websites, and thanks for sharing.



  

---

justweb^® Newsletter Information

The articles throughout our website are ©2007-2025 justweb^® and may not be reproduced without first seeking permission. If you want to be updated on a regular basis, please subscribe to our RSS feed.

Subscribe to the justweb^® feed by email:

DISCLAIMER:
The content provided in this article is provided as is, and as such does not carry a warranty or guarantee by justweb^® that it will provide results discussed. The article content provided is intended for informational purposes in order to introduce readers to new ideas, concepts, and/or reviews of new products and/or services. It is incumbent upon the reader to do further research before acting upon any advice or suggestions in this article. It is a condition of reading our articles that justweb^® will not be held liable for any negative consequences that may result from the implementation of any information or purchases made as a result of reading this article.