The <img/> Tag in HTML 5

The <img/> tag puts an image on a web page by reading the binary image data from a separate file or external resource and including it inline with other content on the page. It is one of the embedded content tags in HTML. As embedded content, the image is read from the resource specified by the src attribute and dynamically inserted into the web page when it is rendered. For inline video content, see the <iframe> tag, which works almost like an img element except the content in the external resource is HTML code rather than binary image data.

In the <img/> tag demo below, the image button on the left uses legacy image rollover techniques. The image button on the right uses more sophisticated animated rollover, but the animation may not be supported in all browsers yet.

img rollover demo

These are actual working examples of the <img> tag example code below, since this entire page is Valid HTML 5.