Images, such as photos or graphics, enhance the visual appeal of a web page. Images are defined with the <img> tag. It is empty, it contains attributes only, and does not have a closing tag.

Syntax and Example

<img src="/path/to/image" alt="Alternate Text" style="width:128px;height:128px" />

Image Attributes

  1. The src attribute defines the url (web address) of the image.
  2. The alt attribute specifies an alternate text for the image.
  3. You can use the style attribute to specify the width and height of an image.

HTML Best Practices

  • Always specify the size of an image. If the size is unknown, the page will flicker while it loads.
  • For SEO purpose and screen readers, always use appropriate alt attribute.

New in HTML5: Figure Captions

HTML5 introduced the <figure> and <figcaption> elements. The <figure> element is used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, images and other things. The <figcaption> element is optional and can appear before or after the content within the <figure>.

<figure>
  <img src="/path/to/image" alt="Alternate Text" />
 <figcaption>
   <p>This is an image of something.</p>
 </figcaption>
</figure>

You can now semantically associate captions with their image counterparts.