/

HTML / CSS / JavaScript Tutorial

HTML Element: <img>

[this page | pdf | back links]

The HTML <img> element indicates an image. It technically has two required attributes, namely src (the source of the image) and alt (the alternative text displayed if the image cannot be found or cannot be displayed by the browser), although the alt attribute can typically be dispensed with. Images are not technically inserted into an HTML page but instead are linked to the page. The <img> element therefore creates a placeholder that will include the image once the page is rendered (and the image retrieved by the rendering process from its source location).

 

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

 

Attribute

Description

More

alt

Specifies alternative text to show when original content fails to display

Here

crossorigin

Specifies how element handles cross-origin requests

Here

height

Height of element

Here

ismap

Image is a server-side image-map

Here

sizes

Specifies size of linked resource

Here

src

URL of resource

Here

srcset

URL of image to use in different situations

Here

usemap

Specifies an image as a client-side image-map

Here

width

Width of element

Here

 

It used to support the align, border, hspace, longDesc and vspace attributes, but these are no longer supported in HTML 5.

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods, and additional properties with the same name and meaning as the attributes of the underlying HTML element referred to above (with the crossorigin, ismap and usemap properties of the underlying element corresponding to the crossOrigin, isMap and useMap properties of the DOM object). It also supports the following additional properties:

 

Property

Description

More

complete

Returns whether the browser has finished loading the image

Here

naturalHeight

Returns original height of image

Here

naturalWidth

Returns original width of image

Here

 

The default style applicable to this element is shown here.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML:<br>
<img src="Pictures/Shape1.jpg">

<br><br>Created using JavaScript:<br>
<span id="element"></span>

<script>
var x = document.createElement("IMG");
x.setAttribute("src","Pictures/Shape1.jpg");
document.getElementById("element").appendChild(x);
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile