Images make websites more attractive and easier to understand. HTML allows you to display images on a webpage using a dedicated tag.
Images are commonly used for logos, banners, product photos, icons, and illustrations.
The <img> Tag
HTML images are added using the <img> tag. This tag is a self-closing tag and does not require a closing tag.
The image file path is specified using the src attribute.
In this example:
- <img> defines an image element
- src specifies the image file location
If the image file exists in the correct location, the browser will display it on the page.
Using the alt Attribute
The alt attribute provides alternative text for an image. This text is shown if the image cannot be loaded.
The alt attribute is also important for accessibility and search engines.
Screen readers use the alt text to describe images to visually impaired users.
Search engines also use alt text to understand what the image represents.
Image File Formats
Common image formats used on websites include:
- JPG or JPEG for photos
- PNG for transparent images
- SVG for icons and logos
- GIF for simple animations
Relative vs Absolute Image Paths
Relative paths point to images within the same project folder.
Absolute paths point to images hosted on external websites.
Best Practices for Using Images
- Always use the alt attribute
- Optimize image size for faster loading
- Use correct image formats
- Organize images in folders
Why Images Matter for Jobs
Images are used heavily in real-world websites. Employers expect developers to know how to handle images properly for performance, accessibility, and layout.
Correct image usage improves user experience and website quality.
Practice Task
Add an image to a webpage using a relative path and include meaningful alt text.
What You Will Learn Next
In the next lesson, you will learn about image attributes and best practices for professional websites.