Design Tip:
Line Breaks In Title and ALT Text

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

We've published several Webmaster Tips that discuss the importance of ALT text descriptions and the many uses for the TITLE attribute on links and images. After reading them, many subscribers asked what seems to be a simple question. How can I include formatting information and line breaks inside TITLE and ALT attributes?

Unfortunately, there's no one simple answer. We have found some partial solutions though. Maybe one will work for you.

Line Breaks Inside HTML Code

Most people find the first solution by accident when they're coding their page. In some browsers, line breaks in the HTML source code display inside ALT and TITLE text - but only you use the ENTER key on the keyboard to begin a new line. Some people call this a "hard return."

So TITLE text like this:

<img src="Buster.jpg" height="250" width="128" 
  alt="Buster the Wonder Dog" 
    title="Buster is ready to play.
      Find him a toy!">

Would display like this in supporting browsers. Note the line break inside the TITLE text in the example code.

The same effect works with ALT text. You can format your ALT text to display on multiple lines if the image doesn't load:

<img src="WorldSalesGraph.gif" height="150" width="160"
  title="Worldwide sales increased" 
    alt="Worldwide sales increases:
	  1999: 20%
	  2000: 20%
	  2001: 20%">

ALT text with hard returns inside the tag displays like this in supporting browsers:

This technique works reliably Internet Explorer 5.x and up and in some versions of Mozilla. Opera doesn't support it and neither does Netscape. In fact, you can get some strange characters appearing in your ALT and TITLE text in those last two browsers

Note the unusual lines inside the TITLE text and the boxes that indicate where you placed the line breaks inside the code.

Even using this simple technique, you can't always predict how browsers will display your code. That's why it's best to thoroughly test your pages with Browser Photo. It's a quick, inexpensive way to view actual screen shots of your page in 16 different browser and operating system combinations.

Use DHTML To Create Small Pop-up Boxes

Your other option is to use DHTML techniques to create custom ALT and TITLE effects.

Dynamic HTML (DHTML) is a combination of JavaScript and Cascading Style Sheets (CSS). The two work together on a Web page to make the page more interactive and interesting to use.

The good thing about DHTML is its power and flexibility. You can:

The bad thing about DHTML is that the code to create these effects can sometimes be quite complex. They aren't for beginners.

But if you're feeling adventurous, we found two different approaches to the problem. Check out these online tutorials to see if either would work for your site.

Keep Text Clear And Concise

Remember that the basic function of TITLE and ALT attributes is to give the visitor information. Don't spend so much time trying to create cool special effects that you ignore the importance of the actual text content!

Be careful too about stuffing too much information into these attributes. The TITLE attribute displays when a visitor moves his mouse over the object, but it's only visible for a short time. If you've included several sentences in the text, chances are the box will disappear before the visitor finishes reading it.

Use these attributes wisely and place a few line breaks inside your HTML code if needed. It will increase the legibility of your ALT and TITLE text for some of your visitors and it won't break the page in non-supporting browsers.