The tag is used to embed an image in an HTML page.

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

The tag has two required attributes:

src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Tip: To link an image to another document, simply nest the tag inside an tag (see example below).

How to create HTML <img> Tag

How to insert an image

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

Which browser will support for HTML <img> Tag

Attributes for HTML <img> Tag

Attribute	Value	Description
alt	text	Specifies an alternate text for an image
crossorigin	anonymous use-credentials	Allow images from third-party sites that allow cross-origin access to be used with canvas
height	pixels	Specifies the height of an image
ismap	ismap	Specifies an image as a server-side image map
loading	eager lazy	Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdesc	URL	Specifies a URL to a detailed description of an image
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies which referrer information to use when fetching an image
sizes	sizes	Specifies image sizes for different page layouts
src	URL	Specifies the path to the image
srcset	URL-list	Specifies a list of image files to use in different situations
usemap	#mapname	Specifies an image as a client-side image map
width	pixels	Specifies the width of an image

How to add Align image (with CSS)

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:middle">
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="float:right">
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="float:left">

Output should be:

How to Add image border (with CSS):

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="border:5px solid black">

Output should be:

How to Add left and right margins to image (with CSS)

See the Example

index.html

Example: HTML

<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42"> This is some text. This is some text. This is some text.</p>

<h2>Image with left and right margins</h2>
<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">This is some text. This is some text. This is some text.</p>

Output should be:

How to Add top and bottom margins to image (with CSS)

See the Example

index.html

Example: HTML

<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42"> This is some text. This is some text. This is some text.</p>

<h2>Image with top and bottom margins</h2>
<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">This is some text. This is some text. This is some text.</p>

Output should be:

How to insert images from another folder or from another web site

See the Example

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Stickman" width="24" height="39">

<p>Insert an image from a web site:</p>
<img src="https://horje.com/avatar.png" alt="Lamp" width="32" height="32">

Output should be:

How to add a hyperlink to an image

See The Example

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>Add a hyperlink to an image</h1>

<p><a href="https://horje.com">
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132">
</a></p>

</body>
</html>

Output should be:

How to create an image map, with clickable regions. Each region is a hyperlink

See the example

index.html

Example: HTML

<img src="https://horje.com/uploads/demo/2024-02-03-15-39-40-screenshot_2024-02-03_at_21-36-38_workplace.jpg_(jpeg_image_400_%C3%97_379_pixels).png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://horje.com/learn/684/what-is-html-img-tag">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://horje.com/learn/684/what-is-html-img-tag">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Output should be:

How to set Default CSS Settings for HTML <img> Tag

See the Example

index.html

Example: HTML

<style>
img {
  display: inline-block;
}
</style>
<p>Some text <img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42"> some text.</p>

Output should be:

How to add HTML <img> alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The alt attribute provides alternative information for an image if a 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).

Tip: To create a tooltip for an image, use the title attribute!

Browsers Support

Syntax

Attribute Values

Value	Description
text	Specifies an alternate text for an image. Guidelines for the alt text: The text should describe the image if the image contains information The text should explain where the link goes if the image is inside an <a> element Use alt="" if the image is only for decoration

Value

Description

text

Specifies an alternate text for an image.

Guidelines for the alt text:

The text should describe the image if the image contains information
The text should explain where the link goes if the image is inside an <a> element
Use alt="" if the image is only for decoration

An image with an alternate text specified.

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

How to add HTML <img> height Attribute

The height attribute specifies the height of an image, in pixels.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.

Browser Support

Syntax

Attribute Values

Value	Description
pixels	The height in pixels (e.g. height="100")

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

How to HTML <img> ismap Attribute

The ismap attribute is a boolean attribute.

When present, it specifies that the image is part of a server-side image map (an image map is an image with clickable areas).

When clicking on a server-side image map, the click coordinates are sent to the server as a URL query string.

Note: The ismap attribute is allowed only if the <img> element is a descendant of an <a> element with a valid href attribute.

