Skip to main content

Using Images

In this tutorial, we will learn about using images in HTML. Images are an essential part of any website, as they can make pages more engaging and visually appealing. By the end of this guide, you should be able to embed an image into your HTML document, resize it, and link it to another webpage.

Embedding an Image​

To embed an image in HTML, we use the <img> tag. The <img> tag is an empty tag, which means it does not have a closing tag. The source of the image is specified in the src attribute.

Here's the syntax:

<img src="url_of_image" alt="description_of_image">

The alt attribute provides an alternative text for the image if it cannot be displayed. This could be due to an incorrect URL, the image does not exist, or if the user is using a screen reader.

Here is an example:

<img src="https://www.example.com/images/pic.jpg" alt="A beautiful sunset">

Resizing an Image​

You can control the height and width of an image using the height and width attributes. These are defined in pixels.

Here's the syntax:

<img src="url_of_image" alt="description_of_image" width="500" height="600">

In this example, the width of the image will be 500 pixels and the height will be 600 pixels.

<img src="https://www.example.com/images/pic.jpg" alt="A beautiful sunset" width="500" height="600">

Please note, it's recommended to maintain the aspect ratio of the image to avoid distortion.

Linking an Image​

To make an image a clickable link, you can wrap the <img> tag with the <a> tag. The href attribute in the <a> tag is used to specify the URL of the page the link goes to.

Here's the syntax:

<a href="url_of_page">
  <img src="url_of_image" alt="description_of_image">
</a>

Here is an example:

<a href="https://www.example.com">
  <img src="https://www.example.com/images/pic.jpg" alt="A beautiful sunset">
</a>

In this example, clicking the image will take you to https://www.example.com.

That's it for this guide! Now you should be able to embed, resize, and link images in HTML. Remember, practice is the key to mastering these skills, so don't forget to try out what you've learned in your own projects.