How to Create Links in Webpages
Hyperlink is another HTML element we must discuss. They are found on almost all websites, connecting one webpage to another.
When you move 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.
Links are defined using the <a> element.
<a href="path/to/destination">Link Text</a>By default, the link is underlined and displayed in blue, and when you click it, you are 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 displayed in blue initially. The moment you click on it, it turns red.
Afterward, the link turns purple, indicating it 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 pointing to /path/to/index.html relative to the root directory of your website, /.
The relative addresses are those relative to the current page's location.
./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, maintaining so many relative addresses becomes very difficult.
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.
<a href="mailto:johndoe@example.com">Send email</a>When the user clicks on this link, the email program will open.
Anchor links
<a href="#heading2">Go</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<h2 id="heading2">Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>Anchor links point 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
<a href="/index" title="Index Page">Link</a>Optionally, you can specify a link title, which will be displayed as a tooltip text when the cursor is hovered over.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p> Lorem ipsum <a href="/destination.html">dolor sit</a> amet consectetur adipisicing elit. </p> </body> </html>