HTML Images

Images are added with the <img> element, an empty element with no end tag.

The <img> element relies on two key attributes: src for the file path and alt for a text description used by screen readers and shown if the image cannot load.

Adding an Image

An image

<!DOCTYPE html>
<html>
<body>

<img src="photo.jpg" alt="A scenic view">

</body>
</html>

Key Attributes

AttributePurpose
srcPath to the image file
altText shown if the image cannot load
widthWidth in pixels
heightHeight in pixels

Setting a Size

width and height

<!DOCTYPE html>
<html>
<body>

<img src="photo.jpg" alt="A scenic view" width="300" height="200">

</body>
</html>
Note: Always include alt text. It is essential for accessibility and helps when an image is missing.

Exercise: HTML Images

Which attribute provides the path to an image file?