Images (<img />)

The image element embeds an image into the document.

The image's path or URI can be a relative or absolute type and it is defined via a src attribute. The other important attribute is the alt attribute which stands for alternate text and it suppose to contain a short description of the image inserted.

Browser will show the alternate text when the image is not possible to load or if it is a non-visual type of browser.

Common image compression types that are recognizable across all browsers are gif, jpeg (jpg) and png.

Image is an empty element, therefore the closing tag is forbidden.

Syntax:

<img src="URI" alt="" />

Attributes:

id, class (document-wide identifiers)
lang (language information), dir (text direction), charset (character encodings)
title (element title)
style (inline style information)
alt (alternate text)
name (elements name)
src (image URI)
longdesc (image description)
ismap, usemap (client side image maps)
width, height (visual presentation of objects and images)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Example

HTML image element:

<html>

<head>
<title>HTML tutorial</title>
<style type="text/css">
html [alt] {
	font-size: 0.8em;
	color:#999;
	}
</style>
</head> 

<body>

<h4>This image is valid:</h4>
<img src="../../../img/tutorials/logo.png" alt="logo" /><br /><br />
<h4>This image is invalid:</h4>
<img src="../../../img/tutorials/logo.jpg" alt="If browser cannot load image, a message from 'alt' attribute should appear" />

</body>

</html>

›› go to examples ››

Syntax:

Attributes:

Example

HTML image element:

Comments

About

Contact

Get Connected