File & Folder Organization

Organizing Website Files & Folders

A well-organized website uses a clear directory structure and consistent file names so pages, images, stylesheets, scripts, and other resources are easy to locate and maintain.

Good organization becomes increasingly important as a website grows. Establishing a sensible structure from the beginning makes links easier to manage, reduces mistakes, and helps other developers understand how the website is arranged.

The Website Root Directory

The root directory is the top-level folder that contains the files and folders used by a website. Files placed below the root are organized into directories and subdirectories.

/
├── index.html
├── about.html
├── css/
├── img/
└── js/

In this example, index.html and about.html are located directly in the root directory, while stylesheets, images, and JavaScript files are stored in their own directories.

The terms folder and directory are commonly used to describe the same concept. Folder is often used when discussing a graphical file manager, while directory is common when describing paths and web-server file structures.

Create a Logical Directory Structure

A website directory structure should be simple enough to understand but organized enough that related files can be found easily.

/
├── index.html
├── about/
│   └── index.html
├── contact/
│   └── index.html
├── css/
│   └── style.css
├── img/
│   ├── logo.svg
│   └── products/
├── js/
│   └── main.js
└── downloads/

There is no single directory structure that every website must use. The best structure depends on the size of the site, the type of content it contains, and how the files will be maintained.

Organize Files by Purpose

Supporting files are commonly grouped into directories according to their purpose. This keeps them separate from HTML documents and makes related resources easier to locate.

Directory names are not predefined by HTML. Names such as css, js, and img are simply useful conventions that make the purpose of each directory easy to recognize.

Organize Content into Sections

Larger websites often benefit from grouping related HTML documents into content directories rather than placing every page in the root directory.

/
├── index.html
├── products/
│   ├── index.html
│   ├── computers.html
│   └── printers.html
├── services/
│   ├── index.html
│   ├── web-design.html
│   └── printing.html
└── contact/
    └── index.html

This structure makes relationships between pages easier to recognize and can produce clear, descriptive URL paths such as /services/web-design.html.

Avoid creating unnecessary levels of directories. A structure should make a website easier to understand, not bury pages inside a maze of folders.

Use Clear File Names

File and directory names should describe their contents clearly enough that their purpose can be understood without opening them.

about.html
contact.html
shipping-information.html
product-catalog.html

Names such as page1.html, newpage.html, or stuff.html provide little useful information and become increasingly confusing as a website grows.

Use Lowercase File Names

Using lowercase letters consistently for web file and directory names helps prevent problems on systems where capitalization is significant.

about.html
images/
contact-form.html

For example, a server may treat About.html and about.html as different files. Using lowercase names consistently removes that source of confusion.

Use Hyphens Between Words

When a file or directory name contains multiple words, hyphens provide a clear and widely used way to separate them.

web-design.html
contact-form.html
product-images/

Choose a naming convention and use it consistently throughout the website. For public-facing HTML files and directories, lowercase words separated by hyphens are generally easy for both people and software to interpret.

Avoid Spaces and Special Characters

Avoid spaces and unnecessary special characters in web file and directory names. They can make URLs harder to read and may require encoding when used in a URL.

contact information.html    Avoid
contact-information.html    Better

Simple names made from lowercase letters, numbers when needed, and hyphens are easier to type, link to, upload, and maintain.

Index Files

Web servers are commonly configured to look for a default document when a URL requests a directory rather than a specific file. The most familiar default filename is index.html.

https://www.example-web.site/

https://www.example-web.site/index.html

When the server is configured to use index.html as a default document, these URLs can serve the same file.

Directories can also contain their own index files.

/products/index.html
/services/index.html
/contact/index.html

This allows a directory URL such as https://www.example-web.site/products/ to serve the appropriate index document without requiring the filename in the visible URL.

Servers can also be configured to use other default documents, such as index.php, depending on the server and website technology.

Plan File Paths Carefully

The location of a file determines the path needed to link to it or load it as a resource. A logical directory structure makes these paths easier to understand and maintain.

/css/style.css
/img/logo.svg
/products/index.html
/products/computers.html

Changing the location of a file changes its path. Links, images, stylesheets, scripts, and other resources that reference the old location may need to be updated.

Relative and Root-Relative Paths

A relative path is interpreted from the location of the current document.

<a href="../contact.html">Contact</a>

The .. path segment moves up one directory level before looking for contact.html.

A root-relative path begins with a forward slash and is interpreted from the root of the website.

<a href="/contact.html">Contact</a>

<img src="/img/logo.svg" alt="Example Website logo">

<link rel="stylesheet" href="/css/style.css">

Root-relative paths can be particularly useful on larger websites because the same path can often be used from documents located at different directory levels.

Moving and Renaming Files

Moving or renaming an existing file can affect every page or external source that links to its previous URL.

Old:
/services/design.html

New:
/services/web-design.html

When changing an established website structure, update internal links and resource references carefully. Public URLs that have already been indexed by search engines or linked from other websites may also require an appropriate server-side redirect from the old address to the new one.

Planning a sensible structure early reduces the amount of reorganizing required after a website has grown.

Example Website Structure

The following example shows a manageable structure for a small multi-page website.

example-web.site/
├── index.html
├── about/
│   └── index.html
├── services/
│   ├── index.html
│   ├── web-design.html
│   └── printing.html
├── contact/
│   └── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── img/
│   ├── logo.svg
│   ├── banner.jpg
│   └── services/
└── downloads/
    └── brochure.pdf

Someone unfamiliar with the website can look at this structure and quickly determine where the main content and supporting resources are located. As the site grows, additional directories can be added where they provide a clear organizational benefit.

Common Organization Mistakes

Best Practices

• Plan the basic website directory structure before creating a large number of files.
• Group related resources and content into logical directories.
• Use descriptive file and directory names.
• Use lowercase names consistently.
• Separate words with hyphens instead of spaces.
• Avoid unnecessary special characters in file and directory names.
• Keep directory nesting as simple as the website allows.
• Use a consistent approach to relative and root-relative paths.
• Remember that moving or renaming a file changes its URL or resource path.
• Check links and resource references after reorganizing files.
• Plan changes carefully before altering URLs on an established website.

Summary

A logical file and folder structure makes a website easier to build, understand, troubleshoot, and maintain. Descriptive lowercase names, sensible directories, consistent naming conventions, and carefully planned file paths help prevent confusion as a website grows.

Good organization also reduces broken links and makes future changes easier to manage. Next, we will look at Writing Clean HTML and the coding practices that make markup easier to read and maintain.