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:

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.

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:

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.

Link formatting

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 >_>">