The hierarchical website structure is the most common navigation structure on the internet.  In one way or another, almost every website implements some form of hierarchy in their website. Regardless of the size of your website or the topic, a tiered structure is almost always the most effective and efficient way to lay out your website, and for the end user to navigate. In this tutorial, you will learn how to deal with hierarchical website structures.

The mixed hierarchical website structure is a form of the standard hierarchical structure that implements a linear-style design in addition to an implemented hierarchy.  While you may not see this style implemented into smaller website projects, it is more common and prevalent in complex large scale websites. 

What is a Mixed Hierarchical Website Structure?

A website hierarchical structure is comprised of, not surprisingly a “hierarchy” of pages and elements.  The home page (the first page a user typically encounters when visiting a website) is typically at the top of the hierarchy.  In the second level are traditionally topic pages, while the third level would be sub-topics that stem off of the main topics. 

Another way to look at it is if it were a tree: the home page as the trunk, the secondary pages making up the branches, and the sub-topic pages as the leaves.

For a linear website structure, a different methodology is utilized.  Let’s say we want to create a picture slideshow.  In this slideshow we have X amount of pictures and each picture needs to have its own page. Let’ also say we want to display these pictures in order, going from one page to the next.  It would be difficult to accomplish this using a typical hierarchical navigational structure because the pages would not be restricted in single direction. We, in a sense, want to guide the user along a pre-determined or linear path; so that the information is presented to them in an order (and manner) that is preferred.

With a mixed website, both the hierarchy and linear concepts are merged together.  For instance, the home page (index.html) and the second level pages stay exactly the same.  The third level, however, utilizes the linear approach where all of the pages are tied together.  And combination of course may be used, but in the example provided here, this is how we’ve divided up our content.

The HTML

The HTML source code depicts a 12-page website that uses a standard hierarchal structure for the first two levels, and merges the hierarchy with a linear structure on the level three pages. While only a portion of the code is expressed here, all of the individual HTML files used in our example are included within the tutorial files attached below.

The first page (index.html) starts off just as it would in standard hierarchy, and the navigation provides access to all of the level 2 pages in the website.  We see the “mixed” difference in the second level of the hierarchy.

In “page_1.html”, the mixed hierarchal structure is clearly illustrated with the linear inclusions.  As you can see, the hyperlinks to the sub-category pages are visible for all of the page_1.html sub topics (Page 1-A, page 1_B, etc.).  

Included in “page_1.html” are also the hyperlinks for all of the sub topics for “page-2.html”.  In the long run this creates a longer navigation menu, but the menu gives you access to every page on the third level.

Open the source file (if you haven’t already) and run “page_1_a.html” in your browser. You will notice that every page in the sub-category menu includes the menu.  

Download Source Files