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 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.
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.
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
...
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.
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.
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.
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.
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 HTML and CSS: The Comprehensive Guide by Jürgen Wolf.