Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Image element – HTML

Demo

Summary

To add an image to a web page using HTML, use the img element:

<img src="my-picture.jpg" alt="Dog running on grass">

To see what this element looks like in the browser, view the Demo section below.

Details

The image element allows you to embed an image in your web page. Common image formats include JPG, PNG, SVG, and GIF.

The image element consists of a single, self-closing tag (this is also referred to as an empty element).

The src attribute is required when using the image element. It’s used to specify the path to the image file that you want to include in your page.

The alt attribute is optional but recommended. It is used to include a text description of the image that can be read by screen readers. The description is also displayed in cases where the image isn’t able to load on the page.

Exercises

Recreate the embedded CodePen demo by typing out the HTML code. Then, try customizing the image element.

References

The Image element on MDN

Lesson tags: Open Lesson
Back to: HTML Reference > HTML Body Elements