Images in HTML

Basic Image

The <img> tag displays an image. It needs a src (source) and alt (description):

<img src="cat.jpg" alt="A cute cat">
      

The alt text is important for accessibility and for when the image can’t load.

Image Size

You can control the size of an image using the width or height attributes:

<img src="cat.jpg" alt="A cute cat" width="300">
      

Only set one dimension (width or height) to keep the image from stretching.

Images From the Web

You can also use images hosted online:

<img src="https://example.com/dog.png" alt="A happy dog">
      

This works as long as the image URL is public.

Organizing Your Images

It’s a good idea to store your images in a folder like this:

project/
  index.html
  images/
    cat.jpg
    dog.png
      

Then link to them like this:

<img src="images/cat.jpg" alt="A cute cat">
      

Lesson Checkpoint

Before moving on, make sure you have:

1. Added at least one image to your project.
2. Used src and alt correctly.
3. Experimented with image sizes.
4. Committed your changes to GitHub.
5. Viewed your updated site on GitHub Pages.

Use the navigation bar to continue to the next lesson.