Internal links

Intro

Let’s go over how to create an internal link.

An internal link is a link from one page on your site to another page on your site. This is different from an external link, which is a link from one page on your site to a page on an entirely different website.

In this example, we’re going to link from our home page to our About page. We already have an index.html file open for our home page, and we have an about.html file in the same folder for the About page.

Steps

Create link

First, make sure you have index.html open in VS Code. To create the internal link, type a and then press Tab.

<a href=""></a>

This will create the opening and closing tags and the href attribute. The href attribute is where we put the name of the file we want to link to.

To link to another page, just type the name of the file in between the quotes. So in this example, just type about.html.

<a href="about.html"></a>

If you check the preview, you won’t see anything yet because we still need to add link text. For the link text, we’ll type About.

<a href="about.html">About</a>

If you check the preview, you should see a blue, underlined link that says About. If I click on the link in the preview, I’ll see the browser navigate to the About page. We know we’re on the About page because we can see the <h1> heading we added.

I can use the back button in the live preview browser to go back to the home page.

Subfolder

In this example, you only need the file name since index.html and about.html are in the same folder.

If about.html were inside of a subfolder, you’d need to include the folder name. Here’s an example of what that would look like (you don’t have to write this):

<a href="folder-name/about.html">About</a>

End

So that’s how you can create an internal link in HTML.

Final code

If you’ve followed all of the steps so far, this is the code that should be in between the body tags.

<a href="about.html">About</a>