The HTML and CSS Blog:

What You’ll Learn in This HTML Lesson

You will learn how to appropriately name files that are used in websites and why there are limitations to what you can name a file. We’ll go over what the limitations are to file names and further, what are the best practices.

File names cannot use spaces or symbols

File names cannot have use spaces or symbols

File Naming Conventions: First the Limitations

It was hard for me to get used to naming files for the web—I kept forgetting to avoid spaces. I’d like to go over a few limitations to file names and some best practices to make it easier for you to update your site, and easier for others to search your site by using a few best practices when naming your files.

No Spaces in File Names

No spaces in file names

No spaces in file names

First, you should not use any spaces in file names. You may use dashes or underscores if you wish to separate words in your file names. For example, this blog’s file name is: file-naming-conventions-best-practices, I chose to use dashes to separate words. That’s a lot easier to read than filenamingconventionsbestpractices.

Technically, you can use spaces in your file names because your browser will automatically convert them into something it understands. This means your browser will convert a file named “How to name new web files.html” into “how%20to%20name%20new%20web%20files%20.html”. Yuck. Best not to use spaces at all.

No Symbols in File Names

If you use symbols in file names, the urls may not load    [image via Engine Yard]

Many symbols are used in code are meaningful to the web browser: for example the greater than symbol (<)  indicates an html tag name, quotes (“ “) are used to surround HTML attribute values. A slash (/) indicates a folder. Since symbols often mean things in code, you should not use them in file names. A dash or underscore are the only acceptable symbols that can be used in web file names. Just stick to letters and numbers, and dashes or underscores.

File Names Are Case Sensitive

Path names are case-sensitive when linking between pages. That means it is ok to use upper or lowercase in your file names, but if you are using upper-case letters in your filename, you need to make sure when you link to that file in your code that you remember to uppercase things exactly the same. Simply put, in your HTML ThisFile.html is not the same as thisfile.html.

The Home Page is Special

The home page of all websites is always named index.html (all lowercase). The index page must be located loose in the root folder (not located in a sub-folder). Why is this? When you type in a web address into a browser it directs the browser to your root folder — not a specific file — so all browsers look inside your root folder for a default common name: index.

File Naming Conventions Meet the Semantic Web

In a Post-Web 2.0 world the next generation isn’t “web 3.0,” now all the talk is about the “semantic web.” Much of this is about helping computers better understand a bit about all this data they’re transferring. But it’s also about making the content that users see more readable by the users themselves.

It makes so much sense to give your files names that make sense. A random name or a series of numbers doesn’t help much when you are looking for a certain file to update your web site. Random names also don’t help a potential visitor looking at a search page. The path and filename is visible on the search results page; it would be helpful if it meant something to the web visitor. Try to use common sense, and give your files meaningful rich semantic names that reflect the page content.

Semantic Web means you should use meaningful and logical names

Semantic Web means you should use meaningful and logical names

Here’s a summary of the limitations and conventions for web site file names:

File Naming Rules for the Web

  • no spaces
  • no symbols
  • case-sensitive
  • ok to use: letters, numbers, dash or underscore

File Naming Best Practices

  • semantic web
  • common sense, logical names
  • use lower case or camelCase for easier readability
  • use file names that reflect the file’s content

Brain Snack: You try it!

Site Map

file naming conventions bunny: get rid of spacesLearn HTML with this Activity: Look at this site map, and plan the file names for the web pages. There is also an image folder containing several images for the website that also need to be named appropriately. Rename the html page names and image names: avoid spaces and symbols, and think about creating semantic meaningful names that reflect the content of the website.

picture here: site map and screen capture of root folder, showing the css file and image folder with images inside.

Alternatively, if you already have a website you’re working on, you can do this exercise for your own files. Remember though, that if you change a file name it will affect the url. Take care to note any broken links caused by links that still refer to the older url name.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.