View video tutorial

HTML <img> Tag

HTML

The <img> tag is used to display an image on a page.

HTML <img> Tag


The <img> element embeds an image in the document.

The src attribute is mandatory, and contains the path to the image.

The alt attribute is not mandatory but useful, and contains alternate text if the image is not available.

Element Attributes

Attribute Value Description
alt text This specifies an alternate text for an image.
crossorigin anonymous
use-credentials
This specifies whether image fetching must be done using a CORS request.
height pixels This specifies the height of an image.
ismap ismap This specifies that the image is part of a server-side map.
loading eager
lazy
It specifies whether a browser should load an image immediately or to delay loading of images.
longdesc url It specifies a link to a more detailed description of the image
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
It specifies a string that indicates which referrer to use when fetching resources.
sizes sizes It specifies a set of source sizes.
src url It specifies the image URL.
srcset url-list It specifies one or more string urls and indicates the possible image source.
usemap #mapname It specifies the partial URL of an image map attached to the element.
width pixels It specifies the width of an image.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<img src="img_name.jpg" alt="An alternate text." width="250" height="250">
Try it Now »

Click on the "Try it Now" button to see how it works.


Example

<a href="https://www.w3context.com"><img src="resources/images/rocket.png" title="go to w3context" alt="w3context.com"></a>
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

<img src="mood.png" alt="emoji face" width="42" height="42" style="vertical-align:bottom">
<img src="mood.png" alt="emoji face" width="42" height="42" style="vertical-align:middle">
<img src="mood.png" alt="emoji face" width="42" height="42" style="vertical-align:top">
<img src="mood.png" alt="emoji face" width="42" height="42" style="float:right">
<img src="mood.png" alt="emoji face" width="42" height="42" style="float:left">
Try it Now »

Click on the "Try it Now" button to see how it works.