AI Workshop: learn to build apps with AI →
HTML Basics: Links

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


Links are defined using the a tag. The link destination is set via its href attribute.

Example:

<a href="https://flaviocopes.com">
  click here
</a>

Between the starting and closing tags, we have the link text.

The above example is an absolute URL. Links also work with relative URLs:

<a href="/test">click here</a>

In this case, when clicking the link, the user is taken to the /test URL on the current origin.

Be careful with the / character. If omitted, instead of starting from the origin, the browser will just add the test string to the current URL.

For example, suppose I’m visiting the page /axios/ and I have these two links (they don’t exist, it’s just an example):

  • the link /test does have a / prepending test, clicking brings me to /test. The / means “start from the root”
  • the link test does not have a / prepending test, so once clicked brings me to /axios/test

Link tags can include other things inside them, not just text. For example, images can be links, too, so you click an image and you open a new page.

Lessons in this unit:

0: Introduction
1: Your first HTML page
2: Text tags
3: Attributes
4: ▶︎ Links
5: Images
6: Lists
7: Head tags
8: Container tags
9: Using CodePen
10: Using VS Code
11: What is the Doctype