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.

Solution 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

Solution 2

you should mange your content in hierarchical directories so that you can keep track of your content. Most of the developer manages there content like this.

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

Solution 3

For the simplicity of your website, I would say Ex. 1 would work for you. If you start adding more complexity and more pages, an arrangement like Ex. 3 would be better.

To answer the latter part of your question, I would turn news.html into index.html under the news directory in Ex. 3, just to keep things more organized. If you navigate to the news directory without an index file, you will most likely get a forbidden message or give access to that folder.