/xxx.html vs /xxx/index.html

Tripecac · 07-19-2004, 07:11 PM

Site architecture. Directory structure. The way you organize your files... You know this topic, boring, frustrating, inescapable.

Let's say you (okay, I) have a static website. So no php, no mysql, no nuttin' 'cept html. Anyway, let's get even more specific (for the sake of a concrete example) and say it's a music website. You're building it from scratch.

And let's say you want a page that lists all the albums for a band, and then a separate page for each album.

Now, consider that albums page. Where's it gonna go? I can think of two main choices: you can throw it in your root directory like this:
????: NamePros.com http://www.namepros.com/web-design-discussion/39574-xxx-html-vs-xxx-index-html.html

/albums.html

...or you can create an "albums" directory and have the albums page be the default page for that directory:

/albums/index.html

What are the pros and cons of these approaches? Well, that depends on the goals of your site, right?

A big goal is to avoid having to move pages (and thus urls) around later. So if you pick /albums.html now, you need to be pretty confident that you're not gonna want to move to /albums/index.html. We need to try not to break any links!

Also, we should try to make it easy to add navigation to each page. Remember, this is a static site, so much of our "what nav goes where" thinking is gonna be influenced by the directory structure.

If the albums page (or the "album index") is gonna have the same navigation as the individual albums' pages, then it seeeeeeeems to make sense to put the albums page in the same directory, so: /albums/index.html. That way, all .html files in /albums/ can have exactly the same html for their nav bars and headers, since their relative path is the same (e.g., ../images/banner.gif will work for all of them)

Also, with mouse-gestures becoming more common, it's good to have an index.html (or some other default page) in every directory; this ensures that if someone "hacks" your url (e.g., moves up one path level), they'll find something there, and not a "you don't have permission to access this directory" error or something else).

Okay, now how about downsides of using /albums/index.html?

Well, for one thing, you'll end up with a bunch of files named "index.html". This sometimes makes is harder to know which file you are editing (if all you see in your editor's title bar is "index.html").

Also, there's an increased change in your accidentally uploading an index.html to the wrong path, thus overwriting some other index.html, which'll screw up your website until you notice your mistake.

Also, it's hard to know when *not* to use the /xxx/index.html solution. See, if you use it in one instance (for your albums page), what's to stop you from using it for *all* pages? Why not have every single page in your website be an index.html in its own directory?

See, either you do /xxx/index.html for *all* pages, or you'll have to apply judgement about when to use it. And that's the hard part. Judgement. You know, making decisions. Which is what this post is about. Good grammar, huh?

So think about this for a sec... It's a bit of a "paradox" or a "brain teaser" or whatever... Here goes...

Remember those individual album pages I mentioned? Well, one of the main reasons for using /albums/index.html was to get the albums page at the same directory level as the individual album pages, so that they could all share the same navigation elements, right? Okay, so that *seems* like a good idea... Until you have to apply the same thinking to the individual album pages...

You need to decide whether to give each album page its own directory. If you decide you like the /xxx/index.html approach as a rule of thumb, then you will feel tempted/pressured to put the individual album pages in their own directories:

/albums/album1/index.html
/albums/album2/index.html
/albums/album3/index.html

etc.

If you do this, you might make it easy to keep all the files for each album organized, *but* you lose the advantage of having the individual albums at the same directory depth as the albums page. You can no longer use the same HTML for navigation on all album-related pages, since the relative urls are different for individual albums (e.g., ../../images/banner.gif) and the main albums page (e.g., ../images/banner.gif).
????: NamePros.com http://www.namepros.com/showthread.php?t=39574

So... you are back where you started, which is having to decide WHEN to do xxx.html and when to do /xxx/index.html

Any thoughts on how to make this sort of decision? Any rules-of-thumb? Any articles? Books? Movies? (heh heh) Anything?

kash88888 · 07-20-2004, 10:56 AM

this is a very interesting post. I was wondering if somebody had real feedback on this.

