How to Organize Files on a Website
Be consistent., Have only one HTML file in a given folder.
Step-by-Step Guide
-
Step 1: Be consistent.
Whether you end your files with .htm or .html doesn’t matter; what matters is keeping it the same across the entire site.
Of course, this is only an issue if you hand-code the site.
If you are using an HTML editor such as Dreamweaver, it will automatically save the file with one extension or the other every time.
You can very feasibly have many different HTML files on a server with a hodgepodge of extensions and it will work just fine.
You could even use different names for the files, such as home.htm, but the point is to clean up your server and make things nice and tidy.
So, rule number one is: “Pick a method and stick with it." For this article, all HTML files will be referred to as index.htm. -
Step 2: Have only one HTML file in a given folder.
Label the file index.htm and label the folder what you want the link to be called.
For instance, if you are creating a page about puppies, create a new folder called puppies in your root folder (the one where you have the main index) and create a file in that new folder called index.htm.
You’re probably asking by now, “Isn’t that a lot of redundancy? I only have five pages on my site; why do I need such a detailed organizational plan?" Glad you asked! Organization is the key to easily finding files, and arranging files this way also shaves off valuable seconds in load time.
How? First, findability is maximized because we have been trained to look for files inside of folders.
This is how your operating system is laid out, and for good reason, too.
If you open a folder and find hundreds of non-related files, finding the right one you’re looking for will be difficult, at best.
Place secondary folders inside the main folder to arrange the data into logical groups.
Load time is affected, too, because browsers look for a folder first, then an index of that folder.
Searching for a file named puppies.htm is non-standard, so load time is going to be fractionally longer while it deduces whether puppies is a folder or a file, and then deduces what kind of file it is.
Name the folder puppies and name the file index.htm; that way your visitors will have a more pleasant experience on your site, as their load times will be lower.
Plus, if you ever want to add another file that also deals with puppies, all you have to do is add another folder inside the puppies folder, name the new folder brown puppies, and, again, name the HTML file index.htm.
Detailed Guide
Whether you end your files with .htm or .html doesn’t matter; what matters is keeping it the same across the entire site.
Of course, this is only an issue if you hand-code the site.
If you are using an HTML editor such as Dreamweaver, it will automatically save the file with one extension or the other every time.
You can very feasibly have many different HTML files on a server with a hodgepodge of extensions and it will work just fine.
You could even use different names for the files, such as home.htm, but the point is to clean up your server and make things nice and tidy.
So, rule number one is: “Pick a method and stick with it." For this article, all HTML files will be referred to as index.htm.
Label the file index.htm and label the folder what you want the link to be called.
For instance, if you are creating a page about puppies, create a new folder called puppies in your root folder (the one where you have the main index) and create a file in that new folder called index.htm.
You’re probably asking by now, “Isn’t that a lot of redundancy? I only have five pages on my site; why do I need such a detailed organizational plan?" Glad you asked! Organization is the key to easily finding files, and arranging files this way also shaves off valuable seconds in load time.
How? First, findability is maximized because we have been trained to look for files inside of folders.
This is how your operating system is laid out, and for good reason, too.
If you open a folder and find hundreds of non-related files, finding the right one you’re looking for will be difficult, at best.
Place secondary folders inside the main folder to arrange the data into logical groups.
Load time is affected, too, because browsers look for a folder first, then an index of that folder.
Searching for a file named puppies.htm is non-standard, so load time is going to be fractionally longer while it deduces whether puppies is a folder or a file, and then deduces what kind of file it is.
Name the folder puppies and name the file index.htm; that way your visitors will have a more pleasant experience on your site, as their load times will be lower.
Plus, if you ever want to add another file that also deals with puppies, all you have to do is add another folder inside the puppies folder, name the new folder brown puppies, and, again, name the HTML file index.htm.
About the Author
Nicole Hughes
Committed to making practical skills accessible and understandable for everyone.
Rate This Guide
How helpful was this guide? Click to rate: