Adding Images to Your Webpage

Introducing the <img> Tag

To add an image in HTML, we use the <img> tag. This tag is a bit different from the ones you've seen so far, like <p> or <li>. It's a self-closing (or void) element, meaning it doesn't need a closing tag like </img>. All the information the browser needs is contained within the opening tag using attributes.

The <img> tag has two required attributes:

1. src (source): This tells the browser where to find the image file.
2. alt (alternative text): This provides a text description of the image.

Let's start by understanding how to specify the image source.

As the video demonstrates, the src attribute can point to an absolute URL (a full web address starting with http:// or https://). This is useful for images hosted on other websites.

However, for your own website, it's best practice to store your images within your project folder and use a relative path. This makes your project self-contained and easier to manage.

Organizing and Linking Local Images

A well-organized project is easier to work with. Just as you have a single index.html file, it's a good idea to create a dedicated folder for your images.

1. In your my-education-site project folder, create a new folder named images.
2. Next, find an image you'd like to use. For your project, you might look for an image related to learning, books, or technology. Websites like Unsplash, Pexels, and Pixabay offer high-quality, royalty-free images.
3. Download an image and save it inside your new images folder. Give it a simple, descriptive filename, like learning-photo.jpg.

Now, let's see how to link to this local image.

Since you placed your image in an images subfolder, your src path will need to include the folder name. For example, if you add an image below the lists you created in the last lesson, the HTML would look like this:

<!-- Add this to your index.html file -->
<img src="images/learning-photo.jpg">

If you save your file and open it in the browser, you should see your image! It might be very large, but don't worry about that for now. We'll touch on sizing shortly.

The Importance of alt Text for Accessibility

Right now, our <img> tag is missing its second required attribute: alt. The alt attribute is crucial for web accessibility. It provides a text description that is used in several situations:

• Screen readers will read the alt text aloud to users who are visually impaired.
• The alt text will be displayed on the page if the image fails to load for any reason (e.g., a typo in the src path or a slow internet connection).
• Search engines use alt text to understand the content of an image, which can help with SEO.

This video segment clearly explains the purpose of the alt attribute.

To see the difference alt text makes, look at the image below. It shows what a screen reader might announce with and without alt text.

So, how do you write good alt text? Here are the best practices:

Here are the key rules summarized:

• Be descriptive and concise: Describe what's in the image. For our example, alt="A person sitting at a desk and writing in a notebook" would be good.
• Don't say "image of" or "picture of": Screen readers announce that it's an image automatically, so this is redundant.
• For decorative images: If an image is purely for decoration and adds no real information, you should still include the alt attribute but leave it empty: alt="". This tells screen readers to skip over the image.

Let's update our image tag with proper alt text:

<img src="images/learning-photo.jpg" alt="A person sitting at a desk and writing in a notebook">

Controlling Image Size

Your image might be taking up the entire page. While advanced resizing and responsive design are handled with CSS (which we'll cover later), HTML provides a quick way to control dimensions using the width and height attributes. These values are interpreted as pixels.

<img src="images/learning-photo.jpg" alt="A person sitting at a desk and writing in a notebook" width="400">

If you only set one attribute (e.g., width), the browser will automatically adjust the other dimension to maintain the image's original aspect ratio, which prevents it from looking stretched or squashed.

<img src="images/site-logo.png" alt="EduSite official logo" width="200">

Conclusion

Great job! You've learned how to bring visual content into your website, a huge step in making it more engaging. You've also learned about the critical importance of alt text in making your site accessible to all users.

Key Takeaways:

• Use the self-closing <img> tag to embed images.
• The src attribute specifies the path to the image file (either a URL or a local path).
• Organize your project by keeping images in a dedicated images folder.
• The alt attribute is mandatory and provides a text description for accessibility, broken links, and SEO.
• Use the width and height attributes for basic control over image size.

Preview of the Next Lesson:

Now that our page has text, lists, and images, it's time to connect it to the wider web. In the next lesson, we will learn how to create hyperlinks, allowing you to link to other pages on your site and to external websites.