Providing Alternate and Title Text for an Image
By Stephen Bucaro
The alt and title attributes are both used to display text related
to an image. The alt attribute has been around for a long time. Its purpose
is, when an image fails to load, to display text instead. An example of the use
of the alt attribute in an html image tag is shown below.
<img alt="Alt Text" src="imagename" />
Note the alt attribute does not work in Google's Chrome browser.
The title attribute is a general attribute that can be used with most
html element tags, such as links and divs. Its purpose is to display popup
text, commonly referred to as a "tool tip", when the user moves their mouse
pointer over the html element. An example of the use of the title attribute
in an html image tag is shown below.
<img title="Title Text" src="imagename" />
It's good practice to use both the alt and title attributes in your
image tags, as shown below.
<img alt="Alt Text" title="Title Text" border="0" width="100" height="100" src="imagename" />
Note in the example above that I also used the border, width and
height attributes. If you don't set the border attribute, the user's
browser will use its default border size, and all browsers do not use the same default
border size. If you don't set the width and height attributes, the
browser will need to read this information from the image file, and this will cause your
page to load slower.
Note in Internet Explorer, if the title attribute is not specified, it will
look for the alt attribute, and if that is specified it will display the
alt text instead.
More HTML Code:
• Form Input Labels
• HTML Text Tags Basics
• HTML abbr and acronym Tag
• Web Color Names Table
• Changing the Size of an Image on Your Webpage
• HTML5 Input Type - URL
• HTML Numbered or Ordered List
• HTML dfn Tag
• Text Input Box Basics
• HTML5 Slider Control
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
