Home / Articles / Programming languages / Markup languages / HTML & CSS / Alternative text in HTML

Alternative text in HTML

Alternative text in HTML
 
Alternative text in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Alternative text gives textual information about the picture if you disable image download in your web browser. Because image downloads take place after the browser receives the textual information about the image, the text appears before the image. And during the process of loading the text will be replaced by the image (fig. 1).

Alternative text that loads before the image

Fig. 1. Alternative text that loads before the image.

Browsers also display alternative text as a tooltip that appears when you move the mouse cursor over a image (fig. 2).

 Appearance of the tooltip

Fig. 2. Appearance of the tooltip.

Note: the appearance of the tooltip, for example its color, background, font and other parameters are specified in the configurations of the operating system and can not be changed in the HTML file.

Example 1. Adding alternate text.

<a href="index.php">
  <img src="home.gif" alt="Return to home page">
</a> 

Note: text in the alt parameter must be in quotes.

You can use line-breaks in the text and thus create multi-line tooltips. To do this, you need to set in the desired location of the code line breaks as shown in example 2. In this case, extra spaces must be removed.

Example 2. Creating multi-line alternative text.

<a href="index.php"><img src="home.gif" alt="Return 
to home page"></a>

In the example, after the word "Return" a line-break is set, as a result we get a tooltip that has two lines.

Note: some browsers do not completely support alternative text. For example, Firefox displays this text if the images have not yet loaded, but doesn't support the tooltip.


 

Read also

Graphics formats in HTML

Graphics formats in HTML

Image size in HTML

Image size in HTML

Inserting images in HTML

Inserting images in HTML

Aligning images in HTML

Aligning images in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation