HTML Images

Learn how to use images in HTML

HTML Images

Images are an essential part of web design. They can make your website more visually appealing and help convey information. Here's how to use images in HTML:

Basic Image

To add an image, use the <img> tag with the src attribute:

<img src="image.jpg" alt="Description of the image">

Image Size

You can specify the width and height of an image using the width and height attributes:

<img src="image.jpg" alt="Description" width="300" height="200">

You can make an image clickable by wrapping it in an <a> tag:

<a href="https://www.example.com">
  <img src="image.jpg" alt="Clickable image">
</a>

Responsive Images

To make images responsive, you can use CSS or the max-width property:

<img src="image.jpg" alt="Responsive image" style="max-width:100%; height:auto;">

Image Maps

Image maps allow you to create clickable areas on an image:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
</map>

Remember to always provide alternative text for images using the alt attribute to improve accessibility and SEO.