Image attributes (src, alt)

Hello, students! In this lesson, we will learn about the src and alt image attributes.

Topics

• src attribute
• alt attribute
• Code examples

src attribute

The src attribute specifies the URL of the image.

The image URL should point to a valid image file, such as a .jpg, .png, or .gif file.

For example, the following code will insert an image with the name image.jpg into the page:

<img src="image.jpg">

alt attribute

The alt attribute provides an alternative description of the image for screen readers.

If the image cannot be loaded or if the user is using a screen reader, the alternative description will appear in place of the image.

The alternative description should be brief and informative, describing the content of the image.

For example, the following code will insert an image with the name image.jpg into the page, with an alternative description:

<img src="image.jpg" alt="This is an image of a cat.">

Code examples

Here are some code examples to use the src and alt attributes:

<img src="image.jpg" alt="This is an image of a cat.">

<img src="image2.png" alt="This is an image of a dog.">

<img src="image3.gif" alt="This is an image of a flower.">

Exercises

• Create an HTML document with three images, each with a different alternative description.
• Save the document and open it in a browser.

Observe how the browser displays the images and alternative descriptions.

Good luck!

Conclusion

The src and alt attributes are important to ensure that images are accessible to all users.

Ready to learn more?

In the next module, we will learn about tables.

Tables can be used to organize information in a clear and concise manner.