In this section, we will learn how we can bring images into an HTML document.

Image in HTML: How to HTML an Image?

Using HTML, we can insert image as well! To do that, we use the <img> element.

This element has only a single tag and within that tag we have an attribute called src that takes the address of the target image we want to add to the document.

Alright, let’s move on and see the syntax of this element, then we will continue our discussion related to images in HTML.

HTML <img> Tag: Add Image in HTML

This is how we use the <img> element:

<img srt = “image-address”>

As you can see, there’s no closing tag for the <img> element. There’s one main attribute called `src` that we need to set an image address for it (either an absolute or a relative URL address) and when browsers reached to this element, they will send a request to the specified URL to get the image back and load it on the page.

Note: there are other important attributes related to this element and as we go along, we will explain those attributes as well.

Example: linking an image in HTML

See the Pen linking an image in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML <img> Tag: src Attribute

In the last example, the address of the `src` attribute is a relative URL. The specified address is basically telling the browser that there’s a folder named `photos` in the same directory as the one that the current page is loaded from and inside that, there’s an image called `field.jpg` and that’s the file we want to be loaded on the page.

HTML <img> Tag: alt Attribute

The `alt` attribute stands for alternative and it’s a place where we put a string description related to the image being loaded. For example, if the image is a field with grass and the blue sky, then the value of the `alt` attribute becomes “field with grass and blue sky”.

Search engines like Google thus use this description to learn more about the target image and perhaps will load that image when a user queries the same string value. So the image becomes part of the result for the users as well (which is a good sign of taking traffics from search engines).

Also, note that if for whatever reason our image didn’t get displayed on the page, the text of the alt attribute will appear instead.

Example: using alt attribute in HTML <img> tag

See the Pen using alt attribute in HTML <img> tag by Omid Dehghan (@odchan1) on CodePen.

How to Change the Image Size in HTML?

By default, if we don’t set a height and width for an image, it will be displayed on the page, taking its default width and height! For example, if the width and height are equal to 500px to 300px respectively, then the displayed image on the page will be of the same dimension.

But HTML has provided two attributes here called width and height by which we can change the width and height of an image to any dimension we deemed necessary.

Example: changing the size of an image with height and width attributes in HTML

See the Pen changing the size of an image with height and width attributes in HTML by Omid Dehghan (@odchan1) on CodePen.