Guidelines for Naming HTML Files and Folders
These tips are intended to save you
time as you create and edit your Web pages.
- 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,
. . .).
- 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
- The first character of the file name should be a
letter.
- 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.
- 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:
"/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.
- 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.
- 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.
- 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
- 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.
- 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:
Are these HTML file names OK? If not, why?
- district123_home_page
- my homepage.html
- linc_home.html
- 1_4_all.html
- a:b.htm
- Joe'sReview.html
- earthquakes.HTML
- socrates.html
- buy/sell.html
- "alpine"skiing.html
- exercise#1.html
- costs>10bucks.html
- editor.htm
- rnfrst.htm
- image6.JPEG
- why_problem_based?.html