Custom Search
| Syntax | HTML syntax - This element does not require a closing tag.
<img> XHTML syntax - This element is opened and closed, within a single tag, by adding a space followed by a forward slash at the end of the tag. <img /> |
|---|---|
| Usage | The <img> tag is used to embed an image into a web page. The image to display is specified by the src attribute. If the image cannot be displayed, the text contained in the alt attribute will be displayed. HTML <img> tag example using src, height and width attributes. <img src="eightball.gif" alt="eight ball" height="168" width="100"> XHTML <img> tag example using src, height and width attributes. <img src="eightball.gif" alt="eight ball" height="168" width="100" /> |
| Content Model | The <img> element cannot contain any tags. |
| Video Tutorial |
| Required | Tag Specific | Core | Focus | Events | Language |
|---|---|---|---|---|---|
| alt src | align border height hspace ismap longdesc name1 usemap vspace width | id class style title | onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup | dir lang xml:lang2 | |
| Notes: 1. deprecated in XHTML. 2. XHTML only. | |||||
| Attribute | Description |
|---|---|
| alt | The alt attribute is used to specify alternate text that will be displayed in the event that the image cannot be displayed. HTML <img> tag example using the alt attribute. <img src="eightball.gif" alt="eight ball" height="168" width="100">
XHTML <img> tag example using the alt attribute. <img src="eightball.gif" alt="eight ball" height="168" width="100" />Note: This is a required attribute. |
| src | The src attribute is used to the specify the URL of the image to be displayed. HTML <img> tag example using the src attribute. <img src="eightball.gif" alt="eight ball" height="168" width="100">XHTML <img> tag example using the src attribute. <img src="eightball.gif" alt="eight ball" height="168" width="100" />Note: This is a required attribute. |
| align | The align attribute specifies the position of the image. A value of "bottom", "middle", or "top" specifies the position with respect to surrounding text. a value of "left" or "right" will float the image to the left or right. HTML <img> tag example using the align attribute. <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="top"> This is top aligned. <p>This text starts a new paragraph.</p> <hr> </div> <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="middle"> This is middle aligned. <p>This text starts a new paragraph.</p> <hr> </div> <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="bottom"> This is bottom aligned. <p>This text starts a new paragraph.</p> <hr> </div> <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="left"> This is left aligned. <p>This text starts a new paragraph.</p> <hr> </div> <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="right"> This is right aligned. <p>This text starts a new paragraph.</p> </div> XHTML <img> tag example using the align attribute. <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="top" /> This is top aligned. <p>This text starts a new paragraph.</p> <hr /> </div> <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="middle" /> This is middle aligned. <p>This text starts a new paragraph.</p> <hr /> </div> <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="bottom" /> This is bottom aligned. <p>This text starts a new paragraph.</p> <hr /> </div> <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="left" /> This is left aligned. <p>This text starts a new paragraph.</p> <hr /> </div> <div> <img src="eightball.gif" alt="eight ball" height="84" width="50" align="right" /> This is right aligned. <p>This text starts a new paragraph.</p> </div> Note: This attribute has been deprecated. |
| border | The border attribute is used to specify the width, in pixels, of the border surrounding the image. HTML <img> tag example using the border attribute. <img src="eightball.gif" alt="eight ball" border="3">XHTML <img> tag example using the border attribute. <img src="eightball.gif" alt="eight ball" border="3" />Note: This attribute has been deprecated. |
| height | The height attribute is used to specify the height of the image. The value is in pixels, or percentage when followed by a percent sign (%). If the value is specified as a percentage, it refers to a percentage of the available space. HTML <img> tag example using height and width attributes. <img src="eightball.gif" alt="eight ball" height="168" width="100">XHTML <img> tag example using height and width attributes. <img src="eightball.gif" alt="eight ball" height="168" width="100" /> |
| hspace | The hspace attribute specifies the amount of white space, in pixels, to the left and right of the image. HTML <img> tag example using the hspace attribute. <img src="eightball.gif" alt="eight ball">
<br>
<img src="eightball.gif" alt="eight ball" hspace="50">XHTML <img> tag example using the hspace attribute. <img src="eightball.gif" alt="eight ball" />
<br />
<img src="eightball.gif" alt="eight ball" hspace="50" />Note: This attribute has been deprecated. |
| ismap | The ismap attribute is used to specify the use of a server-side image map. The image must be inside of an anchor element. The anchor element is created using the <a> tag. |
| longdesc | The longdesc attribute is used to specify the URL of a long description of the image. HTML <img> tag example using the longdesc attribute. <img src="eightball.gif" alt="circle" longdesc="img_info.html">
XHTML <img> tag example using the longdesc attribute. <img src="eightball.gif" alt="circle" longdesc="img_info.html" /> |
| name | The name attribute is used to name the image element. This allows style sheets or scripts to reference the element. The name attribute has been deprecated in XHTML but not HTML. For XHTML, the id attribute can be used instead. To increase forward and backward compatibility, both the name and id attributes can be set to the same value. HTML <img> tag example using the name attribute <img src="eightball.gif" alt="circle" name="eight" id="eight">
XHTML <img> tag example using the name attribute <img src="eightball.gif" alt="circle" name="eight" id="eight" />Note: deprecated in XHTML. |
| usemap | The usemap attribute is used with client-side image maps. The usemap attribute is used to point to an image map that is defined using the <map> tag. The <area>, <map>, and <img> tags can work together to allow clickable areas to be defined within an image. First an image is specified using an <img> tag. Then a <map> tag is used to specify a client-side image map. The <map> tag contains one ore more <area> tags. Each <area> tag defines a clickable area and an associated link. The usemap attribute in the <img> tag is used to point to the <map> tag. This is accomplished by setting the name and id attributes in the <map> tag to the corresponding value. HTML <img> tag example using the usemap attribute. <p>
<img usemap="#shapes" src="shapes.gif" alt="picture shapes">
<map name="shapes" id="shapes">
<area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle">
<area shape="circle" coords="164,47,32" href="circle.html" alt="circle">
<area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly">
</map>
</p>XHTML <img> tag example using the usemap attribute. <p>
<img usemap="#shapes" src="shapes.gif" alt="picture shapes" />
<map name="shapes" id="shapes">
<area shape="rect" coords="2,14,103,78" href="rect.html" alt="rectangle" />
<area shape="circle" coords="164,47,32" href="circle.html" alt="circle" />
<area shape="poly" coords="220,0,232,83,296,34" href="tri.html" alt="poly" />
</map>
</p> |
| vspace | The vspace attribute specifies the amount of white space, in pixels, above and below the image. HTML <img> tag example using the vspace attribute. <p>The following image does not have vspace set.</p>
<p>
<img src="eightball.gif" alt="eight ball">
</p>
<p>The following image has vspace set to 50.</p>
<p>
<img src="eightball.gif" alt="eight ball" vspace="50">
</p>XHTML <img> tag example using the vspace attribute. <p>The following image does not have vspace set.</p>
<p>
<img src="eightball.gif" alt="eight ball" />
</p>
<p>The following image has vspace set to 50.</p>
<p>
<img src="eightball.gif" alt="eight ball" vspace="50" />
</p>Note: This attribute has been deprecated. |
| width | The width attribute is used to specify the width of the image. The value is in pixels, or percentage when followed by a percent sign (%). If the value is specified as a percentage, it refers to a percentage of the available space. HTML <img> tag example using height and width attributes. <img src="eightball.gif" alt="eight ball" height="168" width="100">XHTML <img> tag example using height and width attributes. <img src="eightball.gif" alt="eight ball" height="168" width="100" /> |
| id | The id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag. See id Example |
| class | The class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example |
| style | The style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example |
| title | The title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example |
| onclick | The onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device. See onclick Example |
| ondblclick | The ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device. See ondblclick Example |
| onkeydown | The onkeydown attribute specifies a script to be run when a key is pressed down. See onkeydown Example |
| onkeypress | The onkeypress attribute specifies a script to be run when a key is pressed and released. See onkeypress Example |
| onkeyup | The onkeyup attribute specifies a script to be run when a key is released. See onkeyup Example |
| onmousedown | The onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object. See onmousedown Example |
| onmousemove | The onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object. See onmousemove Example |
| onmouseout | The onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it. See onmouseout Example |
| onmouseover | The onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object. See onmouseover Example |
| onmouseup | The onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object. See onmouseup Example |
| dir | The dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side. See dir Example |
| lang | The lang attribute specifies a language. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See lang Example |
| xml:lang | The xml:lang attribute specifies a language for XHTML documents. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See xml:lang Example Note: XHTML only. |
| <img> tag example using src, height and width attributes.<img> tag example using the align attribute.<img> tag example using the border attribute.<img> tag example using the hspace attribute.<img> tag example using the usemap attribute.<img> tag example using the vspace attribute. |
