Links and Paths

What this is. The anchor element <a> creates a link. Its href attribute says where the link goes.

There are three kinds of destination you will use constantly:

Relative, pointing at another file near this one: about.html

Absolute, pointing at a full address: https://example.com

Fragment, pointing at a place within the current page: #projects

Relative and absolute paths

RELATIVE

about.html
./about.html
../images/photo.jpg
/contact

ABSOLUTE AND SPECIAL

https://example.com/about
mailto:you@example.com
tel:+15551234567
#projects

Compare → A relative path is resolved from the current file's location, which is why moving a file can break its links. A leading slash means from the site root instead. Absolute paths include the whole address and never change meaning. mailto and tel are their own kinds of destination.

LIVE PREVIEW

loading editor…

Your turn → Click the first link. The page jumps to the heading because its id matches the fragment. Change the id and the link quietly stops working, which is why ids and fragments must be kept in step.

✦ Link text must make sense alone

Screen reader users can pull up a list of every link on a page. If nine of them say click here and read more, that list is useless. Write link text that describes its destination even with no surrounding sentence: Read the case study, not read more.

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Navigation and Images →

← Back