Browser Support

Syntax

index.html

Example: HTML

<a href="/action_page.php">
  <img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" ismap>
</a>

Output should be:

How to add HTML <img> loading Attribute

Add lazy loading to images below the fold:

he loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.

Tip: Add loading="lazy" only to images which are positioned below the fold.

Browser Support

Attribute Values

Value	Description
eager	Default. Loads an image immediately
lazy	Defer loading of images until some conditions are met

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The img loading attribute</h1>

<!-- visible in viewport -->
<img src="https://horje.com/avatar.png" alt="Wedding" style="width:100%">
<img src="https://horje.com/avatar.png" alt="Rocks" style="width:100%">
 
<!-- off-screen images -->
<img src="https://horje.com/avatar.png" alt="Paris" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Nature" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Underwater" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Ocean" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Mountains" style="width:100%" loading="lazy">

</body>
</html>

Output should be:

How to add HTML <img> longdesc Attribute

The longdesc attribute specifies a hyperlink to a detailed description of an image.

Several examples of how to use the longdesc attribute.

Browser Support

Syntax

Attribute Values

Value	Description
string	A hyperlink to a detailed description of an image. Possible values: An id to another element An absolute URL - points to another web site (like longdesc="http://www.example.com/description.txt") A relative URL - points to a file within a web site (like longdesc="description.txt")

Value

Description

string

A hyperlink to a detailed description of an image.

Possible values:

An id to another element
An absolute URL - points to another web site (like longdesc="http://www.example.com/description.txt")
A relative URL - points to a file within a web site (like longdesc="description.txt")

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The img longdesc attribute</h1>

<!-- The description is on the same page as the image -->
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" longdesc="#w3htmlExplained">

<!-- The description is in an external page -->
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" longdesc="w3html.txt">

<!-- The description is one of several within an external page -->
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" longdesc="http://example.com/desc#item3">

<!-- The description is included in a data:URI -->
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20Logo%3C/title%3E%3C/head%3E%3Cbody%3E%3Cp%3ESome%20description%20goes%20here%3C/body%3E%3C/html%3E">


<div id="w3htmlExplained">
  <h2>Image https://horje.com/avatar.png</h2>
  <p>Description of the image...</p>
</div>

</body>
</html>

Output should be:

How to add HTML <img> referrerpolicy Attribute

Set the referrerpolicy for an image:

The referrerpolicy attribute specifies which referrer information to use when fetching an image.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

Attribute Values

Value	Description
no-referrer	No referrer information is sent
no-referrer-when-downgrade	Default. The referrer header will not be sent to origins without HTTPS
origin	Sends the origin (scheme, host, and port) of the document
origin-when-cross-origin	For cross-origin requests: Send only scheme, host, and port. For same-origin requests: Also include the path
unsafe-url	Send origin, path and query string (but not fragment, password, or username). This value is considered unsafe

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Some image" referrerpolicy="no-referrer">

How to add HTML <img> Size Attribute

An image with a height of 600 pixels and a width of 500 pixels:

The width attribute specifies the width of an image, in pixels.

Browser Support

Syntax

Attribute Values

Value	Description
pixels	The width in pixels (e.g. width="100")

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

How to add HTML <img> crossorigin Attribute

The crossorigin attribute on an <img> tag specifies that CORS is supported when loading an image from a third party server or domain.

CORS is a standard mechanism used to retrieve files from other domains.

index.html

Example: HTML

<img crossorigin="anonymous" src="https://horje.com/avatar.png" alt="Van Gogh, self-portrait">

Output should be:

How to add HTML <img> src Attribute

An image is marked up as follows.

The required src attribute specifies the URL of the image.

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://horje.com/avatar.png".

Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

Note: A broken link icon and the alt text are shown if the browser cannot find the image.

Browser Support

Syntax

Attribute Values

Value	Description
URL	The URL of the image. Possible values: An absolute URL - points to another web site (like src="http://www.example.com/image.gif") A relative URL - points to a file within a web site (like src="image.gif")

