Table of Contents
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
- Getting Started with TypeScript
- How to Install Node on Windows, macOS and Linux
- Managing PHP Dependencies with Composer
- Getting Started with Svelte
- Git Tutorial: Learn how to use Version Control
- How to Serve Static Files with Nginx and Docker
- How to Set Up Cron Jobs in Linux
- How to deploy a Deno app using Docker
- Getting Started with Deno
- How to deploy a Node app using Docker
- Getting User Location using JavaScript's Geolocation API
- Creating a Twitter bot with Node.js