Home / Articles / Programming languages / Markup languages / HTML & CSS / File structure of the site

File structure of the site

File structure of the site
File structure of the site
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.

From developer's perspective any site can be divided into two levels - logical and physical. On a logical level site is a collection of web pages, united by a single design, style and links. At the physical level site is a collection of files of different types - it may contain programs, documents, images, and more. Thinking ahead how to create a convenient file structure not only helps developers optimize their work, but also helps visitors to better understand the structure of the site.

For simplicity, let's assume that we are dealing with a site that is made only of HTML-files, without any special "engine" programs.

Before creating folders and files in the root of the site it's necessary to develop the structure of the site - which sections and subsections will be present, and how to name them. For example, here is a site dedicated to optimizing graphics.

  • Home page;
  • Formats of grafical files;
  • Image resolution;
  • Optimization in Photoshop;
  • Optimizing GIF;
  • Optimizing JPEG;
  • Spatial anti-aliasing;
  • Cutting images;
  • Glossary of Terms.

Each section is a single HTML-document that you create and name. It's better to name files in Latin characters without spaces and in the lower register. This ensures flexibility and performance on different platforms.

Before assigning names to files, you should take into consideration some of the web server settings. These include: which files are to be loaded first, which files will have restricted access, how to bugtrack and other similar questions.

Which file to load first

Begin with viewing the home page. With so many different files present in the root of the site, how does the web server know which one to load, first? Well, if the path is specified, then it obvious. But in most cases, the address of the site is indicated incompletely, with no extra hints. In this case read the server settings where the file name and it's location is specified. Typically, the file name may be index.php, index.php, default.php, well, the list goes on. In order not to complicate your life by guessing which one it might be, you can indentify it yourself, by placing the file .htaccess in the root of the site. This is a configuration file for the popular Apache web server, and is a simple text document. In it write this line.

DirectoryIndex index.php index.php

Those separated by space are specified names of files to be viewed in order to determine their presence and if present to be run automatically. Then, if the path to the various files and folders is indicated, the browser will open the documents, as shown in the table (the protocol http:// is omitted for brevity).


What is actually being run









As can be seen from the table, even if the path to the file is incomplete, the web server fills the missing values. You can use this function to create links to various documents and their performance will not be affected.


  • .htaccess file is written without extension with the compulsory period in the beginning of the name;
  • .htaccess may not work on some servers;
  • Incomplete paths, as shown in the table, can only be run on a Web server. This trick will not work on your local computer;
  • If the file index.php doesn't exist in the specified folder, the browser will display a list of files that the folder contains.

How to disallow access to folders

There are two basic ways to restrict visitors viewing information in the specific folders on the site, which is sometimes necessary, because of contained sensitive information. First, create an empty index.php file and put it into the desired folder. As mentioned above, this file will be the first to load when selecting the path to the folder. And because it's empty, all you see as a visitor is nothing. Second - using the same file again .htaccess, which should be placed in the desired folder. Don't be surprised, this file is very universal, and can be placed throughout the site and in any quantities.

In this file write the following.


When the browser opens a folder containing .htaccess, the visitors see an error message number 403, which means that access to this page is prohibited.


All images used on a web page, are usually stored in a folder called images or img. This tradition organizes information, breaking it into blocks. So images, scripts and styles have a separate storage location.

Bug Tracking

If you create links in a proper way, you will never have so-called "broken links", when the link that leads to the file, has incorrect path or name. However, error 404 may also occur simply if you write incorrectly the page address. In that case, it would be good to display an error message, in order not to trouble the user and that he would believed that everything can be put right. To do this, create a separate web page, which will be shown in case of such an error. Link the error and the file can be done with the same root file .htaccess. In it add the following line.

ErrorDocument 404 /err404.php

The file name is err404.php and it is placed in the root of the site, the slash (character /) before the file name is required.

File structure of the site

Lets go back to creating the file structure of the site. There are two different approaches. In the first one - each section corresponds to the html-document in the root of the site. The path to it would look like this www.mysite.ru/optimize.php. The second one - creating folders that correspond to sections. In each folder place the file index.php. Because this file is not necessary to specified in the URL, the path will look like this www.mysite.ru/optimize.
Fig. 1 and Fig. 2 show two ways to organize files on the site.


Fig. 1. Organizing documents in files

Fig. 2. Organizing files in folders

It's up to the creators of the site what kind of structure to choose.

Additional files

Any site needs additional files, usually located in the root of the site. These are the files that perform certain tasks and have required names, as well as files defined by developers.

Required names 

index.php - is the name of the home page, as well as web pages, placed in folders, which are loaded if specified in the address. This name, as mentioned above, may vary depending on the type of Web server and its settings. But usually that's the way it looks.

.htaccess - the configuration file of the Web server Apache. This server is the most popular and widespread in the world, so the file is easy be found. There are, of course, exceptions.

robots.txt - a file designed for search engines. When indexing a site, it's the first one to be searched. An example of a ban for all search engines to visit site folders cgi-bin and images.

User-agent: *
Disallow: /cgi-bin/
Disallow: /images/

favicon.ico - site icon, it appears next to the site address if you place it in the section "Favorites" of the browser. This icon is 16x16 pixels of ICO format.

Optional names

Stylesheet - nowadays every site has its styles, usually placed in a separate file. This has several advantages - it's easy to change the appearance of elements on all pages by changing the parameters in a single place, the file is cached and loaded faster, reducing the total volume of all the documents. Typically, files like these have extention css.


Although names of some files dependent on the settings of the server and can vary from site to site, given principles are uplied to most of them. For dynamic sites the structure will be different, because their content is formed by using a so-called "engine". However, the auxiliary files such as style sheets, .htaccess, favicon.ico, robots.txt will remain.

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Log in or create a user account to post a comment.


Quick navigation

General navigation