How to Embed Images in HTML: A Beginner’s Guide

If you are looking to embed an image in your HTML you will need to use the <img /> tag.

<img src="INSERT_IMAGE_URL" alt="INSERT_TEXT" />

The src attribute is used to specify what image you would like to load in the browser. The alt attribute is used to describe the image in the event the image doesn't load. It helps with accessibility.

The image element is an inline element by default.

Attributes to use when working the the Image Element

In addition to the src and alt attribute you can also use the width attribute to set width and height attribute to set the height of the image.

<img src="INSERT_IMAGE_URL" alt="INSERT_TEXT" width="300" height="300" />

Here you are specifying the size in pixels you'd like the image to be on the page. These attributes are fixed dimensions so if you are looking to make your image responsive be sure to use CSS to make the image responsive. These attributes only accept pixel values and do not work with rem, em, %, vh, vw, or auto.

For SEO it is helpful to use an intrinsic dimension by setting the width and height and then use CSS to set the responsiveness of an image.