HTML: Linking

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