Value

Description

URL

The URL of the image.

Possible values:

An absolute URL - points to another web site (like src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like src="image.gif")

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

How to add HTML <img> srcset Attribute

The srcset attribute on an <img> tag specifies multiple image resources (URLs) for the img element.

Together with the sizes attribute they create responsive images that adjust according to browser conditions.

A srcset attribute on an <img> element.
Resizing the browser will adjust the image file used.

index.html

Example: HTML

<img srcset="https://horje.com/avatar.png 120w,
             https://horje.com/avatar.png 193w,
             https://horje.com/avatar.png 278w"
     sizes="(max-width: 710px) 120px,
            (max-width: 991px) 193px,
            278px">

Output should be:

How to add HTML <img> usemap Attribute

An image map, with clickable areas.

The usemap attribute specifies an image as a client-side image map (an image map is an image with clickable areas).

The usemap attribute is associated with a <map> element's name attribute, and creates a relationship between the <img> and the <map>.

Note: The usemap attribute cannot be used if the <img> element is a descendant of an <a> or <button> element.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="https://horje.com/avatar.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Output should be:

How to add HTML <img> width Attribute

An image with a height of 600 pixels and a width of 500 pixels:

The width attribute specifies the width of an image, in pixels.

Browser Support

Syntax

Attribute Values

Value	Description
pixels	The width in pixels (e.g. width="100")

index.html

Example: HTML

<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="200" height="300">

Output should be:

What is HTML <!--...--> Tag	HTML Tag
What is HTML <!DOCTYPE> Declaration	HTML Tag
What is HTML Elements and Doctypes	HTML Tag
What is HTML <a> Tag	HTML Tag
What is HTML <abbr> Tag	HTML Tag
What is HTML <acronym> Tag	HTML Tag
What is HTML <address> Tag	HTML Tag
What is HTML <applet> Tag	HTML Tag
What is HTML <area> Tag	HTML Tag
What is HTML <article> Tag	HTML Tag
What is HTML <aside> Tag	HTML Tag
What is HTML <audio> Tag	HTML Tag
What is HTML <b> Tag	HTML Tag
What is HTML <base> Tag	HTML Tag
What is HTML <basefont> Tag	HTML Tag
What is HTML <bdi> Tag	HTML Tag
What is HTML <bdo> Tag	HTML Tag
What is HTML <big> Tag	HTML Tag
What is HTML <blockquote> Tag	HTML Tag
What is HTML <body> Tag	HTML Tag
What is HTML <br> Tag	HTML Tag
What is HTML <button> Tag	HTML Tag
What is HTML <canvas> Tag	HTML Tag
What is HTML <caption> Tag	HTML Tag
What is HTML <center> Tag	HTML Tag
What is HTML <cite> Tag	HTML Tag
What is HTML <code> Tag	HTML Tag
What is HTML <col> Tag	HTML Tag
How to create HTML <colgroup> Tag	HTML Tag
What is HTML <data> Tag	HTML Tag
What is HTML <datalist> Tag	HTML Tag
What is HTML <dd> Tag	HTML Tag
What is HTML <del> Tag	HTML Tag
What is HTML <details> Tag	HTML Tag
What is HTML <dfn> Tag	HTML Tag
What is HTML <dialog> Tag	HTML Tag
What is HTML <dir> Tag	HTML Tag
What is HTML <div> Tag	HTML Tag
What is HTML <dl> Tag	HTML Tag
What is HTML <dt> Tag	HTML Tag
What is HTML <em> Tag	HTML Tag
What is HTML <embed> Tag	HTML Tag
What is HTML <fieldset> Tag	HTML Tag
What is HTML <figcaption> Tag	HTML Tag
What is HTML <figure> Tag	HTML Tag
What is HTML <font> Tag	HTML Tag
What is HTML <footer> Tag	HTML Tag
What is HTML <form> Tag	HTML Tag
What is HTML <frame> Tag	HTML Tag
What is HTML <frameset> Tag	HTML Tag
What is HTML <h1> to <h6> Tags	HTML Tag
What is HTML <head> Tag	HTML Tag
What is HTML <header> Tag	HTML Tag
What is HTML <hgroup> Tag	HTML Tag
What is HTML <hr> Tag	HTML Tag
What is HTML <html> Tag	HTML Tag
What is HTML <i> Tag	HTML Tag
What is HTML <iframe> Tag	HTML Tag
What is HTML <img> Tag	HTML Tag
What is HTML <input> Tag	HTML Tag
What is HTML <ins> Tag	HTML Tag
What is HTML <kbd> Tag	HTML Tag
What is HTML <label> Tag	HTML Tag
What is HTML <legend> Tag	HTML Tag
What is HTML <li> Tag	HTML Tag
What is HTML <link> Tag	HTML Tag
What is HTML <main> Tag	HTML Tag
What is HTML <map> Tag	HTML Tag
What is HTML <mark> Tag	HTML Tag
What is HTML <menu> Tag	HTML Tag
What is HTML <meta> Tag	HTML Tag
What is HTML <meter> Tag	HTML Tag
What is HTML <nav> Tag	HTML Tag
What is HTML <noframes> Tag	HTML Tag
What is HTML <noscript> Tag	HTML Tag
What is HTML <object> Tag	HTML Tag
What is HTML <ol> Tag	HTML Tag
What is HTML <optgroup> Tag	HTML Tag
What is HTML <option> Tag	HTML Tag
What is HTML <output> Tag	HTML Tag
What is HTML <p> Tag	HTML Tag
What is HTML <param> Tag	HTML Tag
What is HTML <picture> Tag	HTML Tag
What is HTML <pre> Tag	HTML Tag
What is HTML <progress> Tag	HTML Tag
What is HTML <q> Tag	HTML Tag
What is HTML <rp> Tag	HTML Tag
What is HTML <rt> Tag	HTML Tag
What is HTML <ruby> Tag	HTML Tag
What is HTML <s> Tag	HTML Tag
What is HTML <samp> Tag	HTML Tag
What is HTML <script> Tag	HTML Tag
What is HTML <search> Tag	HTML Tag
What is HTML <section> Tag	HTML Tag
What is HTML <select> Tag	HTML Tag
What is HTML <small> Tag	HTML Tag
What is HTML <source> Tag	HTML Tag

