There are five main structural elements common to almost every website. While we want our website to stand out, these structural consistencies allow visitors to move from site to a site without having to figure out how each one works.
The structural parts of a website are the:
- primary menu navigation
- body or primary content
Why is it important to follow the rules of basic site structure?
Without consistent site structure from company to company, users would constantly be aggravated and frustrated. Consequently, understanding the elements and using them appropriately will provide your visitors with a comfortable and familiar experience.
Using our own website as an illustration, we’ve outlined the structural parts of a website below.
The Structural Parts of a Website
The first structural area is the header and it runs across the top of all web pages. Its prime location makes it one of the most valuable areas. Anyone visiting your website will see the header first. Likewise, they’ll see the header again on any subsequent pages they visit. This repetition can help build brand awareness, so be sure that it is an accurate reflection of your company.
Your header should be simple and easy to read. Therefore, avoid trying to squeeze in too much information.
One of the elements within the header is your logo. To learn more about logos on websites, read Make My Logo Bigger: Why your logo is not the most important element on your website.
2. Primary Navigation Bar
A clear and concise primary navigation structure is important and often undervalued. Organize your content into logical categories and subcategories. This will make it easy for your website visitors to find the information they need quickly.
The horizontal primary navigation bar is typically located below or above the header. On the other hand, vertical navigation is located either in the right or left sidebar.
Important note: Avoid making your header too tall. Doing so will take attention away from the rest of the content. Consider this: the site visitor will see the header on every page they visit. Their attention should be focused on the content of the page, not the header. Don’t make the header too big.
3. Body/Primary Content
The third structural section is the body/primary content area and it contains most of the unique content of a page. For example, in the body of a page you will see feature articles, photo galleries, forms, and calls to action. All the elements used to communicate your message, text, images, video and audio, can be found here.
A sidebar is a column that can appear to the left or right of the main content. Sidebars display differently depending on whether a visitor is using a desktop computer or a mobile device, usually dropping below the main content on small screens. As a result, a sidebar should never contain vital content.
Sidebars have many purposes. The space is often used for information that doesn’t naturally fit on the page or might get lost. In addition, blog pages frequently have sidebars. This space is ideal for search forms and secondary navigation menus such as recent posts, categories and tags. Blog sidebars can be used to highlight RSS or newsletter subscription forms.
The final structural part of a website, the footer, is found at the bottom of the page. The footer often contains contact info, copyright notices and a navigation menu. Footers can provide quick access to content without needing to scroll back to the top of the page.
The Five Main Structural Parts of a Website
Before you begin building your website, it’s a good idea have an understanding of basic site structure. This will allow you to clearly articulate your thoughts and goals. Although not all web pages share the same layout or features, most incorporate some or all of these basic components.