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>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
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>
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">
Click on the "Try it Now" button to see how it works.