Working With HTML Directories - Navigating HTML File and Folder Structures

By: Daniel Imbellino
Updated: Feb 28, 2013

If you are building a smaller website, say five or ten pages, then there’s probably no need for additional directories to house your HTML files. However, if you are building a relatively large website, say a hundred pages or more, then the need to organize files is essential, otherwise your web server’s main directory for your website will be cluttered with a long scrolling list of unorganized files. Just imagine if you had a directory with a list of over a thousand webpage's, and there were certain files that needed to be edited, removed, etc. In the case of a larger website, it only makes sense to organize your files by category or some other means. Let’s say you build a website about dog breeds, that encompassed more than 50 breeds. If all these breeds were mixed together it would take longer to locate, edit, add, and remove files, since all the files are mixed together. On the other hand, you could create separate directories for each breed. Each directory could hold HTML files that pertain specifically to that breed, as well as images, and other supporting files. Now it’s easier to classify one breed from another.

Creating sub directories for different areas of your website also has its drawbacks. For one, you would have to point all your internal sub directory links back to the main directory, this requires a lot more overhead in the long run.

Let’s say you have one directory housing all your HTML files, how would you point links from one file to another in that directory? Let’s also say you had one file that points to a dog breed for instance, Pomeranian, and you need that file to point back to your sites index page (home page), how would you do this?

In the case of our index page we could have a link to the Pomeranian page like this:

<a href=”Pomeranian.html” target=”_self”>Pomeranian</a>

Likewise, we could easily link back to the index page in the same manner since both files are located in the same directory:

<a href=”index.html” target=”_self”>Home</a>

Now if we wanted we could instead create a sub directory for our Pomeranian pages, and create links back to files such as our index page that is located in the sites main directory.

From our index page:
<a href=”Pomeranian/Pomeranian-breeds.html” target=”_self”>Pomeranian Puppies</a>

What we just did was create a link from the index page to the Pomeranian puppies main page that is located in the Pomeranian directory. Keep in mind, when we refer to a directory, we are referring to a Hierarchical folder structure that our HTML files will navigate. Meaning, we are linking files from one folder to another, and vice-versa, and one file to another within that directory structure.

But now we need a way to link back to the index page of our website from the Pomeranian main page, like so:

<a href=”../index.html” target=”_self”>

The “../” indicates that we need to navigate back one directory from our current directory to locate the index page. In this case we are navigating back from the Pomeranian directory to the main directory and then to the “index.html” file in that directory. The “../” indicates moving one directory back to the previous directory from where a file is currently located.

We could also create sub directories for mixed Pomeranian breeds from within our Pomeranian sub folder itself, that links back to both the Pomeranian main page in our Pomeranian directory, and back to the index.html file in the sites main directory. The mixed Pomeranian breeds directory could be located inside the Pomeranian directory itself, and here’s our new folder structure:

Main directory –
    |–
    Pomeranian –
    |
    Mixed-Pomeranian-breeds

We would link our Pomeranian-breeds.html file to point to the mixed-pomeranian-breeds.html file by moving forward another directory, like so:

<a href=”mixed-pomeranian-breeds/mixed-pomeranian-breeds.html” target=”_self”>Pomeranian Mixed Breeds</a>

We referenced our link from the Pomeranian-breeds.html file to point to the mixed Pomeranian breeds directory, and then to the mixed-pomeranian-breeds.html file itself.

We now need a way to point the mixed-pomeranian-breeds.html file back to the Pomeranian and main directories themselves.

From the mixed-pomeranian-breeds.html file, our links will point to both previous directories like so:

<a href=”../../index.html” target=”_self”>Home</a>

We’ve now linked back to our homepage.
And
<a href=”../pomeranian-breeds.html” target=”_self”>Pomeranians</a>

We’ve now linked back to our main Pomeranian page, located in the Pomeranian directory, from the mixed-pomeranian-breeds.html page, that is located in the mixed Pomeranian breeds directory.

Notice we use 2 periods again followed by a forward slash, but this time we did it twice. This was because we must navigate back two directories from our mixed Pomeranian breeds directory to our main directory, in order to link back to our home page “index.html”. Likewise, we only needed to link back one directory from the mixed Pomeranian breeds directory to the Pomeranian directory.

We now have a set of pages located in three separate directories that are all tied together by links:

Index.html – (Main Directory) | Pomeranian-breeds.html – (Pomeranian Directory) | Mixed-pomeranian-breeds.html (Mixed Pomeranian Breeds Directory)

You can create as many sub directories as like in your folder structures, you can also create sub directories (sub folders) one inside the other. We created the mixed-pomeranian-breeds sub folder that is located inside the Pomeranian sub folder itself.

If we wanted to link from our home page directly to the mixed-pomeranian-breeds.html page, we could do so like this:

<a href=”Pomeranian/mixed-pomeranian-breeds/mixed-pomeranian-breeds.html” target=”_self”>

You use “../” to navigate back one directory, and you can use this as many times as you like depending on how deep your directories run. If you had five directories and needed to link back to the first, you could do so like this:

<a href=”../../../../index.html” target=”_self”>

Likewise, we can link forward as many times as wish as well:

<a href=”sub-folder-1/sub-folder-2/sub-folder-3/sub-folder-4/file.html” target=”_self”>

These types of links are known as “relative” links. We are linking from one file to another, from one directory to another, relative to its current position in a directory structure. By the way, the “target=”_self”>” attribute, simply means, open this page in the same window. Likewise, we could instruct our link to open in a new window using “target=”_blank”>.” It’s best to have links to pages on the same website open in the same window. No one wants to click through 40 tabs on the browser to find information from one page to the next.

You can also use absolute links to reference pages on your website. Absolute links use a full URL (uniform resource locator) to link from one file to another.

In this case instead of referencing one link relative to another we specify a full web address for a particular file. If we wanted to create a link from the home page of our website “index.html” to the Pomeranian-breeds.html page, we could do so like this:

<a href=http://www.name-of-website.com/pomeranian/pomeranian-breeds.html" target="_self"></a>

And this is what our absolute link will look like in our browsers main address bar:

http://www.name-of-website.com/pomeranian/pomeranian-breeds.html/

Absolute links have their advantages and disadvantages. For one, every time someone clicks an absolute link on your site, a request is sent through your browser and back through DNS requesting the page as though it were a separate connection. This slows down page loading times heavily. In this sense, your current static connection to the site is ignored and all pages are returned as if you are making a new connection for every document.

On the other hand, relative links return results faster since links to pages aren’t re-requested over the internet, instead information is returned based on your current connection. Most content management systems use absolute links by default, and they are slower. Also, search engines automatically convert relative links to absolute links by default, therefore they are unnecessary to begin with. The only time you may need to use absolute links is if you have an e-commerce site that has multiple pages with similar content, then you would need to set a preferred “canonical” link that should be returned in search results to your users. Other than that, they are a waste of time, and infact, they can cause problems if you don’t implement them properly. Either way, you can navigate virtually the same with absolute links as you did with relative links. The only difference is relative links point to files using a directory structure specifically, while absolute links use a full web address (URL) to point to another file on your site.

Also, don’t name your files and directories using underscores! They are seen as word combiners and will be viewed by search engines as all one word. The file “getting_started_with_html.html” would be seen as all one word. Instead use “getting-started-with-html.html”. Make sure to use descriptive names for your links as well. This makes it easier for you to remember what a file you created is about, and it provides search engines with more information about the content that file contains.