Images and media
Add images
Add an image with a useful source and text alternative, and understand why the img element does not have a closing tag.
Use the img element to put a picture on the page:
<img src="bicycle.jpg" alt="A red bicycle parked beside a canal">The src attribute tells the browser where to find the image file. It accepts the same kinds of URLs you use in links: relative paths, absolute paths, and full URLs.
img is a void element. It cannot contain content, so it has no closing tag.
After the browser parses your HTML, it makes a separate request for each image. If the file is missing or the path is wrong, the image slot stays empty or shows a broken icon. Check the path from the HTML file’s location, not from where you happen to be browsing in the terminal.
Common formats include JPEG, PNG, WebP, AVIF, GIF, and SVG. The right format depends on the image and how you export it. That choice affects file size and quality, but the basic HTML stays the same regardless of format.
The alt attribute is not optional decoration. It provides a text alternative when the image cannot be seen: on a slow connection, when images are blocked, or when someone uses assistive technology. We focus on writing good alt text in the next lesson.
Try this on your personal page: put an image in the same folder as your HTML file, reference it with a relative URL, save, and refresh. Then change one letter in src on purpose and reload. The broken result teaches you more about paths than any diagram will.
Lesson completed