Naming website folders and files
The naming of folders and files is a small detail that can make all the difference when maintaining a website.
Here are a few recommendations for naming folders and files, including HTML files (webpages), image files, and PDF and Word documents.
Guiding principles
- A standard way of naming folders and files – a naming convention – reduces the time it takes to review/check updates to the website.
- It’s easier to remember and use a single system for naming all folders and files, rather than different system for each type of folder or file.
- A standard for naming folders and files reduces the likelihood of broken links; accidentally over-writing files, etc.
- Other people, including people outside of your organisation, can see your folder and file names.
- A person who wants to link to your website often starts by copying the address of your webpage, and then pasting it into their webpage code or email client.
- A person who downloads an application form from your website will need to recognise it on their desktop.
- Short, but meaningful, file names are quicker to read, and less likely to be truncated (by your computer’s file management system), than long file names.
- Frontload folder and file names: move key words to the beginning of the name, and remove joining words such as ‘a’, ‘the’, ‘and’, ‘for’, etc.
- Using the correct file extension for the file type helps a computer to open the file in the right program.
Recommendations
- Skip this menu
- Use natural language to name folders and files.
- Typeset all file and folder names in lowercase.
- Only use the lowercase characters [a-z], the numbers [0-9] and the hyphen character [-] in folder and file names.
- Use a hyphen/dash between words.
- Use standard file extensions.
- Use prefixes and suffixes to help identify and group related files.
1. Use natural language to name folders and files.
Natural language is everyday, conversational, and usually descriptive language.
If a folder or file name can easily be read and understood, both by your co-workers and your parents, then it’s probably natural language.
If a name look like it’s written in Klingon, or bears a striking resemblance to the the title of an Aphex Twin track, then you’re in trouble…
Rationale
- You’ll need to relocate that folder/file/image.
Depending on the type of computer you are using it is easier to search for a file named: logo.gif; than remember that you named the logo: 003366.gif.
- Someone else will need to relocate that folder/file/image.
Folder and file names (and folder structures) that are too personalised make it harder for someone else to lend a hand when you’re ‘off sick’, or have ‘run out of time to add that press release to the homepage’.
- Folder and file names are the building-blocks for web addresses.
Using natural language makes it easier for a person to ‘figure-out‘ the contents of the webpage or file they are linking to. It will also make marketing folks happy to be able to direct someone to company.co.nz/products rather than company.co.nz/prdcts.
- Web traffic reports typically show page statistics by file name.
If the file name describes the contents of the webpage, then it’s easier to ‘figure-out’ what the statistics mean.
- Search engines may use folder and file names to generate search results.
If someone searches for ‘baby gifts’ and you have a webpage named baby-gifts.html, then your placement on Google might be improved.
2. Typeset all file and folder names in lowercase.
For example:
- The folder containing the About Us pages:
/about-us/- The Corporate History page/file:
corporate-history.html- A photo of the company mascot:
company-mascot.jpg
Rationale
- Web servers can be case sensitive.
For example, corporate-history.html (all lowercase), could be considered by a web server to be a different file than Corporate-History.html (initial capitals).
3. Only use the lowercase characters [a-z], the numbers [0-9] and the hyphen character [-] in folder and file names.
/multiple-word-folder/
multiple-word-file.html
080917-press-release.doc
Rationale
- Non alpha-numeric characters and punctuation, often called ‘special characters’, may also be used to write HTML code.
Using special characters in folder and file names runs the risk of creating a URL that will be interpreted as an instruction to the web browser, rather than a file name.
- Operating systems may not allow special characters.
Characters such as the question mark (?) and ampersand (&) cannot be used to name folders or files in Linux or Windows.
4. Use a hyphen/dash between words.
Use a hyphen/dash between words, rather than a space or underscore. For example:
2008-application-form.pdf
Rationale
5. Use standard file extensions.
Standard file extensions are those that are recognised by most web servers and web browsers.
Common web file types and extensions
| File type |
Typical use |
Extension |
| HTML document (webpage) |
HTML code / webpage |
.html, .htm |
| JPEG |
photos |
.jpg |
| GIF |
graphical images, such as logos, graphs and charts |
.gif |
| PNG |
graphical images, such as logos, graphs and charts (similar, but superior to GIF) |
.png |
| Portable Document Format (PDF) |
documents, e-books, product catalogues (non-editable) |
.pdf |
| Word / word-processing document |
application forms, checklists, reports (editable) |
.doc |
Rationale
- Operating systems often use the file extension to suggest ‘helper’ applications/programs.
Depending on the operating system, double-clicking on the file will open it using a helper application.
For example double-clicking a JPEG (file extension .jpg) will open the file in an image editing program such as Photoshop or ImageReady.
- Web browsers may use the file extension to ‘figure-out’ how to display or delivery the file.
For example, when you download a PDF document (file extension .pdf), it will be opened by Acrobat Reader or the Acrobat Reader plug-in – depending on the browser you are using.
- Using
.html as the file extension, rather than the server-scripting language extension (such as .asp or .php), makes it more difficult for someone attacking your website to exploit scripting loop-holes.
If a hacker knows the scripting language that has been used to create a page, they know where to start looking for scripting weaknesses.
6. Use prefixes and suffixes to help identify and group related files.
In addition to file extensions, file names can be used to differentiate between similar, related files, and also help when relocating files.
For example, date-based content pages, such as blog postings and media releases, often use the date as a prefix.
A blog entry might use the date (in the example below, the 19th Sept 2008) in the structure of the URL:
www.example.blogger.com/2008/09/19/name-of-blog-posting/
A media release (in Word format) might use the date as a prefix:
080919-product-launch.doc
The large and small (thumbnail) versions of the same photo;
wedding-reception.jpg (large version)
wedding-reception-th.jpg (thumbnail)
In the example above, the ‘-th’ is preferable as a suffix, as it will enable you to group the large and thumbnail versions of the same files through the file manager.
For example, if files are ordered alphabetically:
arrival.jpg
arrival-th.jpg
banquet.jpg
banquet-th.jpg
wedding-reception.jpg
wedding-reception-th.jpg
Rationale
- There are different ways to locate files on your local computer.
Files can typically be ordered: by file type; by date modified; or by file name.
- A file name with a date prefix maintains a chronology, even when the last-modified dates of two files may not match their publication date.
- Sometimes there are parent-child relationships between files.
Using related file names makes that relationship visible, at the file level, so you don’t need to open and compare the contents of each file.