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