Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Increase traffic.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Design Tip:
Line Breaks In Title and ALT Text

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

  
November 2003
Vol. 6, No. 18
 • Promotion Tip
 • Design Tip
 • CSS Tip
  

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:

  • Create objects that appear and disappear depending on user inputs
  • Produce complex dynamic menu systems
  • Move objects on the page in response to user inputs

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.