HTML Β· Chapter 15 of 45
HTML Images
The <img> tag embeds an image using the src attribute for the file path and the alt attribute for descriptive fallback text. <img> is a void (self-closing) element.
Always include meaningful alt text β it's shown if the image fails to load and read aloud by screen readers, making it essential for accessibility.
Syntax
<img src="file.jpg" alt="description">src and alt
src points to the image file (relative or absolute path). alt describes the image content for accessibility and SEO, and displays if the image can't load.
Sizing images
Use width and height attributes (or CSS) to control image dimensions and prevent layout shift while the image loads.
Example 1 (html)
<img src="mountain.jpg" alt="Snow-capped mountain at sunrise" width="400">Output
(displays the mountain image at 400px wide)The alt text describes the scene in case the image fails to load.
Example 2 (html)
<img src="logo.png" alt="" role="presentation">Output
(decorative image, hidden from screen readers)Empty alt with role="presentation" marks purely decorative images.
Key points
- <img> is a void element requiring no closing tag.
- src specifies the image file path.
- alt provides accessible fallback text β never skip it.
- width and height attributes help prevent layout shift.
π‘ Note: Use modern formats like WebP for smaller file sizes and faster page loads.