HTML Resources > 3. Hyperlinks

Overview Resources

• LinkedIn Learning video: Exploring the anchor element (2:58)
• Absolute versus relative paths

1. Navigating Relative File Paths

Given the image below, the following relative paths are from the perspective of the index.html file.

../test.html # go up one directory and access the test.html file
../files/blah.html # go up one directory and then into the files directory, and access the blah.html file
../images/dogs/a1.png # go up one directory, then into the images directory, then into the dogs directory, and access the a1.png image
styles/my_style.css # go into the styles directory and access the my_style.css file
styles/dark/new.css # go into the styles directory, then into the dark directory, and access the new.css file

Download the sample files to experiment with relative file paths (and view the home/index.html).

2. Linking to pages within your own site

• LinkedIn Learning Video: Linking to pages within your own site (10:21)

3. Linking to external pages

Additional Resources

• LinkedIn Learning Video: Linking to external pages (4:18)

4. Linking to page regions

Additional Resources

• LinkedIn Learning Video: Linking to page regions (9:46)

5. Organizing links into a menu

The links in this example don’t link to anything (yet), but is meant to show that div and span tags can be useful for grouping links into conceptual widgets (like menus)