HTML Images

Using HTML, you can display images in a document.

Example

Insert Image
This example demonstrates how to display images on a web page.
Inserting Images from Different Locations
This example demonstrates how to display images from other folders or servers on a web page.

(More examples can be found at the bottom of this page)

Image Tag (<img>) and Source Attribute (Src)

In HTML, images are defined by the <img> tag.

<img> is an empty tag, which means it only contains attributes and does not have a closing tag.

To display an image on the page, you need to use the source attribute (src). src means "source". The value of the source attribute is the URL address of the image.

The syntax for defining an image is:

<img src="url" />

URL refers to the location where the image is stored. If an image named "boat.gif" is located in the "images" directory of www.codew3c.com, then its URL is http://www.codew3c.com/images/boat.gif.

The browser displays the image at the location where the image tag appears in the document. If you place the image tag between two paragraphs, the browser will first display the first paragraph, then the image, and finally the second paragraph.

Replace Text Attribute (Alt)

The alt attribute is used to define a string of alternate text for images. The value of the alternative text attribute is user-defined.

<img src="boat.gif" alt="Big Boat">

When a browser cannot load an image, the alternative text attribute can inform readers of the information they have lost. At this time, the browser will display this alternative text instead of the image. It is a good practice to add alternative text attributes to all images on the page, which helps to display information better and is very useful for those who use text-only browsers.

Basic Considerations - Useful Tips:

If an HTML file contains ten images, then to display this page correctly, 11 files need to be loaded. Loading images takes time, so our suggestion is: use images sparingly.

More Examples

Background Image
This example demonstrates how to add a background image to an HTML page.
Align Images
This example demonstrates how to align images in text.
Float Image
This example demonstrates how to float an image to the left or right of a paragraph.
Adjust Image Size
This example demonstrates how to adjust the size of an image.
Display Alternative Text for Images
This example demonstrates how to display alternative text for images. When an image cannot be loaded in the browser, the alternative text attribute tells readers what information is lost. It is a good practice to add alternative text attributes to all images on the page.
Make Image Links
This example demonstrates how to use an image as a link.
Create Image Maps
This example shows how to create an image map with clickable areas. Each area is a hyperlink.
Convert an image to an image map
This example shows how to set a normal image as an image map.

Image Tag

Tag Description
<img> Define images.
<map> Define image maps.
<area> Define clickable areas within image maps.