HTML images

In HTML, you can display images on a web page using the <img> tag. The <img> tag is an empty element, which means it doesn't have a closing tag. Instead, it uses attributes to define various properties of the image. Here's the basic syntax :

Let's break down the attributes :

src : This attribute specifies the path to the image file. It can be a relative or absolute URL, or a path on the local file system.
alt : This attribute provides alternative text for the image. It is displayed when the image cannot be loaded or for accessibility purposes. It should describe the image's content or purpose.


<img src="example.jpg" alt="Example Image">

In this example, the image file "example.jpg" is located in the same directory as the HTML file, and "Example Image" is the alternative text.

The right way to insert images in you html code with explanation

HTML Image Definition


<img src="image.jpg" alt="Image Description">

The img tag is used to define an image in HTML. The src attribute specifies the URL of the image file.
The alt attribute provides alternative text that is displayed if the image cannot be loaded or if the user is using a screen reader.

Specifying an image's height and width


<img src="example.jpg" alt="Example Image" width="300" height="200">

In this example, we have specified the width and height of the image using the width and height attributes. This is useful when you want to control the size of the image and ensure that it doesn't appear too small or too large on your web page.

Adding a border to an image


<img src="example.jpg" alt="Example Image" style="border: 1px solid black;">

This example shows how to add a border around an image using inline CSS. The border property is used to specify the style, width, and color of the border.

Adding a caption to an image


<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption>This is an example image</figcaption>
</figure>

In this example, we have used the figure and figcaption elements to add a caption to an image. The figure element is used to group the image and caption together, while the figcaption element is used to add the actual caption text.

Creating an image map :


<img src="example.jpg" alt="Example Image" usemap="#examplemap">
<map name="examplemap">
  <area shape="rect" coords="0,0,200,200" href="example.html" alt="Example Area">
</map>

This example shows how to create an image map using the map and area elements. The map element is used to define the clickable areas on the image, while the area element is used to specify the shape, size, and location of each clickable area. The usemap attribute is used to associate the image with the map.

Using an image as a link


<a href="example.html">
  <img src="example.jpg" alt="Example Image">
</a>

This example shows how to use an image as a link. Simply wrap the img element in an a element and specify the URL that you want the link to point to using the href attribute. When the user clicks on the image, they will be taken to the linked page.