Embedding Images with `img` Element

Hello! Welcome back to your front-end programming course.

In our last lesson, we established the skeleton of a webpage using semantic HTML elements like <header>, <main>, and <article>. This provided a meaningful structure for assistive technologies and search engines. Now, it's time to add the visual elements that bring a design to life.

This lesson addresses the learning outcome: Embed images using the <img> element with proper alt text and source attributes.

As a designer, you know that images are fundamental to creating an engaging user experience. Today, you'll learn the technical foundation for embedding images in a way that is not only visible but also accessible, performant, and semantically correct.

1. The Anatomy of an Image Element

To place an image on a webpage, we use the <img> element. This is a special kind of element known as a void element (or empty element), which means it doesn't have a closing tag. All the information it needs is provided through attributes. The two most important attributes are src and alt.

Let's start with a practical demonstration of how to add an image to a project.

As you saw, the basic syntax is <img src="path/to/your/image.jpg">.

The src Attribute and File Paths

The src (source) attribute is essential; it tells the browser where to find the image file. The path you provide can be of two types:

• Relative URL: Points to a file within your own website's folder structure. This is the most common and recommended approach.
  • src="dog.png": The image is in the same folder as the HTML file.
  • src="images/dog.png": The image is inside an images subfolder.
• Absolute URL: A full web address (e.g., https://...) pointing to an image hosted on another server.

It's best practice to host your own images and use relative paths. Relying on images from other websites ("hotlinking") can lead to broken images if the source is moved or taken down, and it uses their bandwidth, which is generally considered poor practice.

2. The alt Attribute: Designing for Everyone

The alt (alternative text) attribute is arguably the most critical attribute from a user experience perspective. It provides a textual description of the image.

This text is used in several key situations:

1. Accessibility: Screen readers announce the alt text to visually impaired users, allowing them to understand the image's content and purpose.
2. Broken Images: If an image fails to load (due to a wrong path, network error, etc.), the browser will display the alt text instead.
3. Search Engine Optimization (SEO): Search engines use alt text to understand what an image is about, which can help your page rank in image searches.

The next segment of the video you just watched includes an excellent demonstration of how a screen reader uses alt text.

How to Write Good alt Text

Writing effective alt text is a design skill. It's about conveying the content and function of an image concisely.

Key guidelines for alt text:

• Be descriptive and concise: Describe what's in the image. For example, alt="A golden retriever puppy playing with a red ball in a grassy field."
• Don't be redundant: Avoid starting with "Image of..." or "Picture of...". The <img> tag already tells the browser it's an image.
• Consider the context: If the image is a link, the alt text should describe the link's destination (e.g., alt="Read our full company history.").
• Use an empty alt attribute for decorative images: If an image is purely for decoration and provides no information, use alt="". This tells screen readers to ignore it, preventing unnecessary noise for the user.

3. Sizing Images and Improving Performance

Have you ever loaded a webpage where the text suddenly jumps down to make room for an image that just appeared? This is called Layout Shift, and it creates a jarring user experience.

You can prevent this by specifying the image's dimensions using the width and height attributes.

<img src="images/puppy.jpg" alt="A golden retriever puppy." width="400" height="300">

When you include these attributes, the browser reserves the correct amount of space for the image before it has even downloaded. This leads to a smoother, more stable page load.

Important Note: Use the width and height attributes to tell the browser the image's intrinsic size. You should not use them to resize an image (e.g., displaying a 1000px image at 200px). For resizing and responsive styling, you will use CSS, which we'll cover in a later module.

4. Structuring Images with Captions

In our last lesson, we focused on semantic structure. Images are no exception. When an image has a caption, it's important to semantically link them together. Simply placing a <p> tag under an <img> tag doesn't tell a screen reader that they are related.

The correct way to do this is with the <figure> and <figcaption> elements.

• <figure>: A container for a self-contained piece of content, like an image, diagram, or code snippet.
• <figcaption>: The caption for the content inside the <figure>.

<figure>
  <img 
    src="images/cat.jpg" 
    alt="A grey cat sleeping on a bookshelf."
    width="800"
    height="600">
  <figcaption>Fig.1 - A cat finds a comfortable, if unusual, napping spot.</figcaption>
</figure>

This structure clearly tells browsers and assistive technologies that the caption belongs to the image.

5. Practice: Adding an Image to a Blog Post

Let's apply what you've learned. Here is the semantic HTML for the blog post from our last lesson. Your task is to add an image to the article.

Instructions:

1. Imagine you have an image file named first-post.jpg (which is 600px wide and 400px high) inside an images folder.
2. Modify the HTML below to embed this image within the <article> element, right after the heading.
3. Ensure you include a meaningful alt attribute.
4. Add the correct width and height attributes to prevent layout shift.
5. Wrap the image in a <figure> element and add a simple <figcaption>.

Starting Code:

<body>
    <header>
        <h1>My Awesome Blog</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>My First Post</h2>
            <!-- ADD YOUR IMAGE CODE HERE -->
            <p>This is the first paragraph of my blog post. It's very exciting!</p>
            <p>Here is another paragraph, continuing the story.</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2024 My Awesome Blog</p>
    </footer>
</body>

<body>
    <header>
        <h1>My Awesome Blog</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>My First Post</h2>
            <figure>
                <img 
                    src="images/first-post.jpg" 
                    alt="A person writing in a journal with a cup of coffee on the desk."
                    width="600" 
                    height="400">
                <figcaption>Starting the journey of a new blog.</figcaption>
            </figure>
            <p>This is the first paragraph of my blog post. It's very exciting!</p>
            <p>Here is another paragraph, continuing the story.</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2024 My Awesome Blog</p>
    </footer>
</body>

Conclusion

Excellent work! You can now add visual content to your web pages in a professional and accessible manner. Properly embedding images is a perfect example of where technical implementation directly impacts user experience—a bridge you are now equipped to build.

Key Takeaways:

• Use the <img> tag with the src attribute to embed images.
• Always provide a descriptive alt attribute for accessibility, or an empty one (alt="") for purely decorative images.
• Set width and height attributes to prevent layout shifts and improve loading experience.
• Use <figure> and <figcaption> to semantically associate an image with its caption.

In our next lesson, we'll move from displaying content to collecting it. We will learn how to create HTML forms, allowing you to build interactive elements like contact forms, search bars, and login fields.