emeri · 07-20-2004, 06:59 PM

I am just going to put my input that sometimes it is nice to have a lot of subfolders so the main one doesn't get to cluttered. Staying organized with your site can help you out a lot in the long run

Melinda

QBert · 07-21-2004, 11:29 PM

thats alot of reading, after reading the first few lines i would say do it /band,singer or whatever/albem/index.html

Its nice to have things orginised. that way your site has room to expand. also you can keep all related info together hassle free

QBerty

darlin · 07-22-2004, 03:36 PM

I usually put the html files in the root directory, and images, files... etc in a sub directory, yet nothing is cluttered. Note, that this is for HTML only sites. The situation is different when I use a php driven site.

kash88888 · 07-23-2004, 09:04 AM

creating too many folders and subfolders also affects the PageRank value of your pages for SEO

Tripecac · 07-24-2004, 11:29 AM

I think I have a solution to the "directory link" problem. Offline, we need a way to ensure that directory links (e.g., ../somewhere/) get default files appended to them. I've written a javascript function that does this. Here's the script:

Code:

function handleDirectoryLinks()
{
  var isOffline = (document.location.hostname == "");
  if (isOffline)
  {
    for (var i = 0; i < document.links.length; i++)
    {
      var link           = document.links[i];
      var isLocal        = (link.hostname == "");
      var lastSlashIndex = Math.max(link.pathname.lastIndexOf("/"), link.pathname.lastIndexOf("\\"));
      var endsInSlash    = (lastSlashIndex == link.pathname.length - 1);
      var isDirectory    = (lastSlashIndex  > link.pathname.lastIndexOf("."));
      if (isLocal && isDirectory)
      {
        link.pathname += (endsInSlash ? "" : "/") + "index.html";
      }
    }
  }
}

To use it, simply have:

Code:

<body onload="handleDirectoryLinks()">

I've created and uploaded a test page that uses this logic. It includes the javascript within the html; of course we'll want to put the js in an external file and reuse it in all our pages.

To view the test page online go to:
????: NamePros.com http://www.namepros.com/showthread.php?t=39574

http://www.tripecac.com/test/test_of..._handling.html

Online, nothing should happen; the links should be remain untouched. Download the page and view it locally so see what happens offline: the directory links should get "index.html" appended to them (before the query string of course).

So, when previewing pages offline, or viewing them on a CD, as long as javascript is enabled, the "implicit" links (where no file is listed) should turn into "explicit" links, enabling the site to work... As long as we actually use index.html files of course.

Do other people use this strategy for developing sites offline? Are there any downsides to it? Things I should consider before removing all the explicit file references from my links?

Anthony · 07-25-2004, 12:02 AM

What a novel you wrote up there...

Anyway, using www.domain.com/folder is much better than using www.domain.com/folder.html because it is easier to type in for users and also allows you to organize your website better. The only con would be that you need to make sure your links are configured correctly to go to that folder.

Tripecac · 07-25-2004, 04:22 PM

What about all the index.html files that result?

If we apply the xxx/yyy (instead of xxx/yyy.htm) approach to all of our pages, then every page will be named index.html (or index.htm or default.htm or whatever the server likes).

Are there any downsides to the everything-is-an-index.html strategy, aside from these:

1) it's sometimes hard to tell which index.html you are editing in an editor
2) there's an increased chance of overwriting the wrong file without knowing it (since everything has the same filename)

kaliboy2g · 07-26-2004, 05:57 PM

xxx/index.html makes it easier to remeber, cause then when some wants to go to a page at your site they can remember www.yoursite/thispage/

correction i meant www.yoursite.com/thispage

Anthony · 08-01-2004, 12:15 AM

Quote:

Originally posted by kaliboy2g
xxx/index.html makes it easier to remeber, cause then when some wants to go to a page at your site they can remember www.yoursite/thispage/

correction i meant www.yoursite.com/thispage

Exactly. index.html is the default page in any directory, so you don't have to worry about people having to type that in. As far as getting confused in your HTML editor, that's a whole different story!

