HTML Images

Images can improve the design and the appearance of a web page. In HTML, images are defined with the <img> tag.

The src attribute specifies the path (URL) to the image.

When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon.

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

You can use the width and height attributes to specify the size of an image. The values are specified in pixels by default.

Alternatively, you can use the style attribute. This prevents styles from being overridden by other CSS rules:

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Try adding an image to your HTML document that links to an external website. Make sure to include an alt attribute that describes exactly what is happening in the image.

A: If width and height are provided, the browser reserves the required space for the image while the page is loading. Without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space. The effect is that the page layout will change during loading (layout shift), which is a bad user experience.

A: An empty tag is an element that does not have an end tag and cannot contain any child content. The <img> tag is an empty tag because it only contains attributes and does not have a closing </img> tag.