HTML <img> Tag

The <img> tag is used to insert an image into an HTML document. The image itself isn’t being inserted directly into the document, the browser loads it from the source specified in the <img> tag.

There are two required attributes for <img> element: src, which is used to show the image source, and alt, which defines an alternate text for the image.

To make HTML images clickable you should place the <img> tag inside the <a> tag, which is used for inserting links.

Syntax

The <img> is an empty element, which means that the closing tag isn’t required.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Result

Attributes

The src (source) attribute is required, as it indicates the path to the image. The src attribute value can be either the file name or its URL.

The alt attribute is required for the <img> tag too. Its value is a descriptive text displayed in the browser before the image is loaded. The browser also shows this text when you hover over the image.

We recommend including keywords in alternate text. This will improve the ranking of the website in search engines.

Attributes

Attribute Value Description
align left
right
top
bottom
middle
Defines the alignment of the image in reference to surrounding elements.
Not supported in HTML5.
alt text Defines the alternate text for the image.
border pixels Defines the width of the border around the image.
Not supported in HTML5.
crossorigin
Defines, whether the CORS (a technology, that allows a web page to access resources from another domain) is used when loading the image. Images, uploaded via CORS, can be used in the <canvas> element without limiting the functionality of the latter.
anonymous CORS requests from this element will not pass credentials
use-credentials CORS requests from this element will pass credentials.
New attribute in HTML5.
height pixels Defines the height of the image.
hspace pixels Defines spaces at the left and right sides of the image.
Not supported in HTML5.
ismap ismap Specifies that the contents of the tag is a server-side image map.
longdesc URL Specifies the URL address with a detailed description of the image (For a short description of the image, use the alt attribute.
Not supported in HTML5.
src URL Defines the source of the image.
usemap #mapname Specifies a link to the <map> element, which contains the coordinates for the client map image.
vspace pixels Defines spaces at the top and bottom of the image.
Not supported in HTML5.
width pixels Defines the width of the image.

The <img> tag supports the Global Attributes and the Event Attributes.

Browser support