Guidelines for Naming HTML Files and Folders

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

  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:
    myhomepage.html

    In addition, use a consistent and standard suffix on other file formats indicating the format (.jpg, .gif, .wav, . . .).

  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 Web page'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:
    kennedy.html
    shakespeare.htm
  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, punctuation, or 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 LInC participants when moving or copying their LInC project Web pages from the LInC class Web site to their school Web site.
  5. Whenver possible, make relative links for links from your project Web pages to other Web pages that are in that same project. This will make it possible to move your LInC project Web site to your school Web server without having to fix dozens of links. A relative link to a file in the same folder as the web page you are editing looks like: "shakespeare.html". In contrast, an "absolute" link looks like: "http://ed.fnal.gov/lincon/projects/essays/shakespeare.shtml". You can see that if your project was copied onto a different web server, you would have to fix all those absolute links. You will need to use absolute links when linking to Web pages for external resources that are not inside your project folder.
  6. We strongly suggest using all lower case letters because people make fewer mistakes. Web authors (such as yourself) make fewer mistakes when creating links to your pages. Web readers make fewer mistakes when typing in the addresses to access your pages.
  7. 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.
  8. Also name your files with images, sounds, etc., with names that will help you remember what is in them. Participants 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:
    lightbulb.gif
    book.jpg
    bluebullet.gif
    redline.jpg
    stopsign.gif
  9. Be sure to create a graphics folder (directory) inside the folder (directory) you are using for all your Web pages. It should be titled "graphics"--all lower case letters. Past participants who did not do this have told us they wish they did because it was harder to keep their files organized with so many pictures in with the Web pages.
  10. Name your anchors in your pages something descriptive. An anchor named "#assessment" is easier to link to and tell others about than an anchor named "#anchor82904872".

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

No SPACES or TABS

No COMMAS or APOSTROPHES

No SLASHES or QUOTES

No # & % + * = @ ~ ^ $

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

No Other Unusual Characters


Are these HTML file names OK? If not, why?

  1. district123_home_page
  2. my homepage.html
  3. linc_home.html
  4. 1_4_all.html
  5. a:b.htm
  6. Joe'sReview.html
  7. earthquakes.HTML
  8. socrates.html
  9. buy/sell.html
  10. "alpine"skiing.html
  11. exercise#1.html
  12. costs>10bucks.html
  13. editor.htm
  14. rnfrst.htm
  15. image6.JPEG
  16. why_problem_based?.html