lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter2Title

webIntroHtmlChapter1Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

# img Tag

The `<img>` tag is used to insert images into web pages.

The main attributes of the img tag are `src`, `alt`, `width`, and `height`.

 

## src Attribute

This is a required attribute that specifies the image's URL.

The URL can point to a different image on the same website or an image provided by an external website.

Using the `<img>` tag without the src attribute will not display any image.

```html title="img Tag src Attribute"
<img src="https://example.com/myimage.jpg" />
```

 

## alt Attribute

This attribute specifies alternative text for the image.

It's used as a fallback when the image fails to load or for screen readers to assist visually impaired users.

Though not mandatory, the alt attribute is essential for search engine optimization (SEO).

```html title="Setting Alternative Text"
<img src="https://picsum.photos/300" alt="Sunset sea view" />
```

 

## `width` and `height`

These attributes specify the width and height of the image, with the default unit being pixels (px).

Pixels refer to individual dots on a display screen. If width and height are not specified, the image is displayed at its original size.

```html title="Setting Image Size"
<img src="https://picsum.photos/300" width="300" height="200" />
```

 

## Using the img Tag

The img tag can be used as follows:

1. Specify src and alt attributes

```html title="Basic Image Tag Usage"
<img src="https://picsum.photos/300" alt="Profile picture" />
```

 

2. Set image size with width and height

```html title="Setting Image Size"
<img
 src="https://picsum.photos/300"
 alt="Random image"
 width="200"
 height="150"
/>
```

The `<img>` tag must include the `src` attribute. Without `src`, the browser won't know which image to display, resulting in no image being shown. Therefore, the `src` attribute is essential.

### The `<img>` tag will display a fallback image if there is no `src` attribute with the image's URL.

img Tag

src Attribute

alt Attribute

width and height

Using the img Tag

The <img> tag will display a fallback image if there is no src attribute with the image's URL.

`width` and `height`

The `<img>` tag will display a fallback image if there is no `src` attribute with the image's URL.