(click anywhere to close)
OPEN MENU

[HTML5] Links

category: Website | course: HTML5 | difficulty:

Links are vital to any webpage. Without (hyper)links, the only way to access anything on your site would be by typing out the full URL. Not only is that an unnecessarily large amount of work, it is also impossible for everyone to know and remember those URLs.

At the time HTML was invented, however, the concept of hyperlinks wasn’t yet in existence. Some other functionality was also desired, and they decided to group those into so-called anchor points.

When you let down the anchor of a ship, you lock the ship into a position. Anything can happen on the ship, it may even move a bit with the movement of the water, but it will always be tied to that anchor point.

An HTML anchor point works the same way. It simply says that whatever is inside it is linked to a certain other spot. This may be another website, or a spot within the same page. The other website may change some things, but the link still exists and points to the same spot. Linking within the same page then requires two anchor points, because the anchor refers to a specific thing within the ship, and that thing needs to be tied up as well.

This may all seem a bit vague or complicated, but it’s actually very simple once we see it in detail.

Anchor Tag

As expected, the anchor tag looks like this:

<a href=“URL”> link text </a>

As you can see, the link doesn’t have to be text. If you want, you can put whole pages within a link, but the biggest links on a page are usually large headers or images. The URL it links to is set within the href attribute.

When linking to something on your own website, you can work with relative links: you simply leave out the domain name and only put the filename into the href attribute. Your browser will automatically interpret it as a file on the server it’s currently on.

Text within an anchor element is automatically styled blue and underlined.

<a href="http://google.com">This is a link to Google!</a>
<a href="contact.html">This is a link to the page contact.html on the same website</a>

Target

The target attribute can easily be confused with the href attribute, but they do something completely different. The best way to keep them apart is to remember that href stands for hyperlink reference, while the target attribute specifies where to open the link.

There are two options:

  • _blank: opens in a new window or tab
  • _top: opens in full body of same window or tab

There’s also two other values the target attribute can obtain, but those are specific to frames, and therefore discussed in the iframes chapter.

<a href="http://google.com" target="_blank">Opens google in a new window or tab (depends on browser)</a>

Local Linking

This requires two anchor points: the anchor/hyperlink, and the spot on the page that is being linked to.

The spot linked to needs to have a name attribute set; the value can be anything.

The anchor needs to have a hyperlink reference of the form #name.

The rest is automatically taken care of by the browser!

<!-- This anchor point is put at the top of a certain section of a page -->
<a name="somename"></a>
<!-- This is an actual hyperlink -->
<a href="somepage.html#name">Link to that specific section on the page somepage.html</a>
CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
What happens when you use <a>?
A
You link to a specific anchor point on a page
B
You create a link
C
You open links in a new window
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)