Linking Web Files

Introduction

I have been making websites for so long I had forgotten I too was once a beginner and had to learn what I now know. Then I saw the post "How to link .html files from different folders" on Reddit and decided to wirte this page.

Naming Conventions

There are several conventions when naming folders and files on websites:

Use lowercase letters

Do not use spaces. If words need to be split, such as myfile.htm then use underscores (my_file.htm) or hyphens (my-file.htm). I prefer hypens.

When visiting a directory or folder, including the root directory, the web server looks for certain files to display as a default. These files are usually index.htm, home.htm or default.htm. Your web host will tell you their naming convention. If you run your own web server then in Apache you can specify which files to look for and in which order using the DirectoryIndex directive.

An example is this site. If you go to https://brisray.com/, the page you are actually seeing is https://brisray.com/index.htm

When Lycos/Tripod UK was operating in the 1990s and 2000s they offered a choice of 15 possible home page file names. In decreasing order of precedence they were index.php, index.php3, index.htm, index.shtml, index.html, index.shtm, index.phtml, default.shtml, default.html, default.shtm, default.htm, home.shtml, home.html, home.htm and index.wml.

Folder and File Structure

There is no set way of organizing your website folders, and you should create the folder tree in whatever way is comfortable to you. You can just dump all the files in the root folder of your website if you like. I wouldn't do that though, it becomes unmanageable as your website grows.

What I do is create folders for each section of the website and inside those create folders by function, for example folders for the section images, documents, includes (such as menus etc.), and so on. The HTML files go in the main section folder.

Navigating the Folder and File Structure

In the following examples I use this simple website:

Example website folders and files

The following examples will work in the href="......" tag and any tag that uses src="......", such as the img and iframe tags.

Absolute Paths

You can use absolute paths to files. These use the full path to a file, this would include the scheme (http, https etc.), the domain name, the file path and the name of the file. An example of such a link would be:

<a href="https://example.com/alpha/foxtrot.htm">Click here</a>

This is great for linking to files on another server but I would not recommend using it to link to files on your own site. The reason for this is that if you decide to change the domain name, then all the links on your site will have to be changed.

Relative Paths

The other type of linking uses relative paths. These can be relative to the root of your website or the current location. Moving around a website using relative paths is not much different than using your operating system's command line.

./ - means from the current folder, this is rarely used because if it is omitted then from the current folder is assumed.

../ - means go up a folder level. Suppose you are editing lima.htm which is in the /alpha/ folder and want to add an image from alpha's image folder. In that case you could use:

The above line means go up one directory level, which would be the alpha folder, then use hotel.jpg in the images folder.

The ../ signage can be chained so, ../../ would mean go up two folder levels. Suppose you are editing lima.htm which is in the /alpha/ folder and want to link to charlie.htm which is the root folder. In that case you could use:

<a href="../../charlie.htm">Click here</a>

The above line means go up one directory level, which would be the alpha folder, then go up another folder level, which would the root and link to charlie.htm in that folder.

If you wanted to display the delta.jpg image in the root's images folder on lima.htm, then you could use:

If you wanted to display the kilo.png image in bravo's images folder on lima.htm, then you could use:

A path starting with / means start the path from the root of the website. Using the above example of using hotel.jpg in alpha's image folder then the following could be used:

If you wanted to display the delta.jpg image in the root's images folder on lima.htm, then you could also use:

If you wanted to display the kilo.png image in bravo's images folder on lima.htm, then you could use:

I use a mixture of the various available notations, depending on how deep the target file is in the directory tree.

Sources & Resources

Apache Module mod_dir - Apache HTTP Server Project
Complete list of HTML tag attributes which have a URL value? - Stack Overflow
Dealing with files - MDN Web Docs
HTML src Attribute - W3Schools
HTML Style Guide - W3Schools