HTML Links and Images — Anchor Tags, href, src, alt

Links and images are arguably the two most-used elements in HTML. Links are what makes the web a "web" — interconnected documents. Images provide the visual richness. Both have more depth than beginners expect.

The target Attribute

Controls where the link opens:

Security Warning for target="_blank"

When you open a new tab with target="_blank", the opened page gets access to window.opener — it can potentially redirect the page that opened it. Fix this with rel="noopener noreferrer":

• noopener — prevents access to window.opener
• noreferrer — also hides the referrer URL from the destination site

Always use both when linking to external sites with target="_blank".

Link States (CSS context)

HTML links have four states that CSS can style:

HTML Images — The <img> Tag

The <img> element embeds an image. It is self-closing (no closing tag needed).

The src Attribute

Specifies the image source — relative path, absolute URL, or data URL:

The alt Attribute — Critical for Accessibility and SEO

The alt attribute provides alternative text — shown when the image cannot be displayed, and read by screen readers for visually impaired users.

Width and Height Attributes

Always specify width and height on images. This lets the browser reserve space before the image loads, preventing Cumulative Layout Shift (CLS) — a Core Web Vital metric:

These are the intrinsic dimensions of the image in pixels. CSS can override the visual size, but the browser still uses these to reserve space.

Loading Attribute

Use loading="lazy" on all images that are not visible immediately when the page loads.

Responsive Images

The srcset Attribute

Provide multiple image resolutions so the browser picks the right one for the device:

• srcset — lists available images with their widths (w descriptor)
• sizes — tells the browser how wide the image will be displayed at different screen sizes
• The browser picks the most appropriate image automatically

The <picture> Element

Use <picture> for art direction — showing different images on different screen sizes or supporting modern formats with fallbacks:

Figure and Figcaption

Wrap images (or other media) with <figure> and add a caption with <figcaption>:

<figure> is a semantic element — it groups the image with its caption and signals that they belong together. Screen readers and search engines understand this relationship.

Image Formats Guide

Best practice: Use WebP with JPEG fallback via <picture> for photos. Use SVG for icons and logos.

Complete Navigation Example

A real navigation bar combining links and images:

Summary

*Next: HTML Lists*