How to Link to the Same Webpage or a Different Webpage
Linking is an important part of navigating the Internet. If you've ever studied SEO (search engine optimization) or if you've ever created a webpage, you may have wanted to link from one part of your webpage to another part of the same webpage. For example, you might have a list of items at the top of the page that make it easy for visitors to click what they want and be redirected to the appropriate section of the page. I'll even give you an example that you can test right now.
And if you need my help with something, book a consultation here.
Most web constructors and programs that help you build webpages make it very easy for you to add links. And most people use these tools for external linking alone. Implementing internal linking is actually quite easy and requires two steps. Yes, it does require you to edit the code of the page, but the edits we are going to make are so simple that you'll be saying "Code what?"
External Linking (linking to other webpages)
To link to another page on a different website, without using a web constructor tool, you will need to add this to your page's code:
<a href="https://www.example.com">Example</a>
This example links to Example.com, which is an external website that is not associated with ours. This code is written in the language called HTML and requires us to use the carrot symbol "<" / ">" to open and close coded phrases. After the opening carrot, the "a" tells us that this is an anchor element. This "a" element also has an attribute "href", which is a hypertext reference. After "href" we need an equal symbol and quotation marks. We add the web address that we want to link to between the quotation marks. After the closing carrot we can write the text we want to appear on the page as a link. And finally, after the linking text, we need to write "</a>, which will close the anchor element. Here is what this example looks like when we add the code to this article's webpage:
Internal Linking (linking within the same webpage)
To link to another element on the same page of your website, without using a web constructor tool, you will need to add this to your page's code:
<a href="#example">Example</a>
And then, you'll need to add this to your page's code in the place you want the visitor to be redirected to:
<a id="#example">This is an internally linked example.</a>
Here's the live version of this example. If you click this link, it will take you to the bottom of this article (and you'll have to scroll back to the top):
As you can see, internal links include the hashtag symbol "#", whereas external links do not.
Linking Directly to a Section of a Webpage
Another way to link to a specific section of a webpage is by including that section in the link itself. This might be an easier option for anyone who is comfortable using a web constructor, but who is not comfortable editing code directly. To do it this way, you'll need to include this in your link:
https://www.teaching-revolution.com/blog/how-to-link#example
In this example we used the URL of this article and added the hashtag symbol "#" and the anchor id "example", so that visitors are redirected to that section of the page when they click the link.
Examples of Linking
Let's take a look at how we've used linking on our websites.
On the page https://www.teaching-revolution.com/story we can find three buttons that link internally on the same page.
By clicking one of the buttons, you are redirected to another section of the page. If you look at the URL the button links to, you'll see:
This will link to the part of the page called "Entrepreneurial Story".
On the page https://www.krisamerikos.com/feedback we can find names of languages. When we click the name of a language we are redirected to a different webpage specifically for that language.
By clicking one of the links, you are redirected to a different page. If you look at the URL of the link, you'll see:
This will link to the page for Albanian.
This is an internally linked example. You can see that the original anchor was placed earlier in the text and it links to this anchor id, which has been placed at the end of this article.