<img> element is used to place an image into an HTML document and contains information about the image such as
location, size and description. When the page is displayed by the browser the image is embedded in the page at the location of the
element, usually inline but it may be floated to the right or left.
The src attribute must be used and tells the browser the location of the image and can be either a relative or absolute address. br> The second required attribute is alt which contains a brief description of the image as alternative content for non-visual browsers. The alt attribute is a key aspect of web accessibility and should always be included with an image.
<img> element also supports width and height attributes which, although
not obligatory, should always be included as they enable browsers to reserve the space for the image and render the rest of the page whilst waiting for the image
data instead of having to download the whole image before knowing how it will fit into the page.
With these four attributes you are able to add an image into a page in the following manner:
Example code for an image called 'bruges.jpg' located in the 'images' folder with a width of 200 pixels and a height of 267 pixels:
As the image has no styling it is placed in the first available position - in this instance on the left on a new line as it follows a
<div> element. For information on how to position images within text please see the css
This element is one of the empty elements in HTML4.
- CORE AND LANGUAGE ATTRIBUTES - class, id, title, style, dir, lang
- MOUSE AND KEYBOARD EVENT ATTRIBUTES - onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress
- src - REQUIRED - location of the image - a URI.
- alt - REQUIRED - a text description of the image for browsers that don't support images.
- width - width of the image in pixels.
- height - height of the image in pixels.
- longdesc - URI link to a long description of the image.
- usemap - URI of client-side image map.
- ismap - server-side image map