Protected website structures can be found in any website that aims to create restricted access to certain areas, for example, member’s only area of a social networking.  Most protected websites are structured with access to the “protected” areas, and sections that are available to everyone.

It is important to note that this tutorial does not cover any security or programming related to secure websites, which is out of the scope of HTML, and must be accomplished using additional tools. The intent of this tutorial is to discuss the basic structure of a protected website as it is first built in HTML.


Go ahead and open up Visual studios if you have not already done so or your favorite text editor. Save your project under whichever name of choice.


Our example site will include 15 pages.  Of these 15 pages, only three pages will be set up to be protected.

The start page (index.html) has a standard hierarchical structure, except for the bottom of the page which links to a different (protected) section of the website. With a little CSS styling and programming, this would look very different in context, but the structure would essentially remain the same.

If you open the source file to this project and view the index.html page in your browser, you will notice that the home page is the only page that includes a link to the protected area.  This was done purposely to illustrate the separation of pages between the “protected area” and the “public area”.

The source code for the protected area is no different than the rest of the website as far as the HTML itself is concerned.  

A Few Last Words…

When planning the layout for a protected website, storyboarding your site structure is highly recommended.  It’s easy (especially in complex websites) to create too many links to the protected areas, which can result in confusion by the end user, and put site security at risk. Join us next time for additional HTML tutorials. 

Download Source Files