National 5 / Web Development / HTML - Hyperlinks

HTML - Hyperlinks

Learn to link webpages together using the anchor tag

Intorduction

A hyperlink (often referrd to as a link) is an element on a webpage that takes you to another webpage when clicked. This could take the form of a piece of text, an icon, or any other feature on a webpage.

Many hyperlinks take the form of text and appear blue and underlined to indicate that clicking them will take you to another webpage.

The Google search results are a good example of this.

Internal vs External Hyperlinks

All hyperlinks take the form of either an internal hyperlink or an external hyperlink.

This describes whether the hyperlink takes you to a webpage that is on the same website or a webpage on an entirely different website.

Internal Hyperlinks

An internal hyperlink takes you to another page within the same website.

For example, If you are on wikipedia.org and you click a link that takes you to another page on wikipedia.org, then this is an internal hyperlink.

External Hyperlinks

An external hyperlink takes you to a page on a different website.

For example, if you are on wikipedia.org and you click a link that takes you to bbc.co.uk, then this is an external hyperlink.

HTML - Internal Hyperlinks

To create a hyperlink in HTML, we use the anchor tag.

The anchor tag is represented by the element.

The text that will be displayed as the hyperlink is placed between the opening and closing anchor tags.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AlbaCode</title>
    </head>
    <body>
        <a>Click here to go to National 5</a>
    </body>
</html>

The anchor tag requires an href attribute to specify the file path of the page that the hyperlink will take you to.

If we wanted the link to take us to the national5.html page and this was located in the same folder as the current page, then we would just add the file name.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AlbaCode</title>
    </head>
    <body>
        <a href="national5.html">Click here to go to National 5</a>
    </body>
</html>

If the file was located in a different folder, then we would need to specify the file path.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AlbaCode</title>
    </head>
    <body>
        <a href="courses/national5.html">Click here to go to National 5</a>
    </body>
</html>

HTML - External Hyperlinks

To create an external hyperlink in HTML, we use the same anchor tag.

Again, this is represented by the element.

The text that will be displayed as the hyperlink is still placed between the opening and closing anchor tags.

The only thing that changes is what we write inside the href attribute. This time we will write the full URL of the webpage we want to visit.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AlbaCode</title>
    </head>
    <body>
        <a href="https://www.bbc.co.uk/news">Click here to go to BBC News</a>
    </body>
</html>

In the example above, the hyperlink will take us to the BBC News website.

The URL must include the https:// (or http://) part.