The HTMLtag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. Thetag creates a holding space for the referenced image.

Thetag is empty, it contains attributes only, and does not have a closing tag.

Thetag has two required attributes:

src - Specifies the path to the image

alt - Specifies an alternate text for the image

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

Note: 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 broken link icon and the alt text are shown if the browser cannot find the image.

The required 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).

The value of the alt attribute should describe the image:

You can use the style attribute to specify the width and height of an image.

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

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

HTML allows animated GIFs:

To use an image as a link, put thetag inside the tag:

Use the CSS float property to let the image float to the right or to the left of a text:

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

p { background-image: url('img_girl.jpg');}body { background-image: url('img_girl.jpg');}body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat;}Background Cover

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

The HTML element gives web developers more flexibility in specifying image resources.

The element contains one or more elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.

Each element has a media attribute that defines when the image is the most suitable.