If I had a quarter for every website I inherited from a previous developer that had missing alt tags, I probably would be able to afford a posse of minions to serve me chocolate and coffee right now. Needless to say, I am without coffee and chocolate, minions, or a posse.

What are alt tags?

Very simply, alt tags hold text (or ‘alternate’) representations of the image. Well, you’re thinking, why on earth would one ever need THAT?

Alt tags are used for visually impaired visitors, who might use a screen reader.

In Internet Explorer (one gold star for them, at least), alt tags are used as a sort of tool-tip when you hover over an image that is inside a link tag. This might be helpful even for those that can see the image.

You can use alt tags to help improve your SEO. Especially if you’re sporting a big image that’s an important part of the page, you’ll want to be sure to say that this big blob of space that’s being hoarded by an image is actually something very relevant to your website. By using the alt tag, you help search engine spiders to understand that this space you’re filling with an image is relevant to your site content.

Image alt tags are also visible in cases where images don’t load. Maybe a user has a slow internet connection, or maybe you accidentally deleted the photo the image is linked to. If you’re sending out an email with an image in it, be forewarned – email clients today will generally ask your permission before loading images for security purposes. Before your recipient grants that permission, they’re only seeing the image alt tags.

Imagine my surprise today when I noticed the email that I knew to be legitimately from my credit card company was sending me a ‘Phishing Email’! Whoa. Block? Report? Delete? What negative repercussions such an image alt tag could have.

Where does the alt tag go?
The image alt tag should be inside the <img> tag, like this:

<img src=”../images/hobbit.jpg” alt=”The Hobbit” height=”300″ width=”300″>

If you want to be really meticulous about your code, the syntax inside the tag should be alphabetical, in other words, you would write your image tag like this:

<img alt=”The Hobbit” height=”300″ src=”../images/hobbit.jpg” width=”300″>

As meticulous as I can be with my code, this is too meticulous even for me. Practically speaking, I write image tags as they logically enter my head – source first (src), then alt, then height and width. It slows the browser down by the smallest micron of time when rendering, but I cherish my sanity much more than my browsers, so this is my method.