totn HTML

HTML: <img> tag

This HTML tutorial explains how to use the HTML element called the <img> tag with syntax and examples.

Description

The HTML <img> tag defines an image in the HTML document. This tag is also commonly referred to as the <img> element.

Syntax

In HTML, the syntax for the <img> tag is:

<body>
<img src="image.png" alt="Text to display when image can not be displayed">
</body>

or in XHTML, the syntax for the <img> tag is:

<body>
<img src="image.png" alt="Text to display when image can not be displayed" />
</body>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <img> tag:

Attribute Description HTML Compatibility
align Alignment of the image Deprecated in HTML 4.01, Obsolete in HTML5
alt Alternative text to display if image can not be displayed HTML 4.01, HTML5
border Width of the border around the image Deprecated in HTML 4.01, Obsolete in HTML5
crossorigin Enumerated value indicating whether the image must be fetched using CORS. It can be the following values:
anonymous - means a cross-origin request is performed with no credentials
use-credentials - means a cross-origin request is performed with credentials		 HTML5
height Height of the image
In HTML 4.01, height can be in pixels
In HTML5, height can be in either pixels or as a percentage		 HTML 4.01, HTML5
hspace White space to insert to the left and right of image (expressed in pixels) Deprecated in HTML 4.01, Obsolete in HTML5
ismap Boolean value indicating whether the image is part of a server-side map HTML 4.01, HTML5
longdesc URL of a description of the image HTML 4.01 (in HTML5, use the <a> tag
name Name of the element (use the id attribute instead) Deprecated in HTML 4.01, Obsolete in HTML5
src URL of the image HTML 4.01, HTML5
width Width of the image (expressed in either pixels or percent) HTML 4.01, HTML5
usemap Partial URL of an image map for the element. Partial URL starts with # HTML 4.01, HTML5
vspace White space to insert above and below the image (express in pixels) Deprecated in HTML 4.01, Obsolete in HTML5

Note

  • The HTML <img> element is found within the <body> tag.
  • The <img> tag has 2 required attributes - src and alt.
  • The <img> tag may support (depending on the browser) the following image formats: jpeg, gif, png, apng, svg, bmp, bmp ico, png ico.

Browser Compatibility

The <img> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <img> tag below, exploring examples of how to use the <img> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <img> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the content that would appear under Heading 1.</p>
<img src="/images/example.png" alt="Example image">
</body>

</html>

In this HTML5 Document example, we have created an <img> tag that displays the example.png image found in the /images directory. If the browser is unable to display the image, it will display the text "Example image" instead.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <img> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the content that would appear under Heading 1.</p>
<img src="/images/example.png" alt="Example image">
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created an <img> tag that displays the example.png image found in the /images directory. If the browser is unable to display the image, it will display the text "Example image" instead.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <img> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the content that would appear under Heading 1.</p>
<img src="/images/example.png" alt="Example image" />
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created an <img> tag that displays the example.png image found in the /images directory. If the browser is unable to display the image, it will display the text "Example image" instead.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <img> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the content that would appear under Heading 1.</p>
<p><img src="/images/example.png" alt="Example image" /></p>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created an <img> tag that displays the example.png image found in the /images directory. If the browser is unable to display the image, it will display the text "Example image" instead.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <img> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the content that would appear under Heading 1.</p>
<p><img src="/images/example.png" alt="Example image" /></p>
</body>

</html>

In this XHTML 1.1 Document example, we have created an <img> tag that displays the example.png image found in the /images directory. If the browser is unable to display the image, it will display the text "Example image" instead.

Share on: