HTML Images Summary

Images can be added to HTML using the <img/> tag. This tag is self-closing and doesn’t require a separate end tag.

<img src="url-of-image" width="100" height="100" alt="text about image" />

Src

The most important attribute of the image tag is the source. This is where you point to the location in your files where the image file has been placed. The source is a url, or web address.

<img src="https://domain.com/picture.jpg" />

Width & Height

Every images should have attributes for width and height. These are the width and the height of the original image. Unlike CSS, the width and height in the image element doesn’t use any units like ‘px’ or ’em.’

<img width="100" height="100" />

Alt

The alternative or ‘alt’ attribute allows you to add text to an image that describes what it is for people who can not see it. This is an important part of making website accessible for the blind.

<img alt="description of image" />

Code Sandbox

Register to use the AI tutor.