Images

Images on the web are great. They can help improve the visual appearance of a website. Let's learn about images in HTML, including how to add alt text to an image, how to set a width and height size to images, and how to add a caption to an image using the <figcaption> element.

Images

This is how you add images to a page, the image tag, img. Here's an example usage of an img tag:

HTML
<img src="cat.png" alt="Picture of a cute cat.">

Picture of a cute cat. 😍😍😍

The src attribute in img tags works like the href attribute on a tags. They can have an absolute or relative path. In this case, we are linking to the relative file cat.png to display.

Alt Text

The alt attribute is for alternate text. You can describe what the image is about in text which allows screen readers and search engines to understand what the image is about. It provides helpful information for those who cannot or choose not to see the image.

In our example, we are using the alt attribute to describe the image.

HTML
<img src="cat.png" alt="Picture of a cute cat.">

The alt attribute here is used to describe the image and says Picture of a cute cat..

Image Size: Width and Height

Another set of attributes that might be helpful is the width and height attributes. They take the size of the image as their values and it lets the browser allocate that much space on the page before the image actually loads. This helps prevent the page jumping around after the image loads.

HTML
 <img width="1000" height="667" src="cat.png" alt="Picture of a cute cat." />

Our image is 1000 pixels wide and 667 pixels tall and the browser will allocate space for it.

Figures and Captions

There are times where you want to give your image a caption. You can accomplish this by nesting your image, along with a figure caption tag, figcaption inside a figure tag, like so:

HTML
<figure>
    <img src="cat.png">
    <figcaption>Picture of a cute cat.</figcaption>
</figure>

This is a more semantic way of adding a caption to an image because it ties the caption to the image inside the figure tag.

Resources

• HTML Image Tag - MDN Web Docs

• Support Us
• Discord
• Share
• Post
• Share