Displaying the contents of a folder on an HTML webpage can be useful in many scenarios. For example, it can be used to display different download links that a website may have. This article looks at how to link to a folder with HTML, and how exactly the linking structure works.
Links in HTML
One of the few ways to add pseudo-dynamic functionality to an HTML webpage is to put in hyperlinks. Hyperlinks can be used for practically anything: whether it is navigating a website with back and forward buttons, or linking index entries to actual portions of the webpage.
The syntax of the link command, like all other HTML commands, is a tag pair:
<a href=”filename.html”>Open file.</a>
The ‘a’ stands for anchor, and the mandatory attribute ‘href’ is short for HTML reference. The text in between the two tags is the text highlighted on the webpage, indicating the link. The contents of the href attribute are always in quotations marks, and can also include a lengthy path name as well.
For example:
<a href=”/directory1/sub-directory2/file.html”>File deeply embedded in the system.</a>
Links are not restricted to just HTML files by any means. If a developer wants to display an image in the window, the anchor tag can be used. Music files and documents can also be referred to, except that it evokes a download process.
Linking to a Folder
Sometimes there is a requirement to display the contents of a folder on the HTML webpage. Providing a link to a folder, like in the following example, is not enough:
<a href=”/directory1/sub-directory2”>Open folder.</a>
This command will not have the desired effect in every browser. The tendency of the parsing engine is to look for an “index.html” file in the specified folder. While certain browser and server combinations will display the contents of the folder, this is not a uniform rule.
Therefore it is important to succeed the name of the directory with a forward slash, indicating that it is a folder whose contents are to be displayed:
<a href=”/directory1/sub-directory2/”>Open folder.</a>
It is important to remember that if there is an “index.html” file in this folder, none of the notations will work, as that file will always been opened.
Conventions for Navigating Between Folders
When using HTML links, there are two ways to specify pathnames: absolute and relative. Absolute pathnames include the entire progression to a particular file, right from the root. In the case of external links, an absolute pathname would contain the ‘https://’ part of the website address as well. The advantage of absolute pathnames is that the range of files that can be included as links increases significantly. However, if even one small change is made, the entire pathname becomes completely invalid.
Relative pathnames, on the other hand, specify the link in relation to the page it is being called from. Notations play a big part of relative pathnames, and some of the more common ones are:
- / - the root folder
- ./ - the current folder
- ../ - the previous folder
These notations are especially useful when navigating a complex directory structure. Relative pathnames cannot contain links to external websites.
