Links and images

Links are what make the web a web. Without them every page would be an island. In this lesson you'll learn how to link to other pages, how to add images and how to tell the browser where to find files.

Links use the a element, which stands for anchor. The href attribute says where the link goes:

The text between the tags is what people see and click on. The href is where they end up.

A tip about link text: make it describe where the link goes. "Read the MDN guide to HTML" is much better than "click here". People scanning a page, and people using screen readers, often jump from link to link, and a list of "click here" tells them nothing.

By default, a link opens in the same tab. To open it in a new tab, add target="_blank":

Use this sparingly. Most people prefer to decide for themselves whether to open a new tab. It makes the most sense for links that leave your website, so visitors don't lose their place.

This part trips up almost everyone at first, so take it slowly.

An absolute path is a complete address, including https://. You use it to link to other websites:

A relative path points to a file in your own project, starting from the file you're in. Imagine this project:

From index.html, you'd link to the projects page like this:

No https:// and no domain. Just the file name, because projects.html sits in the same folder as index.html.

To reach a file inside another folder, add the folder name and a slash:

And to go up one folder, use two dots, just like cd .. in the terminal:

Relative paths are great because they keep working when you move your whole website somewhere else, like from your computer to a real server.

Images use the img element. It's an empty element, so there's no closing tag:

• src is the path to the image. It works exactly like href on links, so both absolute and relative paths are fine.
• alt is a text description of the image.

The alt text is easy to skip, but please don't. It's read aloud by screen readers for people who can't see the image. It's also shown if the image fails to load, and search engines use it to understand what the image shows.

Good alt text describes what's important about the image in a short sentence:

• Good: alt="Golden retriever catching a frisbee in a park"
• Not helpful: alt="image" or alt="photo123.jpg"

If an image is purely decorative and doesn't add any information, use an empty alt, alt="". That tells screen readers to skip it instead of reading out the file name.

You can set the size of an image with width and height:

The numbers are in pixels. Setting both helps the browser save the right amount of space while the image loads, so the page doesn't jump around. Later, in the CSS course, you'll learn better ways to make images fit nicely on every screen.

One more tip: keep image files small. A photo straight from a phone can be several megabytes, which makes a page slow to load. For a website, a few hundred kilobytes is plenty. Free tools like Squoosh (squoosh.app) can shrink images right in your browser.