Welcome to How2Code

In this lesson, we will:

  • Learn how to make links to other pages and websites
  • Learn how to make links to parts of the same page
  • Learn how to make anchors

Let's get started:

Links are a very important part of a webpage. Without links, people would have no way to move between pages or jump to a specific section of a long document.

<a href="{URL}" name="{ANCHOR}" >{CONTENT}</a>

Above is the layout for the "a" tag. You should normally only use the href or the name attribute, not both.

The href attribute can be formatted in many different ways, for example to go from http://example.net/path/firstpage.html to http://example.net/path/to/secondpage.html:

  • http://example.net/path/to/secondpage.html
  • //example.net/path/to/secondpage.html
  • /path/to/secondpage.html
  • to/secondpage.html
  • ../path/to/secondpage.html
  • ./to/secondpage.html

Any of these would work for getting to that file, but some of them would only work from http://example.net/path/firstpage.html. For example, if the page with these links on it was at https://example.com/something/different/and/special.html, the links would go to:

  • http://example.net/path/to/secondpage.html
  • https://example.net/path/to/secondpage.html
  • https://example.com/path/to/secondpage.html
  • https://example.com/something/different/and/to/secondpage.html
  • https://example.com/something/different/path/to/secondpage.html
  • https://example.com/something/different/and/to/secondpage.html

As you can see, only one of them actually goes where it's supposed to. The rest rely on the page with the link on it being closer to the final destination. The only two types of links I use are http://example.net/path/page.html and /path/page.html because they are the least text for their accuracy.

But what if I want to link to a section of a page?

That's what anchors are for. With them, you can link to a specific line in a document. However, if the line of text is below the top of the last screenfull of text on a page, you just go to the last screenfull.

Try this now: Click here. You moved to the anchors section (or the last screenfull of text depending on if your screen is big)! Here's how it works:

Anchors are just links without the href attribute or any content. For some reason, you can't self-close an anchor.

<a name="{ANCHOR}"></a>

Anchors are that simple! All you need to do to link to one with the name "anchor" would be to make a link to "#anchor". If you want to link to an anchor on another page, just put the "#anchor" at the end of the link, for example, http://example.net/somepage.html#anchor.

See you next time!

How2Code was filmed before an emulated sabayon linux computer. No actual computers were harmed in the making of this webpage. How2Code is powered by electricity and the food that Ben ate while he was thinking about what he should write. Do not eat this. It doesn't taste good. Viewer discretion is two words.

This is Ben, signing off. See you next time!

Go back to the table of contents