leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML images

Estimated reading: 3 minutes 40 views

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

In HTML, images are defined by <img> tags.

<img> is an empty tag, which means, it only contains attributes and has no closing tags.

To display an image on the page, you need to use the source attribute (src). src refers to “source”. The value of the source property 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 in the image’s directory of www.coding180.com, its URL is https://www.coding180.com/images/pulpit.jpg.

The browser displays the image where the image tag appears in the document. If you put an 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 a string of alternate text for the image.

The value of the Replace Text property is user-defined.

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

When the browser can’t load the image, the alt-text attribute tells readers what information they’re missing. At this point, the browser will display this alternate text instead of the image. It is a good practice to add alt text attributes to images on the page to help display the information better and is very useful for those using plain text browsers.


HTML Image – Set the height and width of the image

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

The default unit for property values ​​is pixels:

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

Tip: It is a good practice to specify the height and width of an image. If the image has a specified height and width, the specified dimensions are retained when the page loads. If you do not specify the size of the image, it may break the overall layout of the HTML page when the page is loaded.


Basic Notes – Helpful Tips:

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

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

HTML image tag

Labes (Tag)Description
<img>define image
<map>Define an image map
<area>Define clickable areas in an image map

Leave a Comment

CONTENTS