File Naming Conventions

Up until now, you've probably not had to think about how you named your files. When working on the web, different types of computers must work together. This means that certain conventions must be followed.

Be sure to follow these rules:

Pay attention when saving your files

Always remember to name your file appropriately. Filenames should be short but clear.
Pay attention to where exactly you are saving your files. If you don't know where the file is, you won't be able to link to it.

Always use proper file extensions when saving files

All files (even on a Mac) have a file extension suffix. Make sure when you save you file, that you are using the correct suffix.

HTML files end in .html
CSS files end in .css
Image files end in either .jpg, .png, or .gif, depending on what type of file it is.
JavaScript files end in .js

Never use spaces in filenames

On a Mac or PC you can save a file called "my awesome website.html". This will not work on a website.

Use hyphens in your filenames instead to indicate spaces. Your filename would be "my-awesome-website.html" instead.

Do not use special characters in filenames

Characters such as ?, %,#, /, :, ;, •, etc. all either have a special meaning in a web url or are invalid. Because of this, they should not be used in filenames.

Only use letters, numbers, underscores, hyphens.

Periods should only be used in the file extension.

Filenames are case-sensitive

Assume that your filenames are always case-sensitive.

Uppercase letters and lowercase letters are different.

To avoid confusion, it is standard practice to always use lowercase letters.

Keep your files names short

Try not to make your files names really long. That being said, there is no need to make them so short that they are cryptic.

For example, a page about you and what you are doing right now:

about-me-and-what-im-doing-right-now.html: Bad. Name is too long and hard to type.
a.html: Bad. Name is too short and cryptic.
about.html: Good. Name is clear and concise.

Back to Week 1 page »