The img element defines an image. The <img> tag
is used to insert image in a document. The image is presents as part of web
page. But it is important to know that image is not a technically part of web
page. Generally, Maximum browser supports only GIF, JPEG and PNG format. The
HTML <img> tag is used for embedding images into an HTML document. The value
given by the src attribute is the URL to the embedded image. The value of the
alt attribute appears if the image cannot be loaded. To link an image to another
document, you simply nest the <img> tag inside <a> tags.
Syntax
<img src="URL" alt="Text" />
src - Defines address(URL) of image.
alt - Text to display if image not display.
Attributes
HTML tags can contain one or more attributes.
Attributes are added to a tag to provide the browser with more information about
how the tag should appear or behave. Attributes consist of a name and a value
separated by an equals (=) sign, with the value surrounded by double quotes.
There are 3 kinds of attributes that you can
add to your HTML tags: Element-specific, global, and event handler content
attributes.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
|
Attributes Introduced by
HTML5 |
| Attributes |
Description
|
| src |
This attribute specifies
Address of resource file using URL. |
| alt |
Alternate text. This specifies text to be used in case
the browser/user agent can't render the image. |
| ismap |
For image
maps. See HTML map tag |
| usemap |
For image
maps. See HTML map tag |
| width |
Specifies the width of the image. |
| height |
Specifies the
height of the image. |
Global Attributes
The following attributes are standard across all HTML 5 tags.
|
HTML5
Global Attributes |
| accesskey |
draggable |
style |
| class |
hidden |
tabindex |
| oncontextmenu |
ondblclick |
ondrag |
| contenteditable |
id |
title |
| contextmenu lang |
lang |
|
Event Handler Content Attributes
Here are the standard HTML 5 event handler content
attributes.
|
Event Handler Content Attributes |
| onabort |
onerror* |
onmousewheel |
| onblur* |
onfocus* |
onpause |
| oncanplay |
onformchange |
onplay |
| oncanplaythrough |
onforminput |
onplaying |
| onchange |
oninput |
onprogress |
| onclick |
oninvalid |
onratechange |
| oncontextmenu |
onkeydown |
onreadystatechange |
| ondblclick |
onkeypress |
onscroll |
| ondrag |
onkeyup |
onseeked |
| ondragend |
onload* |
onseeking |
| ondragenter |
onloadeddata |
onselect |
| ondragleave |
onloadedmetadata |
onshow |
| ondragover |
onloadstart |
onstalled |
| ondragstart |
onmousedown |
onsubmit |
| ondrop |
onmousemove |
onsuspend |
| ondurationchange |
onmouseout |
ontimeupdate |
| onemptied |
onmouseover |
onvolumechange |
| onended |
onmouseup |
onwaiting |
For example
<!DOCTYPE
html
>
<html>
<head>
<title>Title
of Document</title>
<style
type="text/css">
.style1
{
font-size: large;
font-family: Verdana;
}
</style>
</head>
<body>
<h1>HTML5
img tag.</h1>
<h2>Example
of image. </h2>
<img
src="Image/Waterlilies.jpg"
style="width:
211px" />
<i>
<br
/>
<span
class="style1">This
is the flower.</span></i><br
class="style1">
<h2>Secongd
Image.</h2>
<img
src="Image/Winter.jpg"
style="width: 219px"
/>
</body>
</html>
Internet Explorer
![im1.gif]()
Fire Fox
![im2.gif]()
Making hyperlink of an image
The below html code displays image with
hyperlink.
<a
href="http://www.vbdotnetheaven.com/">
<img
src="Image/Waterlilies.jpg"
style="width:
211px" />
</a>
Creating a image map
<map
name="planetmap">
<area
shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm"
/>
<area
shape="circle"
coords="90,58,3"
alt="Mercury"
href="mercur.htm"
/>
<area
shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm"
/>
</map>