Single Articles

How to create HTML <img> Tag	HTML Tag
Which browser will support for HTML <img> Tag	HTML Tag
Attributes for HTML <img> Tag	HTML Tag
How to add Align image (with CSS)	HTML Tag
How to Add image border (with CSS):	HTML Tag
How to Add left and right margins to image (with CSS)	HTML Tag
How to Add top and bottom margins to image (with CSS)	HTML Tag
How to insert images from another folder or from another web site	HTML Tag
How to add a hyperlink to an image	HTML Tag
How to create an image map, with clickable regions. Each region is a hyperlink	HTML Tag
How to set Default CSS Settings for HTML <img> Tag	HTML Tag
How to add HTML <img> alt Attribute	HTML Tag
How to add HTML <img> height Attribute	HTML Tag
How to HTML <img> ismap Attribute	HTML Tag
How to add HTML <img> loading Attribute	HTML Tag
How to add HTML <img> longdesc Attribute	HTML Tag
How to add HTML <img> referrerpolicy Attribute	HTML Tag
How to add HTML <img> Size Attribute	HTML Tag
How to add HTML <img> crossorigin Attribute	HTML Tag
How to add HTML <img> src Attribute	HTML Tag
How to add HTML <img> srcset Attribute	HTML Tag
How to add HTML <img> usemap Attribute	HTML Tag
How to add HTML <img> width Attribute	HTML Tag

Read Full:	HTML Tag
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded:	8 months ago
Uploaded by:	Admin
Views:	13
Ref on:	View