File Naming Tutorials

An important part of designing your website is the name you give to each of your files. The first part is the actual file name and the last part is the file extension or the format in which it is saved. . The last part is in all probability going to be .htm or .html for the actual pages in your site. Whichever you choose will work but be consistent. Graphic files will have a file extension of .jpg or .gif or .png. Again the extension will depend on the format of the graphic image.

There are some rules you should follow in actually naming your files whether they are graphic files of html files or any other file type for that matter.

Do NOT use special characters in naming your files and do NOT use spaces. File names with spaces are going to appear with a %20 in place of the space.

Example: sarah smiths will.html will appear when viewed in a browser as sarah%20smiths%20will.html.

You should use hyphens – or underscores _ to separate words in file names rather than spaces.

Example: sarah-smiths-will.html or sarah_smiths_will.html.

Do not make your files names excessively long. sarah-smiths-will.html is better than sarah-smiths-last-will-and-testament-march-1792.html

Most web servers are case sensitive so My-File-Name.html and my-file-name.html are two different names. If you get used to using all lowercase letters in naming your files then you have one less thing to worry about.

For most servers your Home Page is going to be named index.html but make sure and check with your particular host on what it should be for your server.

The State Library of North Carolina has created a four-part video tutorial which covers the following:

Part One: Why is file naming important.
Part Two: How to change a file name.
Part Three: What not to do when changing a file name.
Part Four: Best practices for file naming.

All four of the video tutorials can be found on YouTube on the State Library’s channel at I took the opportunity to watch the entire series and think that it is very well done.

Important Note: If you are working with a web editor like Expression Web or Dreamweaver, do NOT change files names outside of the program or you may break you hyperlinks to those files. Changing file names within the program will keep any links to those files intact.


  1. Thank you for the information on naming files. I have just gone through papers and pictures of my and my husbands parents boxes. I wondered how I was going to file all of them. I did not know that I could not leave a space.

    I will read the video before I start naming.

  2. Wow! Awesome your post! Your site is very effective and helpful. Thanks for your sharing.

Speak Your Mind