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 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
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
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.
Here’s a summary of the limitations and conventions for web site file names:
File Naming Rules for the Web
- no spaces
- no symbols
- 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!
Learn 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.