title: How to structure my HTML files properly?
body: <p>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.</p>
  
  <p>Say I have a simple website like this:<br>
  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</p>
  
  <p>Is it best to have all HTML pages in the same root directory folder like below?</p>
  
  <p>Ex. 1
  </p>
  
  <pre><code>/foobar.com
    /css
    /js
    index.html
    about.html
    contact.html
    news.html
    fizz.html
    buzz.html
  </code></pre>
  
  <p>Or it best to have all sub-pages in a separate directory folder like this?</p>
  
  <p>Ex. 2
  </p>
  
  <pre><code>/foobar.com
    /css
    /js
    index.html
    about.html
    contact.html
    news.html
    /news
       fizz.html
       buzz.html
  </code></pre>
  
  <p>Or is it best to have any pages with sub-pages all in it's own folder like this?</p>
  
  <p>Ex. 3
  </p>
  
  <pre><code>/foobar.com
    /css
    /js
    index.html
    about.html
    contact.html
    /news
       news.html (maybe named index.html?)
       fizz.html
       buzz.html
  </code></pre>
  
  <p>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?</p>
  
  <p>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. </p>
  
  <p>So I'm guessing Ex. 3 is the correct way to structure a website?  I'm a bit confused here. </p>