DEV Community

Juan Primo
Juan Primo

Posted on • Updated on

HTML File and Folder Naming Best Practices

HTML and CSS File and Folder Naming Best Practices

Unlike regular files, in HTML and CSS file naming is important, and there are quite a few rules that you should follow to make sure your files are displayed and can be linked.

  • Rule 1: No spaces on folders or file names Spaces in file names will create broken links to files and/or folders (including images)

  • Rule 2: Only use alphanumeric characters (letters and numbers) Note: You can also use the hyphen and underscore, but it is better to avoid them when possible Some characters are reserved for use by the operating system or by other programs. Some examples are: "\, /, :, *, ?, ", <, >, and. | "

  • Rule 3: Don't start your file name with numbers Because some programs give special treatment to files that start with a number, it is a good practice to avoid using numbers to start a file or folder name.

  • Rule 4: Use all lowercase Saves you the effort of remembering when you used uppercase letters

  • Rule 5: Keep folder and file names short and meaningful.

  • Rule 6: Be consistent with your extension. Always use .htm or .html for all your files. Aside from .htm being a short extension, there is no difference between using one extension over the other, but you must remain consistent. Once you decide which extension you rather use, stick with that one for all of your files.

  • One rule to rule them all: The easiest way to name your files is simply by using letters and numbers (but not at the beginning of the file)

Here are some examples of good application of these rules: As you look at the example, try to use the rules to identify:

  • why the example is bad,

  • what makes it better, and

  • what makes it best

Bad Example Better Best
Contact us.html Contact_us.html contactus.html
2Page.html Page2.html page2.html
MyDog&I.html myDog_and_I.html mydog.html
My background.jpg MyBackground.jpg background.jpg
2Background.png Background_2.png background2.png

Your index file

Lastly, remember that the main page (or landing page) of each folder on any HTML project should always be named index.htm or index.html. This is important because the server will always look for the index page to be displayed, unless the web administrator indicates something different.

Note: Once you gain more experience as a web developer, you may encounter other extensions used when creating web pages with different technologies (.asp, .cfm, .asp, php, and .shtml).


Top comments (0)