How to structure my HTML files properly?

Question

For a basic static website, with a few pages and sub-pages, I'm kind of confused on best practices for directory structure for the HTML pages.

Say I have a simple website like this:
An index (home) page, about, contact, and news page. On the news page, there are two links to two sub-pages of the news page, fizz.html, and buzz.html

Is it best to have all HTML pages in the same root directory folder like below?

Ex. 1

/foobar.com
  /css
  /js
  index.html
  about.html
  contact.html
  news.html
  fizz.html
  buzz.html

Or it best to have all sub-pages in a separate directory folder like this?

Ex. 2

/foobar.com
  /css
  /js
  index.html
  about.html
  contact.html
  news.html
  /news
     fizz.html
     buzz.html

Or is it best to have any pages with sub-pages all in it's own folder like this?

Ex. 3

/foobar.com
  /css
  /js
  index.html
  about.html
  contact.html
  /news
     news.html (maybe named index.html?)
     fizz.html
     buzz.html

If the method in Ex. 3 is the best way to organize, would you want to leave news.html as-is, or change its name to index.html? In the case of the latter, is it bad to have multiple html files named index? Are there any SEO issues caused by this too?

I currently have my test website structured per Ex. 2, which causes a problem, for example: if the user were at www.foobar.com/news/fizz.html, and they want to go back to the News page, if they happen to erase "fizz.html" from the URL, it doesn't work.

So I'm guessing Ex. 3 is the correct way to structure a website? I'm a bit confused here.

Answer 1

There is no best practice when i comes to structure it's what ever makes sense to you / easiest to manage. 'Rooting' everything is probably the easiest way at the moment.

That being said what you're trying to accomplish is generically known as 'routing' i.e. resolving resources to 'pretty' URLs. Most server side frameworks can accomplish this by default however as you're writing something static the only way to achieve something similar would be to:

1. tweak your .htaccess file
2. rely on a javascript framework

Angular has routing as an addon however if you want something more lightweight you could consider reactJS (as demo'd):

https://enome.github.io/javascript/2014/05/09/lets-create-our-own-router-component-with-react-js.html

Or any of the following (mithril would be another good choice):

http://microjs.com/#routing