How to Name HTML Files
You can’t open your code in a browser until you save it with a filename extension of .html (or .htm). Remember that page titles display in a browser title bar or tab bar. Titles are really how your page is “identified” to the world. The page filename, though, is more an internal part of the site.
Filenames are not kept secret from the public; they appear in browsers’ address bars. And an emerging approach in file-naming is to create more intuitive (and longer) filenames, like
The next time you do some web browsing, survey this trend by noting the file names that appear in the address bar of your browser as you visit pages.
This figure, for instance, shows a typical filename assigned by The New York Times — essentially it’s the article heading but with lowercase characters and dashes instead of spaces. That filename will help optimize how the page is detected and promoted in search engines.
Regardless, the most important consideration for an HTML page filename is that it works and follows necessary file-naming rules.
HTML files should be saved with all lowercase letters and no special symbols (except letters and numbers) except for – (dash) and _ (underscore), concluding with the extension .html.
Alternatively, .htm can work as an extension, but whatever you do, don’t mix the two. Files named about_me.htm and about_me.html saved to the same folder will cause havoc and confusion for you, your server, browsers, and visitors.
Similarly, the price for breaking the rules on using uppercase letters and special characters (aside from – and _) can be steep. Filenames with spaces, for instance, get translated into filenames with %20 where the space was, and tend to get corrupted when saved, forwarded, or linked to.
Filenames with a mixture of uppercase and lowercase letters (camelcase) can confuse browsers and servers: for example, avoid having two files named about_me.html and the other named About_Me.html in the same folder.
And sure, you will indeed encounter HTML pages on the web with filenames that include spaces and uppercase letters. But as you do, you will smile the knowing smile of a battle-scarred veteran designer, feeling comfortable in the knowledge that your own pages are more reliably named.
A special name for a home page
If the page you are creating is going to be the home page for your site, you should name it index.html.
You might think of a home page as the page visitors arrive at first when they come to your site. And you are correct. But how does a browser know that when your visitors enter “pat.com” (assuming for the moment that you are Pat and pat.com is your site), which of the many HTML pages at your site to open first?
Browsers detect your home page by looking for a file called index.html, which plays a special role. By default, when a browser is directed to a URL (like davidkarlins.com), the browser looks for a file called index.html. In other words, index.html serves as the home page within any folder. And in your site’s root folder (your URL), the index.html file serves as the site home page.