HTML <img> tagS2C Home   « HTML <img> tag

Definition

The <img> tag is a self closing tag used to create an area on the page to hold the referenced image.

The src attribute is mandatory whenever using the <img> tag and specifies the URL of the image (the actual location where the image is stored).

The alt attribute is mandatory whenever using the <img> tag and specifies an alternate text for the image (provides information if the image cannot be loaded).

Although not mandatory its good practice to get into the habit of also including the width and height attributes when using the <img> tag to avoid flicker on page load.

Example


<img src="../../images/apple.jpg"
     alt="Apple" width="200" height="200">
Apple

Attributes

The following attributes can be used with the <img> tag.


<img> Specific Attributes
Attribute Value Description Example
altnumberSpecifies an alternate text for the image (provides information if the image cannot be loaded). Required 

<img src="../../images/apple.jpg" 
     alt="Apple">
crossoriginSpecifies how the resource handles cross-origin request. 

<img href="../../images/apple.jpg"
     crossorigin="anonymous">
anonymousRequests for the element will have their mode set to "cors" and their credentials mode set to "same-origin".
use-credentialsRequests for the element will have their mode set to "cors" and their credentials mode set to "include".
heightnumberSpecifies the height of the image in pixels (you can make the image taller or shorter). 

<img src="../../images/apple.jpg" 
     alt="Apple"
     height="200">
ismapismapSpecifies the image as a server side image map.

Only valid if image is a descendant of an <a> tag with a valid <href attribute.

For more information about image maps see the <map> tag.		 

<img src="../../images/apple.jpg"
     alt="Apple"
     ismap>
referrerpolicySpecifies how much referrer information is sent. 

<img src="../../images/apple.jpg" 
     alt="Apple"
     referrerpolicy="unsafe-url">
no-referrerNo referrer information will be sent.
no-referrer-when-downgradeNo referrer information will be sent when navigatin to a non HTTPS resource
originReferrer will be the origin of the page.
origin-when-cross-originReferrer will be the origin of the page but will not include path when navigating to another origin.
unsafe-urlReferrer will include the origin and the path but no fragment, username or password.
sizeswidthXheight or anySpecifies space separated sizes of images for different media content. 

<img src="../../images/apple.jpg" 
     alt="Apple"
      sizes="16x16 64x64">
srcurlSpecifies the URL of the image (the actual location where the image is stored). Required 

<img src="../../images/apple.jpg" 
     alt="Apple">
srcseturlSpecifies images to use in different situations (e.g., high-resolution displays, small monitors, etc.) 

<img src="../../images/apple.jpg"
  srcset="../../images/appleSmall.jpg" 
  alt="Apple">
usemapnameSpecifies the image as a client side image map.

Cannot use this attribute if the <img> tag is inside an <a> or <button> tag.

For more information about image maps see the <map> tag.		 

<img src="../../images/apple.jpg" 
     alt="Apple"
     usemap="#mapName">
widthnumberSpecifies the width of the image in pixels (you can make the image narrower or wider). 

<img src="../../images/apple.jpg" 
     alt="Apple"
     width="500">
<img> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<img href="../images/apple.jpg" class="name">
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<img href="../images/apple.jpg" id="idname">
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<img href="../images/apple.jpg" style="color:red;">
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<img href="../images/apple.jpg" title="Content info.">
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<img href="../images/apple.jpg" accesskey="a">
tabindexSpecifies a tab order for the element. 

<img href="../images/apple.jpg" tabindex="1">
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<img href="../images/apple.jpg" dir="ltr">
<!-- The text will flow from right to left -->
<img href="../images/apple.jpg" dir="rtl">
langSpecifies a language code for the content of the element. 

<img href="../images/apple.jpg" lang="en">
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<img href="../images/apple.jpg" spellcheck="true">
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<img href="../images/apple.jpg" translate="no">
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<img href="../images/apple.jpg" contenteditable="false">
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<img href="../images/apple.jpg" draggable="true">
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<img href="../images/apple.jpg" hidden> 
<img href="../images/apple.jpg" hidden="hidden">
<img> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" oncopy="go()">
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" oncut="go()">
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onpaste="go()">
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ondrag="go()">
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ondragend="go()">
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ondragenter="go()">
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ondragleave="go()">
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ondragover="go()">
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ondragstart="go()">
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ondrop="go()">
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onblur="go()">
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onchange="go()">
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" oncontextmenu="go()">
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onfocus="go()">
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" oninput="go()">
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" oninvalid="go()">
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onreset="go()">
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onselect="go()">
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onsubmit="go()">
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onkeydown="go()">
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onkeypress="go()">
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onkeyup="go()">
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onabort="go()">
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" oncanplay="go()">
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" oncanplaythrough="go()">
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" oncuechange="go()">
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ondurationchange="go()">
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onemptied="go()">
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onended="go()">
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onloadeddata="go()">
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onloadedmetadata="go()">
onloadstartThe script to be run when the media resource has started loading. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onloadstart="go()">
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onpause="go()">
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onplay="go()">
onplayingThe script to be run when playback has already begun. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onplaying="go()">
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onprogress="go()">
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onratechange="go()">
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onseeked="go()">
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onseeking="go()">
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onstalled="go()">
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onsuspend="go()">
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ontimeupdate="go()">
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onvolumechange="go()">
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onwaiting="go()">
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onclick="go()">
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" ondblclick="go()">
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onmousedown="go()">
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onmousemove="go()">
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onmouseout="go()">
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onmouseover="go()">
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onmouseup="go()">
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onwheel="go()">
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<img href="../images/apple.jpg" onscroll="go()">
Scroll
Window - NONE