HTML Links and Images: The Complete Guide to <a> and <img>

Links and images are two of the most used elements on the web. Every site has them. But most beginners only learn the basics — href for links and src for images — and miss the attributes and patterns that make a real difference to usability, performance, and accessibility.

This lesson covers everything: absolute and relative URLs, opening links in new tabs, image alt text, responsive images, and lazy loading.

HTML Links: The <a> Element

The anchor element <a> creates a hyperlink. The href attribute specifies the destination:

<a href="https://example.com">Visit Example</a>

The text between the tags — "Visit Example" — is the link text. This is what the user sees and clicks.

Absolute URLs

An absolute URL includes the full address: protocol, domain, and path:

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML Docs</a>

Use absolute URLs when linking to other websites.

Relative URLs

A relative URL links to a page on the same website, relative to the current file's location:

<!-- Link to a file in the same folder -->
<a href="about.html">About Us</a>

<!-- Link to a file in a subfolder -->
<a href="blog/my-first-post.html">My First Post</a>

<!-- Link to the root of the site -->
<a href="/pricing">Pricing</a>

Use relative URLs for internal navigation. They're shorter, easier to maintain, and work regardless of the domain.

Linking to a Section on the Same Page

Use an id attribute on any element, then link to it with #:

<!-- The target -->
<h2 id="installation">Installation</h2>

<!-- The link to it -->
<a href="#installation">Jump to Installation</a>

This is how in-page navigation ("table of contents" links) works.

Link Attributes

target="_blank" — Open in a New Tab

<a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a>

target="_blank" opens the link in a new browser tab. Always add rel="noopener noreferrer" when using _blank — without it, the opened page can access the opener tab's context, which is a security risk.

download — Force Download

<a href="/files/report.pdf" download="annual-report-2026.pdf">Download Report</a>

The download attribute tells the browser to download the file instead of navigating to it. The attribute value sets the suggested filename.

Writing Good Link Text

Link text is critical for accessibility. Screen reader users often navigate pages by jumping between links — vague text like "click here" or "read more" tells them nothing.

Bad:

<a href="/pricing">Click here</a> to see our pricing.

Good:

See our <a href="/pricing">pricing plans</a>.

Link text should describe the destination clearly, even when read out of context.

HTML Images: The <img> Element

The <img> element embeds an image. It's a self-closing element with two required attributes:

<img src="photo.jpg" alt="A mountain at sunset">

src is the path to the image file. alt is a text description of the image.

alt Text: Why It Matters

The alt attribute serves three purposes: accessibility (screen readers read alt text aloud for visually impaired users), SEO (search engines use alt text to understand image content), and fallback (if the image fails to load, the alt text is displayed).

<!-- Bad: empty or useless -->
<img src="dog.jpg" alt="image">

<!-- Good: descriptive -->
<img src="dog.jpg" alt="Golden retriever puppy sitting on a grass lawn">

<!-- Decorative image: empty alt tells screen readers to skip it -->
<img src="divider-line.png" alt="">

width and height Attributes

Always specify width and height on images:

<img src="hero.jpg" alt="Team working in an office" width="1200" height="600">

This tells the browser how much space to reserve before the image loads, preventing layout shift — a jarring jump that happens when images load and push content around.

Responsive Images with srcset

The srcset attribute lets you provide multiple image files at different sizes — the browser picks the best one based on screen size and resolution:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="A mountain landscape"
  width="800"
  height="533"
>

srcset lists the available image files with their intrinsic widths (400w means 400px wide). sizes tells the browser how wide the image will be at various viewport sizes. src is the fallback for browsers that don't support srcset. This is important for performance — serving a 1200px image to a 400px phone screen wastes bandwidth.

Lazy Loading Images

By default, browsers load all images on a page immediately, even if they're far below the fold. The loading="lazy" attribute defers loading until the image is near the viewport:

<img src="article-photo.jpg" alt="A developer at a laptop" loading="lazy" width="800" height="450">

Use loading="lazy" on all images that are not in the initial viewport. Don't use it on the main hero image — that should load immediately.

The <figure> and <figcaption> Elements

When an image needs a caption, wrap it in <figure> and add a <figcaption>:

<figure>
  <img src="css-grid-example.png" alt="A two-column CSS Grid layout" width="800" height="400">
  <figcaption>A basic two-column CSS Grid layout with a main content area and sidebar.</figcaption>
</figure>

<figure> is a semantic container for self-contained content (images, diagrams, code blocks). <figcaption> is the visible caption.

Previous: Lesson 2 — HTML Text Elements | Next: Lesson 4 — HTML Lists & Tables

Part of the HTML & CSS Fundamentals course.