HTML Image

HTML images are included using the <img> tag. This tag allows you to embed images into your web pages. Here’s a basic overview of how it works, along with some examples.

Basic Syntax

<img src="url" alt="description" />

• src: Specifies the path to the image you want to display.
• alt: Provides alternative text for the image if it can't be displayed. This is important for accessibility and SEO.

Examples

1. Basic Image

<img src="https://example.com/image.jpg" alt="A description of the image" />

In this example, the src attribute points to the URL of the image you want to display, and the alt attribute provides a description of the image for screen readers and in case the image cannot be loaded.

2. Image with Width and Height

<img src="https://example.com/image.jpg" alt="A description of the image" width="300" height="200" />

Here, the width and height attributes set the dimensions of the image. This can help control the layout of your page.

3. Responsive Image

<img src="https://example.com/image.jpg" alt="A description of the image" style="width: 100%; height: auto;" />

By setting the width to 100% and height to auto, the image will scale to fit the width of its container while maintaining its aspect ratio.

4. Image with a Link

<a href="https://example.com">
    <img src="https://example.com/image.jpg" alt="A description of the image" />
</a>

This wraps the image in a link, so when users click on the image, they'll be taken to the URL specified in the href attribute.

5. Image with Inline Styles

<img src="https://example.com/image.jpg" alt="A description of the image" style="border: 2px solid black;" />

This example uses inline CSS to add a black border around the image.

6. Image with title Attribute

<img src="https://example.com/image.jpg" alt="A description of the image" title="Hover text" />

The title attribute provides additional information that appears when you hover over the image.

These examples cover the basic usage of the <img> tag, but there are many other attributes and styles you can use to customize images further.