HTML Image:

Images can improve the design and appearance of the web page. To add images to your web pages using HTML, we have to follow the below steps:

1. The <img> Tag:

This tag is the key to embedding images.

It’s a self-closing tag, meaning it doesn’t have a closing tag.

2. Essential Attributes:

src:

Specifies the image’s source URL. This is mandatory.

<img src=”image.jpg”>

alt:

Provides alternative text for accessibility and SEO. This is highly recommended.

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

3. Additional Attributes:

width: Sets the image width in pixels or as a percentage.

height: Sets the image height in pixels or as a percentage.

title: Displays a tooltip when hovering over the image.

Example :

<img src=”my-photo.jpg” alt=”A photo of me smiling” width=”200″ height=”150″>

Image as a LinK:

To use image as a Link put the <img> inside the <a> tag.

Example:

<a href = “https://www.luckyithub.com>

<img src = “smile.jpg” alt =”full tutorial website”>

</a>

4. Image Paths:

Relative Paths: Paths relative to the HTML file’s location.

<img src=”images/cat.jpg”>  “`

Absolute Paths:

Full URLs pointing to the image’s exact location on the web.

<img src=”https://www.example.com/images/logo.png”>