... part of the Web Site of George North -- Back to Site Index
Webpage Design and Development, CPST-2400-10
with HTML5 and CSS3
Fall 2019

Guidelines for Naming HTML Files and Folders

If this seems confusing today, it will make more sense as our Semester progresses.

These tips are intended to save you time as you create and edit your WebPages.

  1. HTML file names should end in the suffix ".html" or ".htm". Whichever suffix you decide to use, please talk to your team members and use the same suffix on all your project html pages. Otherwise it is hard to remember which is which and your project will likely have more broken links in it. Example:

    Note the use of capital letters to make the name more readable.

  2. The file name should be no more than 32 characters, including the ".html" or ".htm" file suffix. Because your filename will become part of your WebPage's URL, it is better to use a slightly longer file name that will have an easier URL to remember than a jumble of unpronounceable letters. For example: Which of these would be easier to remember and give to a friend as a URL: hurricanes.html or hrrcns.html ? More examples:
  3. The first character of the file name should be a letter.
  4. File names and folder names should contain only letters, digits, and underscores -- no spaces, no punctuation, and no funny characters. We want to really emphasize this because people who do not follow these guidelines end up spending much more time fixing broken links, which can be a source of frustration. This is a "conservative" guideline with the goal that you should not have to spend extra time redoing your links if you move your files from one type of computer to another. This has been an issue for some past students when moving or copying their project WebPages to another WebServer.
  5. Whenver possible, make relative links for links from your project WebPages to other WebPages that are in that same project. This will make it possible to move your project WebSites to another WebServer without having to fix dozens of links. A relative link to a file in the same folder as the WebPage you are editing looks like: "siteIndex.html". In contrast, an "absolute" link looks like: "http://www.tulane.edu/~gnorth/2019Fall/CPST-2400-10/siteIndex.html". You can see that if your project was copied onto a different WebServer, you would have to fix all those absolute links. You will need to use absolute links when linking to WebPages for related WebSites that are not inside your project folder.
  6. Use relatively short names that are indicative of the content of the page. Nothing "cute" because you probably won't remember it six months from now when you need to edit it.
  7. Assume that all file names are case sensitive, so fish.jpg is different from Fish.jpg is different from FISH.jpg.
  8. Also name your image and sound files, etc., with names that will help you remember what is in them. Students who name their images something like picture1.jpg through picture20.jpg are frequently frustrated later because they have to open five or ten files later to find the image they want to edit. If you instead name your images something more descriptive, they will be easier to find later. Examples:
  9. Use folders to orginize your Assignment WebSites. Use folders on your own computer, and on the CPST WebServer. Folders for each Tutorial Case Problem could have names as simple as "T1C4" for Tutorial 1, Case Problem 4 ... and "T5C2" for Tutorial 5, Case Problem 2.

This means that in your file names, folder names, and anchor names there should be:




No : # & % + * = @ ~ ^ $

No : < > ( ) [ ] { } : ; ? !

No : Other Unusual Characters

Click Here to go back to the TOP of this page.