Nearby lessons
12 of 24📷 HTML Images
📌 What are HTML Images?
HTML <img> tags are used to embed images in web pages. This guide covers syntax, attributes, folder structures, and best practices for beginners.
🧾 Introduction to HTML Images
The HTML <img> element embeds images in documents. It is a self-closing tag that requires at least two attributes: src (source of the image) and alt (alternative text for screen readers and SEO).
📌 Basic Syntax
A basic image element includes the src and alt attributes. Example: <img src="image.jpg" alt="Description of image">
🖼️ Basic Image Example
Code Example
PREVIEW READY
⚙️ Image Attributes
| Attribute | Description |
|---|---|
src | Path to the image file (URL or relative path) |
alt | Alternative text for accessibility and SEO |
align | Aligns image with surrounding text (left, right, middle) - Deprecated |
border | Adds a border around image (use CSS instead) |
hspace | Horizontal space around image (Deprecated) |
vspace | Vertical space around image (Deprecated) |
width | Width in pixels (use CSS for better control) |
height | Height in pixels (use CSS for better control) |
loading | "lazy" for deferred load, "eager" for immediate |
srcset | Multiple image sources for responsive images |
sizes | Image display sizes for different viewports |
decoding | "async", "sync", or "auto" for decoding method |
📏 Sized Image Example
You can control the image size using
width and height attributes, although using CSS is preferred.Code Example
PREVIEW READY
🔗 Using Images as Links
You can make an image clickable by wrapping it inside an
<a> (anchor) tag. This is useful for logos, thumbnails, and buttons.Code Example
PREVIEW READY
📁 Different Folder Structures for Images
How to use the
<img> tag correctly based on different folder structures.Code Example
PREVIEW READY
❌ Common Errors in Image Usage
- 🚫 Missing
alttext (hurts accessibility) - 🚫 Broken path in
src(image won't load) - 🚫 Using absolute file path (C:/Users/...) instead of web path
- 🚫 Forgetting to specify width/height in layout-sensitive areas
Code Example
PREVIEW READY
⚠️ Avoid: Missing Alt Text
Images without
alt text create problems for screen readers and SEO. Always include meaningful alternative descriptions.Code Example
PREVIEW READY
🖼️ Image with Caption using Figure & Figcaption
Use
<figure> to group an image with a caption using <figcaption>. This is useful for articles, galleries, and accessibility.Code Example
PREVIEW READY
🧠 Common Image Formats and Their Uses
| Attribute | Description |
|---|---|
JPG/JPEG | Best for photos with lots of colors. Compressed and small file size, but lossy quality. |
PNG | Best for images with transparency or text. Lossless compression. |
GIF | Supports animations and transparency, but limited to 256 colors. |
SVG | Best for logos and icons. Vector-based and resolution-independent. |
WebP | Modern format with great compression and quality. Supported by most modern browsers. |
AVIF | Newest format with even better compression than WebP. Growing browser support. |
💡 Image Best Practices
- ✅ Always include meaningful
alttext for accessibility - ✅ Use
loading="lazy"for below-the-fold images - ✅ Optimize images for web (proper format and compression)
- ✅ Prefer CSS for image sizing instead of width/height attributes
- ✅ Use
srcsetandsizesfor responsive images - ✅ Consider using modern formats like WebP or AVIF for better performance
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5
Keep Going!HTML Audio