The <img> tag is used to embed images in a web page. This tag is essential for creating a visually appealing interface and conveying information through graphical content (such as images).
It is a self-contained tag (also called "self-closing" 🇺🇸 – meaning it closes on itself) and requires mandatory attributes like src (image source) and alt (alternative text).
Â
Structure and Syntax of the <img /> Tag
The <img> tag is an empty tag (it does not encapsulate other tags). It can be styled using the style attribute or through classes (class) and IDs (id), like most HTML tags.
Syntax
<img src="[URL]" alt="[DESCRIPTION]">The alt attribute defines the alternative text.
Although optional, this attribute is highly recommended for good search engine optimization (SEO) and to provide textual information for visually impaired users.
Â
Usage Example
<img
src="https://believemy.com/images/site/brand/believemy-new-logo-full-black.svg"
alt="Believemy Logo"
style="width: 300px"
>In this example, the image located at the URL specified in the src attribute is displayed. An alternative text is provided using the alt attribute, and the image is given a width of 300 pixels using the style attribute.
Try it yourself here:
It is possible to use this tag in two different forms:
<img>for its version valid with HTML5;<img />for its version valid with HTML5 as well as XHTML.
It is therefore not uncommon to see one or the other of the syntaxes, both being widely used.
Â
Attributes
Here are the main attributes for the <img> tag:
| Attribute | Description | Possible Value |
|---|---|---|
src | Specifies the image path or URL. | Relative or absolute path. |
alt | Provides a textual description of the image for screen readers or when the image cannot load. | Descriptive text. |
width | Defines the image width. | Value in pixels or percentage. |
height | Defines the image height. | Value in pixels or percentage. |
title | Displays a tooltip when hovering over the image. | Descriptive text. |
loading | Controls the loading behavior of the image. | lazy, eager, or auto. |
srcset | Provides multiple sources for loading images optimized for different resolutions. | List of sources with dimensions. |
sizes | Indicates the display width of the image for browsers. | Width in CSS units (e.g., 100vw). |
referrerpolicy | Sets the HTTP referrer policy for image requests. | no-referrer, origin, strict-origin, etc. |
usemap | Associates the image with a map defined by the <map> tag. | Map name (e.g., #map-name). |
crossorigin | Defines the CORS policy for the image. | anonymous, use-credentials. |
Â
Browser Compatibility
The <img> tag is compatible with all modern browsers. However, some advanced attributes, such as loading or referrerpolicy, may not be supported in older versions.
| Browser | General Compatibility | Notes |
|---|---|---|
| Chrome | Yes | Supports loading=lazy. |
| Firefox | Yes | Supports srcset. |
| Safari | Yes | Beware of behavior with modern image formats (e.g., AVIF). |
| Edge | Yes | Â |
| Internet Explorer 11 | Partially | No support for srcset. |