How to Create Links in Web Pages
This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.
Hyperlink is another HTML element we must discuss. They are found on almost all websites, connecting one webpage to another. When you hover the cursor over a link, the arrow will turn into a hand. When you click the link, it will take you to another HTML document.
HTML links are defined using the <a> element.
<a href="path/to/destination">Link Text</a>
By default, the link will be underlined and displayed in blue, and when you click on it, you will be taken to the destination specified by the href attribute.
To demonstrate, create a destination.html file in your work directory.
.
├── destination.html
└── index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Destination</title>
</head>
<body>
<p>This is the destination.</p>
</body>
</html>
And then, add a link in your index.html file that points to the destination.
<p>
Lorem ipsum <a href="/destination.html">dolor sit</a> amet consectetur
adipisicing elit.
</p>
You will be taken to the destination.html document when you click on the link.
You can also add a Go Back link in the destination.html to take you back to index.html.
<p>This is the destination. <a href="/index.html">Go Back</a></p>
These interconnected links form the internet we see today.
Change link target
By default, the linked destination will be opened in the same window. You can change that behavior by setting a target attribute. For example, target="_blank" opens the destination in a new tab.
<a href="/destination.html" target="_blank">Link</a>
Links & pseudo classes
Another thing you may have noticed is that the link is initially displayed in blue. The moment you click on it, it turns red. Afterward, the link becomes purple, indicating that the link has been visited before.
This behavior has to do with the pseudo-class, which allows you to define different styles for an element under different conditions. Visit the linked lesson for details if you're interested.
Absolute address vs. relative address
Now, let's take a closer look at our example:
<a href="path/to/destination">Link Text</a>
The href attribute points to the destination of the link.
Suppose the destination is on a different website. In that case, the URL should be an absolute address, meaning it should start from the full domain of the target website, continue to the subdirectories, and finally locate the target webpage.
<a href="https://www.example.com/path/to/index.html">Index Page</a>
Things are a bit more flexible if the target webpage is hosted on the same website.
<!-- Absolute address -->
<a href="/path/to/index.html">Index Page</a>
<!-- Relative address -->
<a href="./path/to/index.html">Index Page</a>
<a href="../path/to/index.html">Index Page</a>
<a href="index.html">Index Page</a>
The first example is an absolute address that points to /path/to/index.html, starting from the root directory of your website, /.
The relative addresses are the ones relative to the location of the current page.
./means "in the current directory", which means the browser will look forpathin the same directory as the current webpage.
../indicates the parent directory of the current webpage.- Without
./or../, the browser will look for the target under the current directory.
In practice, it is not recommended to use relative paths. As your website's structure becomes more complex, it becomes very difficult to maintain so many relative addresses.
If you can, you should always use absolute addresses so that all of your links have a universal reference, the root directory /.
Link to emails
Besides linking to webpages, the <a> element can also link to email addresses using mailto: inside the href attribute.
When the user clicks on this link, the email program will open.
Anchor links
Anchor links points to sections of a webpage. They can be useful if the webpage is long and you need to create a table of contents section.
To make this work, you must ensure your target element has a unique id.
<h2 id="heading2">Heading</h2>
And then, create a link whose href attribute points to the previously defined id. Make sure you are using the id selector, #.
<a href="#heading2">Go</a>
Link title
Optionally, you can specify a link title, which will be displayed as a tooltip text when the cursor is hovered over.