HTML Resources > 3. Hyperlinks
Linking is probably the most important feature of the worldwide web, and allows documents, media, fonts, text files, etc. to be connected together – no matter what computer they are on! There are three different ways of linking to resources:
1. Using relative paths
Most of the time, your web pages will link to neighboring files that are stored on the same computer as your web page. Given this, you have to “teach the browser” how to navigate from the current file to a file stored in a neighboring folder.
In the example below, pretend that your files are organized as follows and that you’re editing the index.html file located inside the my_website/home directory.
my_website
├── files
│ └── gallery.html
├── home
│ ├── contact.html
│ ├── index.html
│ └── styles
│ └── styles
│ ├── dark
│ │ └── new.css
│ └── my_style.css
├── images
│ ├── cat.jpg
│ └── dog.jpg
└── test.html
| Link (from → to) | Path | Explanation |
|---|---|---|
index.html → contact.html |
contact.html |
Because both files are in the same directory, you can just specify the file name |
index.html → test.html |
../test.html |
The ../ notation means “go up one directory” (in this case, into the my_website directory). Then once you’re in the correct directory, access the test.html file. |
index.html → gallery.html |
../files/gallery.html |
“Navigate up one directory (to my_website), then into the files directory, and then access gallery.html.” |
index.html → dog.jpg |
../images/dog.jpg |
|
index.html → my_style.css |
styles/my_style.css |
“Go into the styles directory and then access my_style.css.” |
index.html → new.css |
styles/dark/new.css |
“Go into the styles directory, then go into the dark directory, and then access new.css.” |
Sample index.html code
The code below shows how you might apply these paths in an actual HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first web page</title>
<link rel="stylesheet" href="styles/my_style.css" />
<link rel="stylesheet" href="styles/dark/new.css" />
</head>
<body>
<!-- All visible content goes inside of the body tag -->
<h1>Hello world</h1>
<img src="../images/dog.jpg" alt="A picture of a dog" />
<p>
Here is <a href="contact.html">my contact form</a>.
Here is a <a href="../test.html">Test Link</a>.
Here is <a href="../files/gallery.html">my photo gallery</a>.
</p>
</body>
</html>
2. Using absolute paths
Note that if the resource is on someone else’s computer, you need to provide a “fully qualified” URL path, including the protocol (https), the server name (google.com), and then file path (none specified in this case).
3. Using internal links (linking to page regions)
Note that the href value is prefaced with a hash tag (#) followed by the id of the section where you want to jump:
Additional Resources