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:

Using relative paths
Using absolute paths
Using internal links

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

Absolute versus relative paths

CSCI 185: Fall 2023