---
title: Best Practices for HTML Naming Convention and Referencing
description: Learn best practices for HTML naming conventions and referencing. Discover tips for file names, directory structures, and referencing data sources.
image: https://blog.rheinwerk-computing.com/hubfs/Best%20Practices%20for%20HTML%20Naming%20Convention%20and%20Referencing.png
---
[](https://blog.rheinwerk-computing.com/) [Blog](https://blog.rheinwerk-computing.com)
- Books
- Get an overview of our wide selection of books on every relevant computing topic.
- [General Computing](https://www.sap-press.com/rheinwerk-computing/general-computing/)
- [DevOps](https://www.sap-press.com/rheinwerk-computing/devops/)
- [Programming Languages](https://www.sap-press.com/rheinwerk-computing/programming-languages/)
- [Security](https://www.sap-press.com/rheinwerk-computing/security/)
- [Software Development](https://www.sap-press.com/rheinwerk-computing/software-development/)
- Book Subscription
- Get unlimited access to all Rheinwerk Computing books!
- [Programming Subscription](https://sap-press.com/subscriptions/)
[HTML & CSS](https://blog.rheinwerk-computing.com/tag/html-css)
# Best Practices for HTML Naming Convention and Referencing
 by [Rheinwerk Computing](https://blog.rheinwerk-computing.com/author/rheinwerk-computing)
Let’s discuss the naming conventions for files, directories, and directory structures when referencing other content.
This is important because you’ll make use of them repeatedly in your [HTML](https://learning.rheinwerk-computing.com/html-and-css)coding. Mind you, this isn’t yet about the HTML elements or HTML tags you can use to link a web page, but only about how to write such a link to the target. If you’re already familiar with terms such as full URL or absolute or relative path, you can skip this post or just skim through it.
## Valid and Good File Names for an HTML Document
The use of file names for web pages has become quite flexible. Nevertheless, here are some guidelines and recommendations you can follow: Use only lowercase letters a–z, digits 0–9, hyphens, and underscores if possible. The dot is usually used only to separate the file extension. Whether you use uppercase letters in the file name is a matter of taste, but you should keep in mind that some systems are case sensitive while others aren’t.
**Good Names for the Search Engine:** The file names can also be used to place keywords in them for the search engines. Instead of using the relatively meaningless *domain.com/page01.html*, you should choose a better name such as *domain.com/smartphones.html*. If there are several keywords in a file name, you should separate them with a hyphen. The underscore as a separator, on the other hand, is usually not evaluated by search engines as a word separator. Instead of *domain.com/smartphonesandcellphones.html*, where the keywords aren’t recognized, it’s better to use *domain.com/smartphones-and-cellphones.html*.
## Valid Directory Names and Meaningful Directory Structures
The same thing we just wrote for file names applies to the use of directory names. In addition to a meaningful directory name, a meaningful directory structure is also important. Again, you may have the advantage that this structure with good directory names will have a positive effect on your page ranking with the search engines. For example, the following is a useful directory structure:
`/smartphones`
`/smartphones/apple`
`/smartphones/android`
`/apps/apple`
`/apps/android`
`...`
Thanks to a directory structure based on different topics and coupled with a good file name, you could, for example, call an HTML document named *buy-ramsung-xyz.html* as follows:
`domain.com/smartphones/android/buy-ramsung-xyz.html`
On the other hand, you should refrain from using directory names that don’t carry much meaning for visitors or search engines, such as the following:
`/html`
`/html/pages`
`/contents/`
`/contents/pages`
`...`
## Writing a Reference to a Data Source
Without the functionality to reference other content, the internet wouldn’t be what it is today. In addition to classic hyperlinks to other content, such referencing is also used for many other things, including images, external scripts, CSS files, or video resources. For this reason, this section describes several ways to create a reference to other content.
### Simple Structure of Addresses on the Internet (URL)
There’s no comprehensive treatise at this point, but you should at least know the basic form of an address on the internet, also referred to as a *Uniform Resource Locator* (URL). Only thanks to this URL is it possible to use an address on the internet in a readable format and to access directories and documents. A classic URL looks like this: *http://www.domain.com/path/file.html*.
If you decompose this address, you’ll get the individual components listed in this table.
You can use the *protocol* (or *scheme*) to specify how the resource should be used. *http://* is the protocol for hypertext documents (*HTTP*). Other well-known representatives are *https://* for a secured data transfer, *ftp://* for a file transfer (*FTP*), or *file://* for the access to local files. With *www.domain.com*, you have a *host name* that’s converted to an IP address via the Domain Name System (DNS). It’s followed by the *path specification*, whose components are separated from each other by a */*. Finally, the *file name* (here, *file.html*) of the document you want to call is often specified as well.
The *www* of *www.domain.com* is part of the host name and conveniently chosen to give an indication of the host’s intended use, for example, as a WWW or FTP server. However, this isn’t a prerequisite. The name of a WWW server doesn’t necessarily have to start with *www*. You can select the service running on the server with the protocol and port on which the service is listening, for example, port 80 for WWW or port 21 for FTP.
In this example, with the host name *www.domain.com*, it’s a WWW domain name for a network server, where the ISO country code *com* is the top-level domain. The top-level domain is sorted either thematically (e.g., *com*, *org*, *net*) or geographically by country (e.g., *de*, *at*, *ch*). *domain* is the second-level domain and the actual name of the server. Here, further subdomains (or sublevels) are possible, which lie below another one in the hierarchy. *example.domain.com* would thus be a subdomain of *domain.com*, for example.
**Homepage: "index.html":** If you enter an internet address such as *http://www.domain.com/* in the address field of the web browser, you’ll still get a web page displayed in the browser even though you haven’t explicitly specified a path or file name there. This is because the web servers return a default page, depending on the setting. Many web servers return at least *index.htm*, *index.html*, or *default.html* if there’s a corresponding file in the root directory. This usually works with any other directory as well. For example, if you enter *http://www.domain.com/travel/* in the browser’s address bar and there’s an *index.html* file in the */travel* directory, that file will be returned. However, as already mentioned, it depends on the settings of the web server what can be returned or done and how this happens. Some web hosts also allow you to define your own rules for this in *.htaccess*. The *.htaccess* file is a configuration file that can be used to make various settings and specifications about things such as access control, exclusion of addresses, error messages, password protection, and alternative content, among other things.
### Using a Reference with Full URL to the Data Source
When something is referenced with a full URL, we’re talking about the fully spelled out web address. You can use a full URL such as *http://www.domain.com/travel/index.html*or *http://www.domain.com/pictures/foto.jpg* if the data is located on a different machine (host name/domain) than the HTML document.
### A Reference as an Absolute Path Specification Relative to the Base URL
If you reference something with an absolute path, the desired data is on the same computer as the HTML document. If a web page is accessible via *http://www.domain.com/travel/index.html*, */travel/index.html* represents the absolute path specification relative to the URL *http://www.domain.com*. Thus, you can use this path specification for your web pages if the data is located within your domain (or subdomain).
**Root Directory:** The root directory */* (the highest directory to reach) of a domain such as *http://www.domain.com* is often set as the document start directory by the web server when the domain is configured. For example, if you connect to an FTP client and want to upload your web pages, this root directory can also be inside a directory named *www*, *htdocs*, *web*, and so on. Nevertheless, the root directory for *http://www.domain.com* is usually still */* and not */www*, */htdocs*, or */web*. However, this again depends on the configuration implemented by your web hosting provider, whom you should contact incase of doubt.
### Specifying a Reference with a Relative Path to the Data Source
You can use a relative path specification if you use the current address as the reference address. For example, if you’re at the full URL *http://www.domain.com/travel/index.html*, and there’s an image named *photo.jpg* in the */travel* directory, you can reference this file with a relative path specification such as *photo.jpg* or *./photo.jpg*. Alternatively, you could use the absolute path specification with */travel/photo.jpg* or the absolute URL with *http://www.domain.com/travel/photo.jpg*. The use of the absolute URL is uncommon in such cases.
If *photo.jpg* or *./photo.jpg* is specified as a relative path, it’s assumed that the file is located in the same directory. If you want to reference a file in a directory one level above, you can use *../*. For example, if you want to access *photo.jpg* in the */travel* directory from the full URL *http://www.domain.com/travel/california/index.html* as a relative path, you could do so by using *../photo.jpg*. This way, you reference the directory above the current directory.
Editor’s note: This post has been adapted from a section of the book [*HTML and CSS:* *The Comprehensive Guide*](https://www.amazon.com/HTML-CSS-Comprehensive-J%C3%BCrgen-Wolf/dp/1493224220/) by [Jürgen Wolf](https://www.linkedin.com/in/j%C3%BCrgen-wolf-689bb114b/). Jürgen is a web and software developer and the author of several seminal works about programming and photography. Find out more about him on [www.pronix.de](https://www.pronix.de/).
This post was originally published 8/2024.
## Recommendation
[](https://www.amazon.com/stores/page/F4ED3E86-FFFF-43AC-9971-F4AD0B8D7CC7)
**Create Modern-Looking Websites with HTML and CSS!**
From structuring pages with HTML5 to crafting polished layouts with CSS3, this all-in-one guide walks you through everything you need to build modern websites — including responsive design, forms, tables, and multimedia. You'll also get a practical introduction to JavaScript fundamentals, making it a solid foundation for anyone getting started in web development.
[Learn More](https://www.amazon.com/stores/page/F4ED3E86-FFFF-43AC-9971-F4AD0B8D7CC7)
**by [Rheinwerk Computing](https://blog.rheinwerk-computing.com/author/rheinwerk-computing)**
Rheinwerk Computing is an imprint of Rheinwerk Publishing and publishes books by leading experts in the fields of programming, administration, security, analytics, and more.
[HTML & CSS](https://blog.rheinwerk-computing.com/tag/html-css)
[](https://www.facebook.com/share.php?u=https%3A%2F%2Fblog.rheinwerk-computing.com%2Fbest-practices-for-html-naming-convention-and-referencing%3Futm_medium%3Dsocial%26utm_source%3Dfacebook) [](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fblog.rheinwerk-computing.com%2Fbest-practices-for-html-naming-convention-and-referencing%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin) [](https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fblog.rheinwerk-computing.com%2Fbest-practices-for-html-naming-convention-and-referencing%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=https%3A%2F%2Fblog.rheinwerk-computing.com%2Fbest-practices-for-html-naming-convention-and-referencing%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=) [](mailto:?subject=Check+out+https%3A%2F%2Fblog.rheinwerk-computing.com%2Fbest-practices-for-html-naming-convention-and-referencing%3Futm_medium%3Dsocial%26utm_source%3Demail&body=Check+out+https%3A%2F%2Fblog.rheinwerk-computing.com%2Fbest-practices-for-html-naming-convention-and-referencing%3Futm_medium%3Dsocial%26utm_source%3Demail)
### Comments
### Latest Blog Posts
[](https://blog.rheinwerk-computing.com/how-to-use-efficient-and-simple-css)
[HTML & CSS](https://blog.rheinwerk-computing.com/tag/html-css)
## [How to Use Efficient and Simple CSS](https://blog.rheinwerk-computing.com/how-to-use-efficient-and-simple-css)
[Read More](https://blog.rheinwerk-computing.com/how-to-use-efficient-and-simple-css)
[](https://blog.rheinwerk-computing.com/how-to-integrate-css-into-html)
[Programming Languages](https://blog.rheinwerk-computing.com/tag/programming-languages)
## [How to Integrate CSS into HTML](https://blog.rheinwerk-computing.com/how-to-integrate-css-into-html)
[Read More](https://blog.rheinwerk-computing.com/how-to-integrate-css-into-html)
**Subscribe to our blog!**Get notified about future blog updates.
-
-
-
### The official Rheinwerk Computing Blog
Rheinwerk Computing is an imprint of Rheinwerk Publishing and publishes resources that will help you accelerate your computing journey. The Rheinwerk Computing Blog is designed to provide helpful, actionable information on a variety of topics, including programming, administration, security, and analytics!
### Blog Topics
- [All Topics](https://blog.rheinwerk-computing.com)
- [Programming Languages](https://blog.rheinwerk-computing.com/tag/programming-languages)
- [How To](https://blog.rheinwerk-computing.com/tag/how-to)
- [JavaScript](https://blog.rheinwerk-computing.com/tag/javascript)
- [DevOps](https://blog.rheinwerk-computing.com/tag/devops)
- [Web Development](https://blog.rheinwerk-computing.com/tag/web-development)
- [Python](https://blog.rheinwerk-computing.com/tag/python)
- [What Is?](https://blog.rheinwerk-computing.com/tag/what-is)
- [Cybersecurity](https://blog.rheinwerk-computing.com/tag/cybersecurity)
- [Software Development](https://blog.rheinwerk-computing.com/tag/software-development)
- [Java](https://blog.rheinwerk-computing.com/tag/java)
### Blog curated by
[](https://www.sap-press.com/rheinwerk-computing/) [Visit Rheinwerk Computing Store](https://www.sap-press.com/rheinwerk-computing/)
### About
- [Home](https://sap-press.com/)
- [About Us](https://sap-press.com/the-publisher/)
- [Contact](mailto:info@rheinwerk-publishing.com)
- [Legal Notes](https://sap-press.com/legal-notes/)
- [Privacy Policy](https://sap-press.com/privacy/)
- [Terms of Use](https://sap-press.com/terms/)
© 2026 Rheinwerk Publishing, Inc. | Change Privacy Options
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Rheinwerk Computing",
"url" : "https://blog.rheinwerk-computing.com/author/rheinwerk-computing"
},
"dateModified" : "2026-03-05T16:35:00.854Z",
"datePublished" : "2024-08-30T13:00:00.000Z",
"headline" : "Best Practices for HTML Naming Convention and Referencing",
"image" : [ "https://blog.rheinwerk-computing.com/hubfs/Best%20Practices%20for%20HTML%20Naming%20Convention%20and%20Referencing.png" ],
"mainEntityOfPage" : {
"@id" : "https://blog.rheinwerk-computing.com/best-practices-for-html-naming-convention-and-referencing",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://blog.rheinwerk-computing.com/hubfs/Logo-1.jpg"
},
"name" : "Rheinwerk Publishing, Inc."
}
}
```