What is the Basic Anatomy of a Website?

Before you start designing a web site you should be familiar with basic web site layout and organization. A web site is a collection of files and folders containing the content that you’ll be presenting to your visitors as well as the files needed to present that content, such as CSS files, media files and scripts. The web site design process starts by organizing these files and then developing a strategy for linking them together.

Web sites generally consist of 4 basic page elements; the header, footer, navigation menu and content. The layout of your site should allow visitors to easily navigate through the pages and find the information that they need.

The header is the top most element of the site can contain your site name and logo as well as menu items. Although some sites include the navigation menus in the header they can also be found on the side or bottom of the site or in several locations such as at the top and bottom.

The navigation menu is the main element that connects all the pages together. Common menu items include links to a page with contact details (address, phone numbers and email), a site map or table of contents, and a way to return to the “home” page. Beyond that the menu items will vary depending on the internal content of the site.

The footer is located at the bottom of the page and typically contains copyright information and links to the site’s privacy policy.

In the center of all these elements is the page content. While the header, footer and menus stay the same throughout the site, the content changes from page to page. As your site grows you may find it more and more difficult to maintain if you haven’t planned well in advance. For example, if you decide to change the header a site that has grown to 50 pages that means opening each page, making the change and saving it. This can be very time consuming. A better way is to put the header, footer and menu in their own individual files when you first create the site. Then each time you develop a content page you can use include files to add the header, footer and menu. By using included files on your site you can quickly make a global change to all pages on the site by just changing the one file.

In addition to the “public” face of the site, what the visitors see, there’s also the internal organization of the site to consider. Web pages can consist of text, graphics, scripts, style sheets, multimedia and other files. In order to make your site easier to maintain you should divide the web site into different folders and directories. For example, you could keep all your images in a folder called “images”. You could also further divide the site into separate folders for different types of content rather than having all your pages located in the root directory of the site. Not only do folders make your site more organized but you can also add security controls that only allow users to access designated areas of the site.

By taking the time to plan out your web site before you start developing, you’ll find it much easier later on to maintain and you’ll ensure that visitors to the site are easily able to navigate it’s contents.