Lesson 3: Images in HTML

Images are commonly used in many websites. You can include an Image on your website by using the img tag.

This is an example of how the image tag is used:

<img src="cat_picture.jpg" alt="A picture of a cat">

The img tag is also another tag that does not have a corresponding closing tag. A tag that doesn’t have a closing tag is called a “self-closing” tag.

The img tag has two main attributes: src and alt.

HTML Tag Attributes

Each HTML tag accepts a set of attributes. Tag attributes are used to specify additional information about the HTML element, and they are simply name-value pairs. Tags are only specified inside the opening HTML tag. To add an attribute to a tag, you just add the name of the tag, followed by an equal sign, and then the value in quotation marks.

In the above img tag, the src attribute, which is used to specify the source of the image, is assigned the value of cat_picture.jpg (where the picture is located). The alt attribute is also included to provide information about the image. In this example, the alt attribute is assigned: a picture of a cat. The alt attribute stands for “alternative text”, and is shown to users who are unable to see the image.

There are also other attributes we can include in an img tag, such as width and height. These tags are used to adjust the width and height of an image. For example, if we wanted the above picture to have a width of 300 pixels and a height of 400 pixels, we can do the following:

<img src="cat_picture.jpg" alt="A picture of a cat" width="300" height="400">

Try adding an image to your webpage by using the editor to the right. Grab a picture of the internet, and include it as the src value attribute for the img tag. You this as a starting example:

<img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?
auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"alt="a picture of a cat">