HTML Links and Images: href, src, alt, and Lazy Loading

Links and images connect your page to the rest of the web: the a element sends a reader to another URL, and the img element places a picture with text that describes it.

Syntax

<a href="/about/">About us</a>

<img src="/logo.png" alt="Company logo" />

Links with the Anchor Element

The a element creates a link, and its href attribute holds the destination. The text between the opening and closing tags is what the reader clicks, so it should describe where the link goes. A link reading "the pricing page" tells a screen-reader user and a sighted user the same thing, while a bare "click here" leaves them guessing.

<a href="/programming/css/">Read the CSS guide</a>

You can link to another site with a full URL, to another page on your own site with a path like /about/, or to a spot on the current page with a fragment like #section-two. The href attribute also accepts schemes beyond a web address: a mailto: link opens the reader's email client with the address pre-filled, and a tel: link lets a phone dial the number directly, which matters more than you would expect on a page someone is reading on a mobile device.

Add target="_blank" when a link should open in a new tab, and pair it with rel="noopener" so the new page cannot reach back into yours. Without that attribute, the page you linked to can use window.opener to quietly redirect your original tab to a lookalike page while the visitor is still looking at the second one, a real technique known as tabnabbing.

Relative and Absolute URLs

An absolute URL spells out the whole address, including the protocol and domain, and it points to one fixed location anywhere on the web. A relative URL leaves those parts off and resolves against the current page, so /about/ points to the about page on whatever site is serving it. Use relative paths for links within your own site, because they keep working when you move the site to a new domain.

Images with Src and Alt

The img element places a picture, and it takes no closing tag because it has no inner content. The src attribute points at the image file, and the alt attribute gives a text description for anyone who cannot see the image. Screen readers announce the alt text, and browsers show it when the file fails to load.

<img
  src="/images/team-photo.jpg"
  alt="The five-person support team standing outside the office"
  width="800"
  height="600"
/>

Set width and height so the browser can reserve space before the file downloads, which stops the page from jumping as images load. When an image is purely decorative and carries no information, give it an empty alt="" so screen readers skip it instead of reading a filename.

Add loading="lazy" to an image that sits below the fold, and the browser defers downloading it until the reader scrolls near it. That speeds up the initial page load without you writing a line of JavaScript. Leave it off any image that is visible when the page first loads, especially a hero image, because deferring one of those can hold back the most important image on the screen and make the page feel slower.

A common gotcha is leaving alt off entirely. A missing alt is not the same as an empty one. When it is missing, some screen readers fall back to reading the file name aloud, which is rarely helpful. Decide whether the image carries meaning, then either describe it or mark it empty on purpose. Missing alt text is a frequent, entirely avoidable failure, and it is one of the first things an automated accessibility checker flags on any page.

Example

<h2>Our team</h2>

<p>
  Meet the people behind the project on the
  <a href="/about/team/">team page</a>.
</p>

<img
  src="/images/office.jpg"
  alt="A bright open-plan office with desks along the windows"
  width="960"
  height="540"
/>

That renders a heading, a paragraph with "team page" as a clickable link, and a photo of the office below it. If the photo ever fails to load, the reader still sees the description you wrote in the alt attribute.

Frequently Asked Questions

Is there a separate element for a download link?

No, an ordinary anchor handles it. Adding the download attribute tells the browser to save the target instead of navigating to it, and it can carry a suggested filename.

Can one image offer several sources?

Yes, through srcset on the image element or a picture element wrapping several source entries. The browser then chooses a size or format suited to the device rather than always fetching one fixed file.

Does a link have to be blue and underlined?

No, that is only the browser's default styling. A link must be distinguishable from surrounding text by some means and have a clear accessible name; the particular colour is a design decision.

Can alt text contain HTML formatting?

No. The alt attribute holds plain text, so any markup inside it is read out literally rather than rendered. Write the description as one plain sentence.

Should links open in a new tab by default?

No. Forcing every link into a new tab takes control away from the reader and leaves a trail of tabs behind. Reserve it for cases with a genuine reason, such as leaving a half-completed form.

Related

• Lists: grouping links into navigation
• Document Structure: the page these links and images sit in
• HTML guide: the complete language overview