HTML First Steps - Lesson 4 - Links (Hyperlinks)
We’ve reached the very foundation of HTML — what it was created for — namely, hyperlinks (or simply links). Links are a way of organizing connections between different materials. Suppose you have 100,000 text files and want to create a catalog for them. Even if each catalog contains descriptions of 200 text files, you'd need 500 catalogs. Browsing through all 500 to find the right file would take a lot of time. So how do links help?
Links connect HTML documents in any arbitrary way, so that each document has a unique name. This allows you to navigate from one document to many other related ones, improving your chances of finding what you need.
This is the same principle used on websites. Pages have unique URLs (Uniform Resource Locator). You write these URLs into an <a></a> tag using the href attribute:
<a href="unique_path">link text</a>
Let’s create another file in the same folder as index.html and name it file.html:
<html>
<head>
<title>My Second HTML Document</title>
</head>
<body>
<h1>My Second HTML Document</h1>
</body>
</html>
Now in index.html:
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
<h1>My First HTML Document</h1>
<p>
<a href="file.html">Link to the second document</a>
</p>
</body>
</html>
Relative Paths
Now, move file.html into a folder named files. Your link in index.html will break unless updated. A relative path from index.html looks like this:
./files/file.html
So update your index.html link:
<a href="./files/file.html">Link to the second document</a>
You can also omit ./ and just write:
<a href="files/file.html">Link to the second document</a>
But avoid starting a relative path with / — that’s an absolute path.
Linking Back
To link from file.html back to index.html (one level up):
<a href="./../index.html">Link to the first document</a>
Absolute Paths
Absolute paths are used on websites and start with / or with a full domain name:
<a href="/files2/file2.html">link</a> <a href="https://example.com/files2/file2.html">link</a>
Absolute paths don’t break when moving files between folders.
The target Attribute
This attribute defines how the link opens:
_blank– opens in a new tab or window_self– opens in the same tab (default)_parent– opens in the parent frame (if using frames)_top– cancels frames and opens in the full window
<a href="/files2/file2.html" target="_blank">link</a>
The rel Attribute
This defines the relationship between the current page and the linked page. The most used value is nofollow, which tells search engines not to follow the link:
<a href="/files2/file2.html" target="_blank" rel="nofollow">link</a>