What's New Tutorial Index References Contact

Directory Indexes (and Cleaner URLs)

As you've been building your site, you've likely named your web pages after their contents, about.html, photos.html, and so on. These are all perfectly fine and functional, but if you visit many websites, you'll notice their total lack of file extension when you visit a page, and it looks a lot cleaner. Tesserae is one such example:

This page's URL without an extension
Note the lack of .html in this page's URL.

Stripping the extension in a URL is incredibly simple, and while there's a few ways to do it, the simplest way is with a file called index.html.

Directory assistance

Of course, you're well used to the idea of browsing webpages, but did you know you can browse folders too? If you were to put in the URL of a folder into your web browser rather than the URL of an HTML document, you'd actually end up at something called a directory index, with all the files in that folder listed. It's not elegant, but it's certainly functional, and if you store your site's assets in a folder, they can all be browsed like that.

A common directory index
This is what your average, everyday directory index looks like. (Other server software might generate them differently, or the server owner might have customized theirs. This one's being generated by vanilla Apache.)

Sometimes, this is exactly what you want. Say, if you're offering downloads of versions of a program, or a giant list of MP3s, an index can serve you well enough. What if you don't want everything in that folder immediately accessible, however? What if you want another page to appear when you browse to that directory? This is where index.html comes into play.

Usage

I want you to think back to the "Links" tutorial in the Basic HTML section, and in particular, this graphic:

A sample site filetree

Note that the folder at the top of the tree, archives/, has an index.html page inside of it. Instead of seeing the contents of the archives/ folder when you visit it, the web server will send that index.html page instead. Assuming you use that page for showing off your VHS collection, you can link people to http://example.org/archives/ instead of http://example.org/archives/welcome.html or suchlike. This also keeps people from being able to see that index and therefore your site's files.

So technically, right now? You're browsing a folder on Tesserae and not a webpage. The web server's simply showing you the index.html in that folder rather than the contents of that folder. (Using folders for each part of your site is just a good idea anyway. This site's images are sorted with each tutorial in separate folders, keeping everything neat and together.)

Directory indexes can go by many names. For sites written in PHP or Perl, you might see index.php or index.cgi, respectively. The old CERN HTTPd (a very early web server) supports welcome.html alongside index.html. If you have access to your site's .htaccess, you can even set your own default directory index names. For simplicity's sake, though, you'll usually see index.html, and more often than not, that's what you should go with.

Adding onto the aforementioned "Links" tutorial, to link to a directory, simply use the directory for the URL.

<a href="archives/">Visit the Archives</a>

Don't link to the index.html—it'll still work, but you'll have the index.html at the end of the URL, creating extra typing and making half the point of using these files moot. (I should also mention that, if you're building your site locally, you'll still see a directory index when you click these kinds of links. This is not your fault, and I promise you it'll work when you upload all your files to your web host.)

This is also a good time to mention the way you link to a directory above a directory. If you were writing a page inside textfiles/ (maybe even textfiles/index.html) and you wanted to link to archives/, you'd use two dots, which means "go up a directory":

<a href="../">Go back to the Archives</a>

And of course, if you wanted to link a picture of your collection from inside textfiles/, you can get funnier with it:

<img src="../images/tapes.jpg" alt="I have way too many tapes >_>">

Summary:

  1. You can browse folders in a web browser just like you can web pages by going to, say, http://example.org/archives/ rather than http://example.org/archives/about.html.
  2. Normally, browsing a folder results in seeing a list of files in that folder, a directory index.
  3. If you want to hide that list of files for security reasons, you'd create an index.html page inside that folder. Trying to browse that folder now instead loads that index.html page.
  4. You can take advantage of this by putting your pages in different folders, each page called index.html, and linking to the folders rather than the pages themselves. This makes for much cleaner URLs without a file extension at the end of them.

Further reading