HTML Images

Examples

Norwegian Mountain Trip

Try it yourself »

Online Instance

This example
demonstrates how to display an image in a web page.

This example demonstrates how to insert
images from other folders or servers into a web page.

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

HTML Images – Image Tag ( <img> ) and Source Attribute ( Src )

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

<img> is an empty tag, meaning that it contains only attributes and has no closing tag.

To display an image on a 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" alt="some_text">

The URL refers to the location where the image is stored. If an image named “pulpit.jpg” is located in the images directory of www.runoob.com, its URL is http://www.it-res.com/images/pulpit.jpg。

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

HTML Image – Alt Attribute

The alt attribute is used to define an alternative text string for an image.

The value of the replacement text property is user-defined.

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

The alt text attribute tells readers what they’re missing when a browser can’t load an image. In this case, the browser will display the alternative text instead of the image. It’s a good idea to add alt text attributes to all images on your page; this helps display the information better and is especially useful for people using text-only browsers.

HTML Image – Set the image height and width

The height and width attributes are used to set the height and width of the image.

The default unit of property value is pixels:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

Tip: It’s a good idea to specify the height and width of your images. If you specify the height and width for your images, they will be loaded at the specified size. If you don’t specify the size for your images, loading them may disrupt the overall layout of your HTML page.

Basic Notes – Useful Tips:

Note: If an HTML file contains ten images, then in order to display the page correctly, 11 files need to be loaded. Loading images takes time, so our advice is: use images with caution.

Note: When loading a page, pay attention to the path of the image inserted into the page. If the image location is not set correctly, the browser cannot load the image and the image tag will display a broken image.

More examples

This example
demonstrates how to arrange images within text.

This example
demonstrates how to float an image to the left or right of a paragraph.

This example
demonstrates how to use an image as a link.

This example shows how to create an image
map with clickable areas. Each area is a hyperlink.

HTML image tag