HTML Anchor Tags

H
andrewgbliss
7 months ago

This article will cover how we can use HTML anchor tags to link to other webpages.

. . .

Github repo

https://github.com/EntryLevelDeveloperTraining/html-workshop

Web Addresses and URL

To get to a HTML webpage you must have the website address known as a URL (Uniform Resource Locator). You will use a web browser, to get to the webpage, such as Google Chrome, Apple Safari, Mozilla Firefox, or Microsoft Edge. There are other browsers, if I forgot your favorite browser please leave a comment below.

You will type in the URL in the website address in the top bar and the browser will load that HTML webpage.

It would be very difficult if you had to type every web address to get to every webpage, luckily, in HTML there is a way to click on the webpage, either text or a button, and it will will direct you to the next webpage without having to know the URL.

This HTML element is known as the anchor tag.

Anchor Tag

To create an anchor tag we can write this:

<a href="https://www.google.com">Link To Google Search</a>

Anything inside the anchor tag will be shown as normal text that you can click on. Such as this anchor tag that links to Google Search.

Link To Google Search

Now let's edit the index and about pages and put anchor tags that link them to each other.

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Welcome</title>
</head>

<body>
  <h1>Welcome to my website</h1>
  <a href="about.html">About</a>
</body>

</html>

This is the main index.html file. When you specify no file in the URL address it will default to the index.html file. We added in this file, an anchor tag that links to the About Page.

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

So far we have just learned tags that do something without adding any other information, such as h1 and p.

However for an anchor tag, just specifying the anchor tag will be useless without adding the URL. We do this by adding a property called href.

So we add the property then an equal sign the two double quotes. Within the double quotes you will specify the URL, or webpage address.

about.html

<!DOCTYPE html>
<html>

<head>
  <title>Welcome</title>
</head>

<body>
  <h1>About</h1>
  <a href="/">Home</a>
</body>

</html>

Then here in the about page we will link back to the default home page referenced by the forward slash. This will default back to the index.html page.

Conclusion

Anchor tags are very convenient, and an important part of HTML. Instead of typing the URL into the address bar every time, we can link to a different web page using anchor tags.


H
andrewgbliss
7 months ago