Adding Images to Your Webpage

Images are an important part of any webpage, as they can make your content more engaging and visually appealing. In this lesson, we'll learn how to add images to your HTML documents.

The <img> Tag

To add an image to your webpage, use the <img> tag. This tag is self-closing, meaning it doesn't have a separate closing tag. The `src` attribute specifies the path to the image file:

<img src="images/example.jpg" alt="Example Image">

The alt attribute provides alternative text for the image, which is displayed if the image cannot be loaded. It's also important for accessibility.

Image Dimensions

You can specify the width and height of the image using the `width` and `height` attributes:

<img src="images/example.jpg" alt="Example Image" width="600" height="400">

It's recommended to use CSS for responsive image sizing, but these attributes are useful for controlling the display in certain contexts.

Adding a Caption

To add a caption to an image, you can wrap the image in a <figure> tag and use the <figcaption> tag:

<figure>
    <img src="images/example.jpg" alt="Example Image">
    <figcaption>This is an example image.</figcaption>
</figure>

This structure makes it easier to associate captions with images, improving both semantics and accessibility.

Using External Images

You can also link to external images by providing the full URL in the `src` attribute:

<img src="https://www.example.com/images/sample.jpg" alt="Sample Image">

This allows you to display images hosted on other websites, but be cautious about the image's availability and loading time.

Practice Exercise

Try adding different types of images to your webpage. Use both local and external images, and experiment with different sizes and captions.