HTML Images

There are three types of HTML image tags:

In this tutorial we are going to focused on images.

Anatomy of the image element

An image tag has four elements:

  1. The element name is img
  2. The src attribute defines the “source” of that image: the location at which the browser can find the image file. Example, desena.jpg.
  3. The alt attribute is an important attribute, which provides an alternative text version of the image that most people see on the screen. The alt attribute making images useful to all people even for the blinds who use screen readers to read website pages.
  4. The width and height attribute let the browser know the dimensions at which the image should be display in the browser.
html image

Remember that the <img> tag is an empty element. In other words, it has no separate closing tag – the final forward slash tells the browser that everything it needs in order to display that element content is contained within the “attributes”.

The image formats

The image formats that are most commonly used on the web are: GIF, JPG and PNG.