HyperText Markup Language/Images

From Wikibooks, open books for an open world
< HyperText Markup Language
Jump to: navigation, search

Let us start with a quick minimum example:

<img src="turtleneck-sweater.jpeg" />

And let us also have a look at more extended example:

<img src="turtleneck-sweater.jpeg" alt="Photograph of a Turtleneck Sweater"
     title="Photograph of a Turtleneck Sweater" />

Images are mostly stored not directly in the HTML source, but rather in an external file. To place an image into an HTML source, use the img tag with the src attribute containing the URL of the image file. To support browsers that cannot render images, you can provide the alt attribute with a textual description of the image. To provide a tooltip to the image, use the title attribute.

The space before the /> in the examples is there on purpose. Some older browsers behave strangely if the space is omitted.

Placement[edit]

Per default, images are placed inline to its surroundings. To place the image as a block or float instead, you can use Cascading Style Sheets.

Clipboard

To do:
Show how to place images using CSS.

Alternative text and tooltip[edit]

The HTML specification requires that all images have an alt attribute. This is commonly known as alt text. Images can be split in to two categories:

  • those that add to the content of the page;
  • those that are purely decorative, e.g. spacers, fancy borders and bullets.

Decorative images should have empty alt text, i.e. alt="". Images used as bullets may use an asterisk, alt="*".

All other images should have meaningful alt text. Alt text is not a description of the image, use the title attribute for short descriptions or longdesc to link to long descriptions. Alt text is something that will be read instead of the image. For example,

 <img src="company_logo.gif" alt="???"> makes the best widgets in the world.

The alt text should be the company's name not the ever popular 'Our logo', which would give the sentence 'Our logo makes the best widgets in the world.' when read in a text only browser.

The alt attribute stands for alternate which non-graphic-capable browsers (such as Lynx) may use to better enable its user to understand the purpose of the image. Many browsers, such as Internet Explorer, incorrectly use the alt attribute' tag to produce image tooltips. However, the title attribute should actually be used for this. Other browsers such as Mozilla Firefox display tooltips only when title is used.

Width and height[edit]

To have an image appear smaller than it is in the external file, use the attributes width and height.

In addition, you can help web browsers layout your web pages more quickly by always supplying the width and height attributes. Make sure you give the correct values or your images will be distorted.

Clipboard

To do:
Discuss aspect ratio of width and height in case that only one of the two is specified.

All attributes[edit]

Above, we have covered some of the most important attributes of the img element. What follows is a list of all attributes that are allowed in the img element as specified in the HTML 4 DTD:

Attributes of IMG element
Attribute Description
src the URL of the image that should be displayed by the browser.
alt a short textual replacement for the image that may be used by the browser instead of showing the image, e.g. for blind users, users without a graphic-capable browser or users who have disabled image loading.
longdesc a URL that provides a long description of the image.
name for backwards compatibility, use id in new documents - the name of the image which may be used by scripting languages.
id the unique identifier for the image which may be used by scripting languages.
class assigns one or more CSS classes to this image to control styling
lang language information
dir text direction
title title of the image, which some browsers display in a hover box (tooltip), especially when the user holds his/her mouse steady over the image for a short time.
style in-line CSS information.
ismap (not yet written)
usemap (not yet written)
align deprecated, use CSS in new documents - alignment of the image i.e. bottom, middle, top, left or right.
width the width of the image, for bitmap images this should be given as a plain number, e.g. 200, which would result in a width of 200 pixels
height height of the image, see width for usage
border deprecated, use CSS in new documents - border width when image is linking to something, usually set to 0
hspace deprecated, use CSS in new documents
vspace deprecated, use CSS in new documents