HTML Web Design Tutorial #20

Attributes That Should Be Added to All Images

In part 19 you learned how to specify the location of an image, in order to embed it into a web page. Now we'll look into adding three more attributes that should be included in all image tags.

Depending on its dimensions, an image in a web page is going to take up a certain amount of space. If a web browser knows before it draws the page, how much space that's going to be, then it can reserve that space for the image.

However, if it doesn't have the image dimensions ahead of time, then the page may shift a lot while it's loading. This is because other content on the page may have to be redrawn once the image finally loads. To prevent this page shifting, you can tell the browser the image dimensions using the width and height attributes.

Another important attribute for the image tag is the "alt" attribute. It allows you to provide some text as an alternative for the image, in case a visitor cannot, or chooses not, to see images. We will see how to add these attributes in this next lesson. Click on the play button below to begin.

<<<Last Tutorial

Next Tutorial>>>