Links and Images

Introduction

The "Hyper" in HyperText means text that can jump to other places. Links are what make the web a web. Images make pages come alive. Both use attributes, extra details that you put inside the opening tag.

Links

A link uses the a element (the "a" stands for "anchor"). The href attribute says where the link goes.

The text between the tags is what the visitor clicks. Choose words that make sense on their own. "Read the MDN guide" is better than "click here".

Open in a new tab

You can make a link open in a new tab with target="_blank". When you do, add rel="noopener" as good practice.

<a href="https://example.com" target="_blank" rel="noopener">Open example.com in a new tab</a>

Use new tabs sparingly. Many people prefer to choose for themselves.

Linking to your own pages

Links can point to other files on your own site. This is called a relative link.

<a href="about.html">About me</a>
<a href="blog/first-post.html">My first post</a>

A link starting with https:// is an absolute link to another website.

Images

An image uses the img element. It is a void element, so it has no closing tag. It needs two attributes:

• src: where the image file is.
• alt: a short text description of the image.

<img src="cat.jpg" alt="A grey cat asleep on a sofa" width="300" height="200">

The alt text matters. A blind visitor hears it read aloud, and it appears if the image fails to load. Describe what the picture shows. If an image is only decoration, use an empty alt="".

Setting width and height also helps: the browser can reserve the space before the image loads, so the page does not jump around.

Try it yourself

The picture below is a small image drawn from an inline SVG, so it works without any file. Change the link text and the alt text, then press Run.

Summary

• a with href makes a link.
• img with src and alt shows an image.
• Always write helpful alt text. Use alt="" for pure decoration.
• Relative links point to your own files; absolute links start with https://.