raspberryh · 08-20-2004, 05:35 PM

i ALWAYS use xxx.com/yyy/ with an index.html in each folder for this reason - if someone is browsing your site, and say that they are at this page: xxx.com/yyy/any page.html... you should always have an index.html page in that directory, because a lot of times, the user may go up into his/her address bar and delete the 'any page.html' because they want to backtrack. this way, if they do that, they won't get either an error page, or a listing of all your files in the directory. it has much better usability, and usability rocks.

in addition, i also think it is waaaay better not to have tons of files in the root directory. that is one of my pet peeves. i like to see only a few files in the root directory, and then a folder for each section of the site, with an index.html file inside each folder.

it also makes it easier for an outsider looking in on your site (say, another graphic designer you may be working with). it is logically easier to understand than having to figure out a bunch of random files in the root directory.

c4smok · 08-21-2004, 08:59 PM

A good setup to your own needs for expansion and for contraction is the best way to go =)

Everybody has differnt Ideas and differnt codes they use =P

.edu · 08-21-2004, 09:03 PM

Go with the index.xxx for the subs. Its much more cleaner and more pretty to the eyes for your visitors and not to mention it would be easier for you to find what you are looking for when you are tweaking or updating especially if your going to have alot of files. Going the root directory route can be very messy if you have lots of files and would get even more messy as you add more content to your site. As for getting all screwed up during developement, thats just something you need to put up with.

07-19-2004, 07:11 PM	THREAD STARTER #1 (permalink)
Tripecac New Member Join Date: Jan 2004 Posts: 14	/xxx.html vs /xxx/index.html Site architecture. Directory structure. The way you organize your files... You know this topic, boring, frustrating, inescapable. Let's say you (okay, I) have a static website. So no php, no mysql, no nuttin' 'cept html. Anyway, let's get even more specific (for the sake of a concrete example) and say it's a music website. You're building it from scratch. And let's say you want a page that lists all the albums for a band, and then a separate page for each album. Now, consider that albums page. Where's it gonna go? I can think of two main choices: you can throw it in your root directory like this: ????: NamePros.com http://www.namepros.com/web-design-discussion/39574-xxx-html-vs-xxx-index-html.html /albums.html ...or you can create an "albums" directory and have the albums page be the default page for that directory: /albums/index.html What are the pros and cons of these approaches? Well, that depends on the goals of your site, right? A big goal is to avoid having to move pages (and thus urls) around later. So if you pick /albums.html now, you need to be pretty confident that you're not gonna want to move to /albums/index.html. We need to try not to break any links! Also, we should try to make it easy to add navigation to each page. Remember, this is a static site, so much of our "what nav goes where" thinking is gonna be influenced by the directory structure. If the albums page (or the "album index") is gonna have the same navigation as the individual albums' pages, then it seeeeeeeems to make sense to put the albums page in the same directory, so: /albums/index.html. That way, all .html files in /albums/ can have exactly the same html for their nav bars and headers, since their relative path is the same (e.g., ../images/banner.gif will work for all of them) Also, with mouse-gestures becoming more common, it's good to have an index.html (or some other default page) in every directory; this ensures that if someone "hacks" your url (e.g., moves up one path level), they'll find something there, and not a "you don't have permission to access this directory" error or something else). Okay, now how about downsides of using /albums/index.html? Well, for one thing, you'll end up with a bunch of files named "index.html". This sometimes makes is harder to know which file you are editing (if all you see in your editor's title bar is "index.html"). Also, there's an increased change in your accidentally uploading an index.html to the wrong path, thus overwriting some other index.html, which'll screw up your website until you notice your mistake. Also, it's hard to know when not to use the /xxx/index.html solution. See, if you use it in one instance (for your albums page), what's to stop you from using it for all pages? Why not have every single page in your website be an index.html in its own directory? See, either you do /xxx/index.html for all pages, or you'll have to apply judgement about when to use it. And that's the hard part. Judgement. You know, making decisions. Which is what this post is about. Good grammar, huh? So think about this for a sec... It's a bit of a "paradox" or a "brain teaser" or whatever... Here goes... Remember those individual album pages I mentioned? Well, one of the main reasons for using /albums/index.html was to get the albums page at the same directory level as the individual album pages, so that they could all share the same navigation elements, right? Okay, so that seems like a good idea... Until you have to apply the same thinking to the individual album pages... You need to decide whether to give each album page its own directory. If you decide you like the /xxx/index.html approach as a rule of thumb, then you will feel tempted/pressured to put the individual album pages in their own directories: /albums/album1/index.html /albums/album2/index.html /albums/album3/index.html etc. If you do this, you might make it easy to keep all the files for each album organized, but you lose the advantage of having the individual albums at the same directory depth as the albums page. You can no longer use the same HTML for navigation on all album-related pages, since the relative urls are different for individual albums (e.g., ../../images/banner.gif) and the main albums page (e.g., ../images/banner.gif). ????: NamePros.com http://www.namepros.com/showthread.php?t=39574 So... you are back where you started, which is having to decide WHEN to do xxx.html and when to do /xxx/index.html Any thoughts on how to make this sort of decision? Any rules-of-thumb? Any articles? Books? Movies? (heh heh) Anything?

