Skip to content

Links

This is why it's called HyperText

  • Lesson
  • 2 min read
  • 3 of 7 in this chapter

Hyperlinks are enclosed in a (anchor) tags:

HTML
<a>link</a>

Besides text, a hyperlink also needs a URL. This is specified with an attribute inside the opening anchor tag:

HTML
<a href="https://stempump.com/">link</a>

Many tags use attributes like the href attribute for additional information that is not visible to the user on the page, but still serves an important function. The href attribute stands for "hyperlink reference", and it's necessary for the anchor tag to function as a hyperlink.

Opening in a New Window

By default, the link will open in the same tab as the original page. If you want the link to open in a new tab, add a target attribute:

HTML
<a href="https://stempump.com/" target="_blank">link</a>

Besides linking to other pages, hyperlinks can also be used to link to other sections within a page. In order to do this, you have to first give the destination element an id attribute, and then refer to the id in the link's href attribute:

HTML
<a href="#apples">link</a>
<h1 id="apples">Heading 1</h1>

If we try this code now, it doesn't seem to work. That's because internal links cause the page to scroll to the element with the specified ID, but in our case, the page is too small to allow scrolling. To see the internal link in action, we need to add extra space between the link and the heading, for example (this is the high tech solution) by using a whole bunch of br tags in between:

HTML
<a href="#apples">link</a>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<h1 id="apples">Heading 1</h1>