HTML IMG Tag | Insert an image into HTML

In this article, you will learn about the IMG tag, an HTML tag, which is used when we need to insert an image into a web page. So without any further delay, let's start.

HTML allows you to insert an image into a web page with the help of the IMG tag. This tag uses several attributes, such as src, id, lang, dir, and alt. Out of all the attributes of the IMG tag, only the src attribute is necessary.

Please note: Attributes are used to change the behavior of an HTML element.

Following is a syntax to use when we need to insert an image into HTML.

<IMG src="image_url" alt="alternate_text">

In place of "image_url," provide the image file name if the image and HTML file are both in the same directory, or the full or relative path to the image file if the image and HTML file are not in the same directory. If the image fails to load, the "alternate_text" is displayed.

Attributes of the IMG tag

The following table describes the attributes of the IMG tag:

Attribute	Description
id	assigns a unique identifier to a tag. This identifier must be used only once in a document.
class	assigns a single name or a set of class names to a tag. However, one or more tags can be assigned with the same class name.
lang	specifies the base language used for the IMG tag.
dir	assigns a direction to the entire or a section of an HTML file.
title	describes the purpose of using the IMG tag.
style	applies inline CSS style to individual tags in an HTML file.
src	specifies the URL or the location of the image.
alt	specifies the alternate text to be used if the web browser cannot render the image.
height	specifies the height of the image.
width	specifies the width of the image.
ismap	indicates that the image is used as an image map.
usemap	associating a tag with an image map.

Only one of the IMG tag's above-mentioned attributes, "src," is required. That is, with the exception of the "src" attribute, all of the attributes are optional. However, I recommend that you make the "src" and "alt" attributes mandatory.

HTML alt Attribute

As already stated, the "alt" attribute of the "img" tag is used to display the alternative text if the image load fails. For example:

<!DOCTYPE html>
<html>
<body>
   
   <img src="none.jpg" alt="top 5 programming languages">

</body>
</html>

Since the file "none.jpg" is not available, the text "Top 5 programming languages" will be displayed. Here is its sample output for your understanding:

There is an icon (as indicated in the above figure by the red arrow) that will be displayed by the web browser before the "alt" text to inform the user that this is not the normal text but rather the alternative text of an image file.

Set the width and height of the image in HTML

We have two options to set the size of the image: one using directly the "width" and "height" attributes, and the other using the "style" attribute. Let me first create an example that uses the "width" and "height" attributes to set the size of the image.

HTML Code

<!DOCTYPE html>
<html>
<body>
   
   <img src="https://codescracker.com/html/images/html5.jpg" height="120" width="60" alt="html5">

</body>
</html>

Output

In the above example, in place of "https://codescracker.com/html/images/html5.jpg," I can also use "/html/images/html5.jpg." The first one is the complete path of the image file, whereas the second one is the relative path of the image file.

Please keep in mind that the values you enter for the "width" and "height" attributes are in pixels (px).

And the following example used the "style" attribute to do the same job as the previous example:

<!DOCTYPE html>
<html>
<body>
   
   <img src="/html/images/html5.jpg" style="height: 120px; width: 60px;" alt="html5">

</body>
</html>

You will get the same output as the previous example's output.

Image alignment in HTML

You can use the "style" attribute to align the image to the left, right, center, top, or bottom of the web page. For example:

<!DOCTYPE html>
<html>
<body>
   
   <img src="/html/images/html5.jpg" style="display: block; width: 120px; margin: 40px auto;" alt="html5">

</body>
</html>

The output produced by the above example of centering the image on the web is shown in the snapshot given below:

The "display: block" creates a block-level container. It makes the element behave like the P element. A block-level element starts with a new line and acquires the whole width of that line. To learn in detail, refer to the separate tutorial on the topic "CSS display."

The "margin: 40px auto" property is used to add a 40px top and bottom margin, as well as an equal left and right margin. Essentially, I used this code to center the image horizontally, with 40px margins on the top and bottom.

HTML Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!