<img>


HTML <img> Tag

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<img src="/upload/course/000/000/010/580977768651f670.gif" alt="Smiley face" width="42" height="42">

</body>
</html>

Run Example»

Click the "Run Instance" button to view the online instance

Browser support

1000.png

All major browsers support the <img> tag.

Tag definition and usage instructions

<img> tag defines images in HTML pages.

<img> tags have two required attributes: src and alt.

Note: Technically speaking, the image is not inserted into the HTML page, but is linked to the HTML page. The <img> tag creates a placeholder for the referenced image.

Tip:Add a link to an image to another document by nesting an <img> tag within an <a> tag.

Differences between HTML 4.01 and HTML5

The following attributes are not supported in HTML5: align, border, hspace, longdesc, vspace.

In HTML 4.01, the following attributes: align, border, hspace, vspace are obsolete.

Differences between HTML and XHTML

In HTML, the <img> tag does not have a closing tag.

In XHTML, the <img> tag must be closed properly.

Attribute

New: New attribute in HTML5.

srcSpecifies the URL to display the image. usemap Defines the image as a client-side image map. vspacewidthSpecifies the width of the image.


Global attributes

<img> tag supports HTML global attributes.

Event attributes

<img> tag supports HTML event attributes.

Examples

Try it - Example

Insert pictures from different locations
This example demonstrates how to display pictures from other folders or servers to the web page.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>插入来自一个文件夹的图片:</p>
<img src="/upload/course/000/000/010/5809788beaca7942.gif" alt="Stickman" width="24" height="39">

<p>插入来自一个网站的图片::</p>
<img src="/upload/course/000/000/010/58043146a1da1979.jpg" alt="Lamp" width="15" height="15">

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Making an Image Link
This example demonstrates how to use an image as a link.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
一个图片链接:
<a href="http://www.w3cschool.cc">
<img src="/upload/course/000/000/010/5809791e1eef2805.gif" alt="Go to W3CSchool.cc!" width="42" height="42" border="0">
</a>
</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Create an image map
This example demonstrates how to create an image map with clickable areas. Each of these fields is a hyperlink.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="/upload/course/000/000/010/580979883b949162.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<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>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Related Articles

HTML Tutorial: HTML Images

HTML DOM Reference Manual: Image Object


←
→

php.cn

HomeHomeCourseCourseArticleArticleQ&AQ&ADictionaryDictionaryManualManualDownloadDownloadsearchsearchAPPDownload APPDownload
AttributesValueDescription
aligntop
bottom
middle
left
​ right		HTML5 is not supported. HTML 4.01 is deprecated. Specifies how images are arranged relative to surrounding text.
alttextSpecifies the alternative text for the image.
borderpixelsHTML5 Not supported. HTML 4.01 is deprecated. Specifies the border around the image.
crossoriginNew#anonymous
use-credentials		Set the cross-domain attributes of the image
heightpixelsSpecify the image's high.
hspacepixelsHTML5 Not supported. HTML 4.01 is deprecated. Specifies the margins on the left and right sides of the image.
ismapismap Specifies the image as a server-side image map.
longdescURL##HTML5 Not supported. HTML 4.01 is deprecated. Points to a URL that contains a long image description document.
URL
#mapname
pixelsHTML5 Not supported. HTML 4.01 is deprecated. Specifies the margin at the top and bottom of the image.
pixels