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.

Links and images are everyday HTML building blocks. Their paths and descriptions matter as much as how they look.

Syntax

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

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

How Do You Create an HTML Link?

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.

Use target="_blank" when a new tab has a clear purpose. Modern browsers treat it as rel="noopener", which prevents the new page from using window.opener to control the original tab. Writing rel="noopener" explicitly also makes that intention clear.

How Do Relative and Absolute URLs Differ?

An absolute URL includes the scheme and domain, such as https://example.com/about/. A root-relative path such as /about/ starts at the site root. A document-relative path such as images/photo.jpg starts from the current directory; ../ moves up one directory.

Use the same path rules in href for links and src for images. Check the file name, capitalization, and directory when a link or image fails to load.

How Do You Add an Image in HTML?

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. It is one of the first things an automated accessibility checker flags.

Example

To make an image clickable, put its img inside an a element. If the image is the link's only content, its alt text should explain the destination. For a visible image caption, group the image and a figcaption inside figure; a caption and alt text serve different purposes.

<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

How do you create an HTML download link?

Create an HTML download link with an a element and the download attribute. The attribute applies to same-origin URLs and blob or data URLs, and can suggest a filename. Browser settings and server headers can affect the result.

Can an HTML image offer several sources?

An HTML image can offer several sources through srcset or through source elements inside picture. The browser can then choose an image suited to the screen size, resolution, or supported format.

Must HTML links be blue and underlined?

HTML links do not have to be blue, but readers must be able to identify them. An underline is a simple way to distinguish a link without relying on color alone. Keep a visible keyboard-focus style too.

Can HTML alt text contain formatting?

The HTML alt attribute contains plain text, not formatted markup. Describe the image's purpose in context, and use an empty alt attribute for a purely decorative image.

Should HTML links open in new tabs by default?

HTML links should normally open in the current tab so readers can choose their own behavior. Use a new tab only when it serves a clear purpose, such as preserving an unfinished form, and tell readers to expect it.