HTML Images

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page. It is an empty tag, meaning it contains attributes only and does not have a closing tag.

The src attribute specifies the path to the image, and the alt attribute provides alternative text for the image.

<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli" width="500" height="333">

The src and alt Attributes

The src attribute is required, and it contains the URL or path of the image. The alt attribute provides alternative text that is displayed if the image cannot be loaded. It is also crucial for accessibility (screen readers) and SEO.

Image Size - width and height

You should always specify the width and height of an image. If these are not set, the web page may flicker as the image loads, because the browser doesn't know how much space to reserve for it.

Animated Images (GIFs)

HTML allows animated GIFs to be displayed.

<img src="https://www.w3schools.com/html/programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Image as a Link

To use an image as a link, simply wrap the <img> tag inside an <a> tag.

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Image Maps

The <map> tag defines a client-side image map. An image-map is an image with clickable areas. The areas are defined with one or more <area> tags.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<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">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>