HTML Images

Adding Images to Your Page

The <img> tag is used to embed images. It's a self-closing tag that requires the src attribute to specify the image source.

Always include the alt attribute to describe the image for accessibility and SEO purposes.

<!-- Basic image -->
<img src="image.jpg" alt="Description of image">

<!-- Image with dimensions -->
<img src="photo.jpg" alt="Photo" width="300" height="200">

<!-- Image as link -->
<a href="page.html">
  <img src="button.jpg" alt="Click here">
</a>
  • src - Path to the image file
  • alt - Alternative text description
  • width - Image width in pixels
  • height - Image height in pixels
  • title - Tooltip text on hover

Try Images

<h2>My Photo Gallery</h2>
<img src="https://via.placeholder.com/300x200/d1039e/ffffff?text=Image+1" alt="Sample Image 1" width="300">
<img src="https://via.placeholder.com/300x200/7a0060/ffffff?text=Image+2" alt="Sample Image 2" width="300">

Note: Always include alt text for accessibility. It's shown when images can't load and read by screen readers.