HTML CSS

Online examples

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

Insert pictures from different locations
This example demonstrates how to display pictures from other folders or servers on a web page.

(You can find more examples at the bottom of this page.)

HTML image-image tag (<img>) and source attribute (Src)

In HTML, the image is defined by the <img> tag.

<img> is an empty tag, which means that it only contains attributes and there is no 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 " alt=" some_text ">

URL refers to the location where the image is stored. If the image named “testlogo.jpg” is located in the images directory of www.hackerthink.com, then its URL is https://hackerthink.com/images/testlogo.jpg .

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

HTML image-Alt attribute

The alt attribute is used to define a string of alternative text for the image.

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

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

When the browser fails to load the image, the replacement text attribute tells the reader the information they have lost. At this point, the browser will display this alternative text instead of an image. It is a good habit to add alternate text attributes to the images on the page, which helps to better display the information, and is very useful for those who use plain text browsers.

HTML image-set the height and width of the image

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

The default unit of the attribute value is pixel:

<img src="testlogo.jpg" alt="test logo" width="304" height="228">

Tip: It is a good habit to specify the height and width of an image. If the image has a specified height and width, the specified size will be retained when the page loads. If the size of the image is not specified, the overall layout of the HTML page may be destroyed when the page is loaded.

Basic notes-useful tips:

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

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

More examples

Arrange pictures
This example demonstrates how to arrange images in text.

Floating image
This example demonstrates how to make the image float to the left or right of the paragraph.

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

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

HTML image tag

Label Description
<img>
Define image
<map>
Define image map
<area>
Define the clickable area in the image map