Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Quick Tip: Remember to Style Your ALT Text

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

This post is part of a series called Strange and Unusual HTML Tags.
Meta Tags and SEO
Getting Started With Scalable Vector Graphics (SVG)
This post is part of a series called Mastering HTML Email.
Build an HTML Email Template From Scratch
The Complete Guide to Designing for Email

The alt attribute within an <img> tag provides alternative content for users who can't download images, or who have images turned off altogether. We use this attribute all the time to make our content more accessible, but have you ever considered what it actually looks like?

We're going to use the email template we built in a previous tutorial as an example, but the principles apply just as well to browser-based web design.

<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

If we take a look at our file with images turned off, this is what it looks like:

altTagsBefore

Clearly the ALT text is unattractive — especially the links. We can do a few things to jazz it up.

For the main heading, we’re going to make the text much larger and change it to our dark blue instead of black. We do this by adding styles to the parent element (in this case a cell). These styles will then be applied to the alt tags within that cell.

This is our cell:

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
 <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

We’ll add some text styling so it looks like this:

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;">
 <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

And we'll style our social media links so that they become white:

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
   <a href="http://www.twitter.com/" style="color: #ffffff;">
    <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
   </a>
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
   <a href="http://www.twitter.com/" style="color: #ffffff;">
    <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
   </a>
  </td>
 </tr>
</table>
altTagsAfter

Simple as that! Now we can be confident that our email will display well, even with images turned off.

Advertisement