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)