Directory Indexes (and Cleaner URLs)
As you've been building your site, you've likely named your web pages after their contents,
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:
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
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.
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.
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.cgi, respectively. The old CERN HTTPd (a very early web server) supports
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 >_>">
- You can browse folders in a web browser just like you can web pages by going to, say,
- Normally, browsing a folder results in seeing a list of files in that folder, a directory index.
- If you want to hide that list of files for security reasons, you'd create an
index.htmlpage inside that folder. Trying to browse that folder now instead loads that
- 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.