Overview

HTML Images is part of the complete HTML syllabus. This lesson explains the concept deeply, shows the exact tags or attributes to use, and gives you a runnable browser example for practice.

HTML Images is about choosing markup that carries meaning before styling begins. Good HTML gives the page a reliable structure, makes the content easier to maintain, and gives browsers, search engines, forms, and assistive technologies the information they need.

Core Ideas

• Use HTML Images to improve the meaning of the document, not only the appearance.
• Keep labels, headings, landmarks, and relationships explicit.
• Prefer built-in browser behavior whenever it already solves the job.
• Check that the page still makes sense when CSS and JavaScript are unavailable.

Step by Step

1. Identify the content relationship that HTML Images needs to express.
2. Choose the native element, attribute, or browser API that matches that relationship.
3. Add the smallest useful markup first, then add progressive enhancements.
4. Validate the result with keyboard navigation, browser tools, and source inspection.

Beginner Explanation

HTML Images explains how one page connects to other pages, files, images, scripts, stylesheets, and external resources.

Links use href, images use src, and many resources need alt text, size information, or relationship attributes.

Use clear paths and meaningful link text. Users should know where a link goes before clicking it.

Before You Start

• Know whether HTML Images points to a page, file, image, section, script, stylesheet, or external site.
• Check the folder location so relative paths resolve correctly.
• Write useful text alternatives before adding images or vague links.

Key Tags and Attributes

• a href: creates navigation to another URL or file.
• img src: loads an image resource.
• alt: describes meaningful images and can be empty for decorative ones.
• rel: explains the relationship between the current page and linked resource.

Plain-English Glossary

• href: the destination used by links and some resource references.
• src: the file source used by images, scripts, iframes, and media.
• Alt text: a text alternative for meaningful images.
• Relative path: a file path resolved from the current document location.

What You Will Learn

• Use HTML Images to connect the current document to pages, files, images, anchors, and external resources.
• Choose the right path type: root-relative, document-relative, absolute URL, or fragment link.
• Write link text and alt text that still makes sense out of context.
• Reserve space for images and media to reduce layout movement while loading.

Where You Use This in Real Projects

You use HTML Images whenever a page points to another route, image, download, stylesheet, script, anchor, or external site.

Clear resource markup prevents broken links, missing images, unsafe external navigation, and confusing link text.

When to Use This

• Use HTML Images whenever the page needs to navigate, load, download, embed, or reference another resource.
• Use relative paths for project files and absolute URLs for external destinations.
• Use plain text instead when there is no real destination or resource to load.

Browser and Accessibility Notes

• Broken href and src values are among the easiest HTML problems to miss.
• External links that open a new tab should use rel="noopener noreferrer".
• Images need meaningful alt text unless they are purely decorative.
• Width and height let the browser reserve space before the image finishes loading.

Code Example

<picture>
  <source srcset="/images/course.avif" type="image/avif">
  <source srcset="/images/course.webp" type="image/webp">
  <img src="/images/course.jpg" alt="Student learning HTML" width="640" height="360" loading="lazy">
</picture>

Another Example

<article>
  <h2>Recommended resource</h2>
  <a href="/learn/html/html-links">Read the links lesson</a>
  <img src="/images/html-card.png" alt="HTML lesson preview" width="320" height="180">
</article>

Example Explained

• The href attribute points the link to another page.
• The img src points to an image file.
• The alt text explains the image for users who cannot see it.
• Width and height help the browser reserve space before the image loads.

How to Read This Example

1. Start by identifying the resource type in the HTML Images example: link, image, file path, script, stylesheet, or embedded content.
2. Read href and src values carefully. They tell the browser where to go or what to load.
3. Check text alternatives, link text, rel attributes, width, height, and loading behavior.
4. Click the link or inspect the network request to confirm the path resolves correctly.

Checklist

• Use the most specific native element before reaching for a div.
• Check the page with keyboard navigation and browser validation.
• Keep the markup readable before adding CSS or JavaScript.

Common Mistakes

• Using divs for everything and losing built-in semantics.
• Adding JavaScript for behavior the browser already provides.
• Forgetting labels, alt text, lang, viewport, or metadata that other tools rely on.

Do and Don't

• Do: check every href and src used in HTML Images.
• Do: write useful link text and meaningful image alt text.
• Don't: use vague link text like click here when the destination matters.
• Don't: omit rel="noopener noreferrer" for external links that open new tabs.

Practice Challenge

Recreate the HTML Images example in the code editor, then inspect the DOM and check that labels, links, and metadata still make sense without CSS.

Try These Changes

• Change the text in the HTML Images example and run it again.
• Add one new related element, such as another paragraph, list item, table row, input, or link.
• Add a class name and write a small CSS rule for it in the CSS tab.
• Break one tag on purpose, run it, then fix it so you understand how browsers recover from mistakes.

Quick Check

• Question: What is href for? Answer: It is the destination of a link.
• Question: What is alt for? Answer: It describes meaningful images.
• Question: Why add image width and height? Answer: It reduces layout shift while the image loads.

Revision Questions

• Which attributes point to another resource in HTML Images?
• Is each path relative, root-relative, absolute, or a fragment?
• What will users understand from the link text or alt text?
• What should happen if the resource fails to load?

Debugging Checks

• Click every link and check for broken, redirected, or unsafe destinations.
• Inspect image requests and confirm the src path is correct.
• Check that alt text describes meaning, not just the file name.
• Use browser dev tools to see whether relative paths resolve where you expected.

Mini Project

Build a resource card with one internal link, one external link, one download link, and one image. Check every path and make the link text understandable without surrounding context.

Mastery Check

• You can explain why the chosen HTML for HTML Images is more meaningful than a generic div.
• You can identify the keyboard and accessibility behavior provided by the browser.
• You can extend the example without breaking validation.