Website folders/files structure

I’m making a personal project to review and put to practice what I’m learning at Codecademy.
Then, suddenly I’ve found myself with something like ten different .html files.

How a pro organize the files in the website directory?
I know it has “image”, “css” and “scripts”, but what about other html files like about.html, otherpage.html, blog.html, anotherone.html, etc…

Should I make a directory for each page inside my website?

That wouldn’t be necessary as there is no limit to how many files a directory, including the root, contains. The advantage of using folders is that the URL is easier to write over the entire site.

about/index.html =>  /about/
blog/index.html  =>  /blog/

so long as there is an index.html page in each folder the file name can be left off the URL.

As far as contact.html, and perhaps about.html are concerned, it wouldn’t hurt to have them on the site root where SEs can find them by default. images is a standard name that SEs also look for. If you don’t want outsiders to have access to the folder listing be sure to give it an index.html page. A simple boilerplate page will do, just as long as the navigation works so a user can back out. Give that page a noindex attribute so it doesn’t get indexed.

Skin graphics are something we likely won’t want indexed so use CSS to install them, and put them in their own folder inside the css folder. I usually call this folder, skin.

background-image: url(skin/bg.png)

Give that folder its own index.html page exactly the same as the images folder, with the noindex attribute. You could also give the css and script folders that same index.html.

Bottom line, keep the root directory neat and fairly sparse. Once you choose where to install the files, be sure the navigation works as expected and then never move those pages again once the site is launched. Use absolute URLs that lead from the root to the page directory.


That URL can be written into any page the same way, regardless how deeply nested it is. The leading / will always begin at the site root.