07-21-2004, 11:29 PM	#4 (permalink)
QBert NamePros Regular Join Date: Apr 2004 Location: Australia Posts: 814	thats alot of reading, after reading the first few lines i would say do it /band,singer or whatever/albem/index.html Its nice to have things orginised. that way your site has room to expand. also you can keep all related info together hassle free QBerty __________________ :: www.URLBlur.com - Blur your URL and protect your privacy! :: www.AokHost.com - Powerful, Secure and Reliable Website Hosting!

07-22-2004, 03:36 PM	#5 (permalink)
darlin New Member Join Date: Jul 2004 Location: South East US Posts: 4	I usually put the html files in the root directory, and images, files... etc in a sub directory, yet nothing is cluttered. Note, that this is for HTML only sites. The situation is different when I use a php driven site. __________________ Looking for a superior web host? Try the one I've used for 3years, LunarPages

07-24-2004, 11:29 AM	THREAD STARTER #7 (permalink)
Tripecac New Member Join Date: Jan 2004 Posts: 14	I think I have a solution to the "directory link" problem. Offline, we need a way to ensure that directory links (e.g., ../somewhere/) get default files appended to them. I've written a javascript function that does this. Here's the script: Code: function handleDirectoryLinks() { var isOffline = (document.location.hostname == ""); if (isOffline) { for (var i = 0; i < document.links.length; i++) { var link = document.links[i]; var isLocal = (link.hostname == ""); var lastSlashIndex = Math.max(link.pathname.lastIndexOf("/"), link.pathname.lastIndexOf("\\")); var endsInSlash = (lastSlashIndex == link.pathname.length - 1); var isDirectory = (lastSlashIndex > link.pathname.lastIndexOf(".")); if (isLocal && isDirectory) { link.pathname += (endsInSlash ? "" : "/") + "index.html"; } } } } To use it, simply have: Code: <body onload="handleDirectoryLinks()"> I've created and uploaded a test page that uses this logic. It includes the javascript within the html; of course we'll want to put the js in an external file and reuse it in all our pages. To view the test page online go to: ????: NamePros.com http://www.namepros.com/showthread.php?t=39574 http://www.tripecac.com/test/test_of..._handling.html Online, nothing should happen; the links should be remain untouched. Download the page and view it locally so see what happens offline: the directory links should get "index.html" appended to them (before the query string of course). So, when previewing pages offline, or viewing them on a CD, as long as javascript is enabled, the "implicit" links (where no file is listed) should turn into "explicit" links, enabling the site to work... As long as we actually use index.html files of course. Do other people use this strategy for developing sites offline? Are there any downsides to it? Things I should consider before removing all the explicit file references from my links?

