HTML Tutorial – Images

HTML Image Syntax

<img src="image url" alt="some text to describe the image" width="width" height="height">

Images are defined with the <img> tag. It is an empty tag, so you do not need a closing tag for it.

The src Attribute

You will need the src, stands for source, attribute to display an image on a web page. The value of the src attribute is the URL of the image you want to display, it can absolute or relative URL.

The alt Attribute

It is recommended that you specify alt (alternate text) attribute for an image. If a browser cannot find an image, it will display the value of the alt attribute.

How To Set Height and Width of an Image

You can specify the width and height of the image, and the browsers will scale the image to the dimensions you specified. If you do not specify the width and height of an image, then the browsers will display the image in its original dimensions.

HTML Image Example

<!DOCTYPE html>
<html>
<body>
<img src="https://whatabouthtml.com/wp-content/themes/WAH/images/apple-touch-icon-152x152.png" alt="How to include image in html web page" width="152px" height="152px">
</body>
</html>
Try it yourself »

Image as Link

To use an image as a link, simply nest the tag inside the <a> tag:

HTML Image as Link Example

<!DOCTYPE html>
<html>
<body>
<a href="https://whatabouthtml.com/html-tutorial-beginners">
  <img src="https://whatabouthtml.com/wp-content/themes/WAH/images/apple-touch-icon-152x152.png" alt="HTML Tutorial" width="152px" height="152px">
</a>
</body>
</html>
Try it yourself »