HTML image


May 02, 2021 11:07 HTML


Table of contents


HTML image


Define <img> HTML page using the hashtag. <img> properties: src alt .

<h2>挪威山旅行</h2>

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock">


Try it out . . .

HTML image

Online instance


Insert the image
This example shows how to display an image in a Web page.

Insert pictures from different locations
This example shows how to display pictures of other folders or servers into a Web page.

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


HTML Images - Image Tags (lt;img)) and Source Properties (Src)


In HTML, the image is <img> by the label.

<img> it contains only properties and does not close the label.

To display an image on a page, you need to use the source src src "source". The value of the source property is the URL address of the image.

The syntax that defines an image is:

<img src="url" alt="some_text">

The URL refers to where the image is stored. If an image named ".gif" is in the images directory of the www.w3cschool.cn, its URL is //www.w3cschool.cn/images/boat.gif.

The browser displays the image where the image label appears in the document. If you place an image label between two paragraphs, the browser displays the first paragraph, then the picture, and the second paragraph.


HTML image - Alt property


alt property is used to define a string of pre-prepared replaceable text for the image. Practice how to use the alt in Programming Testing.

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

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

When the browser is unable to load the image, the replacement text property tells the reader what information they have lost. T he browser displays this alternative text instead of the image. It's a good habit to add replacement text properties to images on the page, which helps to display information better and is useful for those who use plain text browsers.


HTML Image - Sets the height and width of the image


height (height) and width properties are used to set the height and width of the image. You can resize an image in a programming test.

The default unit of property values is pixels:

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

Tip: A good habit of specifying the height and width of an image. I f the image specifies a height width, the specified size is retained when the page loads. If you do not specify the size of the picture, loading the page can break the overall layout of the HTML page.


Set the image border


In <img> border border to specify the border weight in pixels. A thickness of 0 indicates that there is no border around the picture.

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">


Set the image alignment


By default, the image appears as left-hand alignment on the page, and in <img> can use the align property to set the alignment of the image: center (center) right (right).

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">


Basic considerations - helpful tips:


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

Note: When loading a page, pay attention to the path to insert the page image, if the location of the image is not set correctly, the browser can not load the picture, the image label will display a broken picture.

HTML image

More instances


Arrange the pictures
This example shows how to arrange images in text.

Floating image
This example shows how to float a picture to the left or right of a paragraph.

Set up an image link
This example shows 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 label


标签 描述
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域