Images make web pages more engaging and help communicate information visually. The HTML img element is one of the most commonly used elements on the web, and learning to use it properly is essential for any web developer.
The Img Element
The <img> element is used to embed images in HTML documents. Unlike most HTML elements, it's a self-closing tag (also called an empty element)—it doesn't have a closing tag.
basic-image.html
<img src="photo.jpg" alt="Description of the photo">The Src Attribute
The src (source) attribute is required and specifies the path to the image file. It can be an absolute URL, relative URL, or root-relative path.
Relative Path
relative-path.html
<!-- Image in the same directory -->
<img src="logo.png" alt="Company Logo">
<!-- Image in a subdirectory -->
<img src="images/photo.jpg" alt="Photo">
<!-- Image in parent directory -->
<img src="../header.png" alt="Header">Root-Relative Path
root-relative.html
<!-- Always starts from the site root -->
<img src="/images/logo.png" alt="Logo">
<img src="/assets/banner.jpg" alt="Banner">Absolute URL
absolute-url.html
<!-- External image -->
<img src="https://example.com/images/photo.jpg" alt="Photo">
<!-- CDN-hosted image -->
<img src="https://cdn.example.com/logo.png" alt="Logo">The Alt Attribute (Critical!)
The alt (alternative text) attribute provides a text description of the image. This is crucial for accessibility and SEO.
alt-text.html
<img src="sunset.jpg" alt="Beautiful orange sunset over the ocean">
<img src="product.jpg" alt="Blue ceramic coffee mug with white handle">
<img src="team.jpg" alt="Our marketing team at the annual conference">Why Alt Text Matters
- Accessibility: Screen readers read alt text aloud to visually impaired users
- SEO: Search engines use alt text to understand image content
- Broken images: Alt text displays when images fail to load
- Slow connections: Users see alt text before images load
Writing Good Alt Text
✅ Good alt text examples:
MARKUP
<img src="dog.jpg" alt="Golden retriever playing fetch in the park">
<img src="graph.png" alt="Bar chart showing 50% increase in sales from 2023 to 2024">
<img src="recipe.jpg" alt="Chocolate chip cookies on a white plate">❌ Poor alt text examples:
MARKUP
<img src="dog.jpg" alt="Image">
<img src="graph.png" alt="Graph">
<img src="recipe.jpg" alt="IMG_1234.jpg">These don't provide meaningful descriptions!
Decorative Images
For purely decorative images that don't add meaningful content, use empty alt text:
decorative.html
<!-- Decorative spacer or border -->
<img src="decorative-line.png" alt="">
<!-- Icon that's purely decorative (text nearby explains it) -->
<img src="arrow-icon.png" alt="">Note: Empty alt (alt="") is different from missing alt. Empty alt tells screen readers to skip the image.
Basic Image Examples
Simple Image
simple-image.html
<img src="portrait.jpg" alt="Professional headshot of Jane Smith">Logo
logo.html
<img src="company-logo.png" alt="Acme Corporation">Product Image
product.html
<img src="laptop.jpg" alt="Silver laptop computer with 15-inch display">Icon with Context
icon.html
<!-- Icon with adjacent text - use alt="" -->
<button>
<img src="download-icon.png" alt="">
Download
</button>
<!-- Icon without text - describe function -->
<button>
<img src="download-icon.png" alt="Download file">
</button>Images in Context
Article Header Image
article-image.html
<article>
<h1>10 Tips for Better Photography</h1>
<img src="camera-photo.jpg" alt="Professional DSLR camera on a wooden desk">
<p>Photography is an art that anyone can learn...</p>
</article>Product Gallery
product-gallery.html
<section>
<h2>Product Images</h2>
<img src="product-front.jpg" alt="Blue sneaker front view">
<img src="product-side.jpg" alt="Blue sneaker side view">
<img src="product-back.jpg" alt="Blue sneaker back view">
</section>Team Section
team.html
<section>
<h2>Meet Our Team</h2>
<div>
<img src="john.jpg" alt="John Smith, CEO">
<h3>John Smith</h3>
<p>CEO</p>
</div>
<div>
<img src="jane.jpg" alt="Jane Doe, CTO">
<h3>Jane Doe</h3>
<p>CTO</p>
</div>
</section>Making Images Clickable
You can wrap an image in an anchor tag to make it clickable:
clickable-image.html
<!-- Image link to another page -->
<a href="product-details.html">
<img src="product.jpg" alt="View details of blue ceramic mug">
</a>
<!-- Image link to larger version -->
<a href="photo-full-size.jpg">
<img src="photo-thumbnail.jpg" alt="Beach sunset - click for full size">
</a>
<!-- Logo linking to homepage -->
<a href="/">
<img src="logo.png" alt="Company Name - Home">
</a>Common Mistakes to Avoid
❌ Common mistakes:
- Missing alt attribute (bad for accessibility and SEO)
- Using filename as alt text (
alt="IMG_1234.jpg") - Wrong file path causing broken images
- Using very large image files (slow loading)
- Not testing images on different devices
- Forgetting to optimize images before uploading
- Using images for text (bad for accessibility)
Handling Broken Images
If an image fails to load, the browser will:
- Display the alt text
- Show a broken image icon
- Apply any CSS styling to the img element
Common causes of broken images:
- Incorrect file path or filename
- File doesn't exist or was deleted
- Server issues or permissions problems
- Typos in the src attribute
- Network connectivity issues
Organizing Image Files
Best practices for organizing images in your project:
file-structure.txt
website/
├── index.html
├── about.html
└── images/
├── logo.png
├── banner.jpg
├── products/
│ ├── product1.jpg
│ └── product2.jpg
└── team/
├── member1.jpg
└── member2.jpgorganized-images.html
<!-- Using organized structure -->
<img src="images/logo.png" alt="Company Logo">
<img src="images/products/product1.jpg" alt="Product 1">
<img src="images/team/member1.jpg" alt="Team member John">Best Practices
- Always include alt text for accessibility and SEO
- Use descriptive filenames:
team-photo.jpgnotIMG_1234.jpg - Organize images in dedicated folders for better management
- Optimize images before uploading (compress file sizes)
- Use appropriate image formats (we'll cover this in the next lesson)
- Test images across different browsers and devices
- Keep image filenames lowercase and use hyphens instead of spaces
- Consider using CDNs for faster image delivery
Accessibility Checklist
✅ Image Accessibility Checklist:
- Every img element has an alt attribute
- Alt text is descriptive and meaningful
- Decorative images use empty alt (
alt="") - Alt text doesn't start with "image of" or "picture of"
- Important information isn't conveyed only through images
- Text in images is also available as actual text
Key Takeaways
- The
<img>element embeds images in HTML srcattribute specifies the image file pathaltattribute provides alternative text (required for accessibility)- The img element is self-closing (no closing tag needed)
- Write descriptive alt text that describes the image content
- Use empty alt for decorative images
- Images can be wrapped in anchor tags to make them clickable
- Organize images in folders for better project structure
What's Next?
Now that you know the basics of adding images, you're ready to learn about image attributes that control size, dimensions, and behavior. In the next lesson, we'll explore attributes like width, height, title, and more.