Images in HTML

It is quite common to use images within text to further elaborate the impact of text on the reader. HTML has provided us the ability to use images in HTML document through the use of img tag. The <img> element in HTML lets us put images on a document. This element is a self-closing tag meaning that it does not require a corresponding closing tag.

by Jibran Advani

Published on:
3 August 2021Last updated:
3 August 2021

The <img> element in HTML let us put images on a page. It is a self closing tag meaning that it does not require a corresponding self closing tag. This is mainly because of the fact that this element is not related to typography and since it is just an extension of typography, content is not needed in this element.

The <img> element in HTML is very simple to use. Lets have a look at below example:

1<img src="some-image.jpg" alt="An Image">
2

As can be seen from above, the image element takes two at least two attributes to function properly. The src attribute and and an alt attribute. The alt attribute is optional though but it has such a high importance in real world scenario that it will not be wrong to say that it is a mandatory attribute.

The alt (short for alternate text) attribute in an image element performs two functions. One is that the text inside this attribute is displayed on the screen when the image could not be loaded and the other and most important use-case is that it useful for users who are visually impaired and use some text-to-speech softwares. It is also an important factor in improving the overall website's SEO.

The src (short for source) attribute is absolute mandatory. It tells browsers from where and which image should be displayed in a particular image element. It can be a relative path from the file system from where the image should be fetched as illustrated in the above example or it can be a url which is illustrated in below example.

1<img
2  src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-begin-6753651837108462.5-s.png" alt="Google Image">
3

The image element also comes with some attributes other than src and alt attributes. However, it is recommended to always style images through CSS. Two other important could be width and height attributes which determine the width and height of an image in terms of pixels. Let's have a look at below example.

1<img
2  src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-begin-6753651837108462.5-s.png"
3  alt="Google Image"
4  width="100"
5  height="100"
6>
7

It is highly recommended to always style images with CSS.