07-26-2004, 05:57 PM	#10 (permalink)
kaliboy2g NamePros Regular Join Date: Apr 2004 Posts: 994	xxx/index.html makes it easier to remeber, cause then when some wants to go to a page at your site they can remember www.yoursite/thispage/ correction i meant www.yoursite.com/thispage __________________ Free: Domains, Hosting, Templates, Scripts, etc http://www.usethishost.com

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

07-20-2004, 10:56 AM	#2 (permalink)
kash88888 NamePros Regular Join Date: Mar 2004 Location: South Florida Posts: 233	this is a very interesting post. I was wondering if somebody had real feedback on this.

07-20-2004, 06:59 PM	#3 (permalink)
emeri Melinda Join Date: Mar 2004 Posts: 1,938	I am just going to put my input that sometimes it is nice to have a lot of subfolders so the main one doesn't get to cluttered. Staying organized with your site can help you out a lot in the long run Melinda

07-23-2004, 09:04 AM	#6 (permalink)
kash88888 NamePros Regular Join Date: Mar 2004 Location: South Florida Posts: 233	creating too many folders and subfolders also affects the PageRank value of your pages for SEO

07-25-2004, 12:02 AM	#8 (permalink)
Anthony NamePros Expert Join Date: Dec 2003 Location: NYC Posts: 9,132	What a novel you wrote up there... Anyway, using www.domain.com/folder is much better than using www.domain.com/folder.html because it is easier to type in for users and also allows you to organize your website better. The only con would be that you need to make sure your links are configured correctly to go to that folder.

07-25-2004, 04:22 PM	THREAD STARTER #9 (permalink)
Tripecac New Member Join Date: Jan 2004 Posts: 14	What about all the index.html files that result? If we apply the xxx/yyy (instead of xxx/yyy.htm) approach to all of our pages, then every page will be named index.html (or index.htm or default.htm or whatever the server likes). Are there any downsides to the everything-is-an-index.html strategy, aside from these: 1) it's sometimes hard to tell which index.html you are editing in an editor 2) there's an increased chance of overwriting the wrong file without knowing it (since everything has the same filename)

08-20-2004, 05:35 PM	#12 (permalink)
raspberryh New Member Join Date: Aug 2004 Location: florida Posts: 15	i ALWAYS use xxx.com/yyy/ with an index.html in each folder for this reason - if someone is browsing your site, and say that they are at this page: xxx.com/yyy/any page.html... you should always have an index.html page in that directory, because a lot of times, the user may go up into his/her address bar and delete the 'any page.html' because they want to backtrack. this way, if they do that, they won't get either an error page, or a listing of all your files in the directory. it has much better usability, and usability rocks. in addition, i also think it is waaaay better not to have tons of files in the root directory. that is one of my pet peeves. i like to see only a few files in the root directory, and then a folder for each section of the site, with an index.html file inside each folder. it also makes it easier for an outsider looking in on your site (say, another graphic designer you may be working with). it is logically easier to understand than having to figure out a bunch of random files in the root directory.

08-21-2004, 08:59 PM	#13 (permalink)
c4smok NamePros Regular Join Date: Aug 2004 Location: namewanted.com Posts: 748 Follow @GameOpen	A good setup to your own needs for expansion and for contraction is the best way to go =) Everybody has differnt Ideas and differnt codes they use =P

08-21-2004, 09:03 PM	#14 (permalink)
.edu Senior Member Join Date: Feb 2004 Location: Next to 7-11 Posts: 3,385	Go with the index.xxx for the subs. Its much more cleaner and more pretty to the eyes for your visitors and not to mention it would be easier for you to find what you are looking for when you are tweaking or updating especially if your going to have alot of files. Going the root directory route can be very messy if you have lots of files and would get even more messy as you add more content to your site. As for getting all screwed up during developement, thats just something you need to put up with. __________________ DomainPyramid Coming Soon! Look at this! <-- :ghost: Look at this! <-- :ghost:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)