Hyperlinks

├─ index.html
├─ about.html
├─ style.css
└─ projects/
   └─ index.html

Links are what make the web a web. The element is <a>, which stands for anchor, and the href attribute says where it goes.

<a href="https://gdwithgd.com/">My site</a>

This demo has four files

Look at the tabs above the editor: index.html, about.html, a second index.html inside a projects folder, and one style.css shared by all three. The links between them really work ~ click one in the preview and watch the page change.

Where a link can point

• A full URL ~ https://example.com goes to another site.
• A file next to this one ~ about.html.
• A file inside a folder ~ projects/index.html.
• A file one folder up ~ ../index.html.
• An email ~ mailto:you@example.com opens the reader’s mail app.
• A spot on this same page ~ that’s the next demo.

The ../ thing

Every path is worked out from the file you’re writing it in, not from the top of your site. So index.html reaches down into the projects folder with projects/index.html, and the file inside that folder has to climb back out with ../index.html.

This is the most confusing part of building a multi-page site, and the only cure is doing it a few times. Open projects/index.html in this demo and compare its links to the ones on the home page.

Two things I’d ask of you

Write link text that makes sense read on its own. Someone tabbing through with a screen reader hears the links without the sentences around them, and a page full of “click here” is useless to them.

And if you use target="_blank", add rel="noopener" next to it. It takes a second and closes a small security hole.