How to Arrange Files on a Website

This tutorial is aimed at webmasters who have static pages on their site. My website is dynamic, but I still make use of static pages for certain things; they will never go out of style. The biggest key to arranging files on your remote server is findability. The ability for you, your visitors, and for search engines to find files on your site is the whole idea behind having a site. With the three keys outlined in this tutorial you will be well on your way to having a sparkling root folder. Why, though? Why not just dump everything in the root and be done with it?

Suppose I hand you an apple seed; what do you see? Do you see an apple seed? Or perhaps you are a bit of a visionary and can see that seed one day producing another apple. Perhaps you can take a mental step back from there and see the tree that will make that apple. But what if I told you that I see an orchard when I look at that seed? Inside that tiny seed is the power to make such a vision a reality. Your website is that tiny seed. Today it may not be anything great, but who knows what it will be five years from now? You have to plan today for tomorrow. When the software company started arranging files on your operating system, they didn’t throw everything into the root directory and say “Good luck!” No, they arranged every file in logical, nested directories with each file in its proper place. That is how your computer works, and that is how sites should be arranged. There are three points I want to bring out that I find are critically important to findability: Consistency, Order, and Proper Link Structure.

1. Consistency: Pick a method and stick with it

   There are endless names you could use to label your files. There are even options for the type of file you create. For instance, an HTML document can end with .html or .htm, whichever you prefer. I tend to favor the old-school methods and adopt .htm for my suffix of choice. It doesn’t matter which nomenclature you use, though; the key is consistency. If you start using .html, stick with it. Label all of your HTML files with an .html suffix. For this tutorial all files will be named index.htm.

2. Order: Arrange files and directories logically

   A logical arrangement does not consist of a single root directory with a dozen HTML files in it, one for each page of the site. To future-proof your site, place the site index (or “home,” or “start,” etc.) in the root directory, then place the other pages in sub-directories inside the root directory. I’ll explain “future-proofing” in the next point. Another reason for putting your files into directories is semantics. Technically, each subsequent page is a sub-page of the index and should be listed beneath it. So, the root directory is the top-level directory, and the directories you create are sub-level directories. Say, for example you have a page about bicycles. Rather than naming your page bicycles.htm and placing it in the root, make a directory called bicycles, place the page in that directory, and name the page index.htm. How can you have two index files on the same site? Because the new index you just created is the index of the bicycles directory. Now suppose you write a page about a specific type of bicycles. Don’t put the new file, racing.htm, directly in the bicycles directory; instead, create a new sub-directory inside the bicycles directory called racing and, you guessed it, name the new file index.htm. Look at the graphic at the top for an example. Not only will this keep your root clean, but it will also make browsing faster because browsers search for an index file by default. When they are forced to search for a file of a different name it slows things down. There should be no HTML files in your root (in most cases) other than your index. Other files found in root include the .htaccess file, the robots.txt file, and the favicon.ico file. These three are optional, but recommended. There may also be files your host placed there. If in doubt, ask your host before you delete those files!

3. Proper Link Structure: Link to folders, not files

   Now that you’ve got your root looking spiffy, it’s time to change the way you link to your files. You can point to the directory rather than the file because all your files are named index. This is the “future-proofing” I was talking about earlier. If you decide to switch from a static site to a dynamic one, you won’t have to change a thing with your links; simply name the files index.php (for example) and your current links still work. And, everyone who has linked to a page a few levels deep will still get to that page when they click their bookmark, but instead of viewing your old static page they will now be viewing your brand new dynamic one. Here’s an example of how your links should look: <a href="/bicycles/racing/">Racing Bikes</a>. The first “/” means “root” in browser speak and tells the browser that this file can be found at the top level. The “/” after “/racing” tells the browser to look for the index in that folder. This makes your site run lightning-fast, a trait your visitors will appreciate.

All-in-all, when you take the time to maximize findability, accessability, and usability, your site will run faster, get indexed higher, and be relevant longer.

~Jonathan

January 11th, 2006 · Back to Top · Tagged: Webmastery

Zeal

A story about my life as a missionary in Thailand.

Navigate

Locate

Syndicate