How to plan a website structure

How to plan a website structure

UX Research and SEO tools in website structure development. A detailed overview of the website structure designing tools can be found in our new article.

What Is Website Structure?

The website structure is the actual display of the navigation plan on your site. Each element of your website structure implies a real page. By forming the structure of your website you develop the navigation and lay the foundation on which the design of your future site will be built. In a broad sense, the website structure is a treasure map in which the treasure is a product that you want to sell to a potential Customer. Optimizing a simple user route to make a purchase from your website is a priority for you and your business.

Where Do I Start?

Planning the website structure is a very time-consuming process. For the most intuitive display of the structure, the ‘Visual Sitemap’ tool is used. A Visual Sitemap is a hierarchical diagram reflecting the actual structure of your website. The main reason of this tool’s popularity is the complete comprehension of the structure that it gives to the UX designer. At the beginning of development the site map diagram allows you to look ‘down upon’ your project, to estimate its scale and to work out errors.

At the moment, the Visual Sitemap is the most convenient way to develop a website structure. It should be remembered that the benefits of the logical site structure affect not only the UX, but also the identification of the site by search engine algorithms, which directly affects the ranking of the site in a search engine.

Unfortunately, high ranking in a search engine is not a panacea for your business, and if you want to create a successful Internet project, you should start with the most fundamental questions. Your business is not just a ‘relevant query’ in a search engine, but first and foremost a product that a potential Customer is looking for. You should start by defining the fundamental purpose of your business. This knowledge will further help you to define the goals in planning the development of your website.

Competitor Analysis

Competitor analysis is an important step towards creating a good structure of your website. As in any competitive business, you should pay attention to the way your competitors do business. Such an approach can save you from unnecessary mistakes. In practice, there is often a situation when an entrepreneur neglects these simple but important rules, creating the website structure solely by intuition. Such actions often lead to wasted time and lack of results. This provokes unnecessary costs, audit and repeated development of the entire site, focusing primarily on the correct structure.

Analysis of your competitors’ websites structure will help to fix and prevent errors that they had already made at the start. In order to create a detailed and flawless structure, it is necessary to analyze several competitors at once. Prepare a detailed table that compares your competitor’s websites. This will help you see and correct the errors of some sites using the structure of others. As a result, you will receive a working database, which can be further contextually worked out to create the optimal structure of your site.

Defining Your Target Audience

The correct and timely use of UX tools allows the designer to create a structural understanding of the target audience and identify its needs as precisely as possible. In practice, the Client’s perception of of his target audience needs is often fundamentally different from its real needs. It is the timely use of UX methodology tools that makes it possible to identify the true needs of the target audience, which often fundamentally changes the vector of the website development and eliminates the costs of developing any unnecessary functionality.

The process of correct target audience defining plays a decisive role in website structure creation. Understanding the ‘true’ needs of your website visitors allows you to create the most intuitive navigation system by using which the user can obtain the necessary information with ease.You can get more information about the UX Research in our ‘Planning the website development’ article.

Semantic Core and Clustering

Modern market dictates the rules of correct website structure formation for every Internet business. Therefore, there is always a need for the future search engine optimization. Competitor and target audience analysis is only a part of the preparatory work. The next step is the development of a semantic core and its clustering. The semantic core is a set of search queries based on key phrases that users use on the Internet when searching for a product or service similar to yours. The semantic cluster is a multi-level structure consisting of a group of search queries combined within a meaning.

For example, let us consider the content of this particular article in the format of a semantic cluster. In this case, the semantic cluster of the first order will be ‘How to plan a website structure’. Inside the cluster of the first order there are clusters of the second order: ‘What is a website structure?’ and so on. There are also clusters of the third order, but in most cases it is sufficient to single out only the business-specific clusters of the second order. For example, the cluster of the second order for an ‘iPhone’ query will be a transactional (low-frequency) query of ‘Buy iPhone XS Max’. After working out the semantic core and its clusters, you will be able to process and structure the requests of your target audience in order to develop a content plan and refine the structure of your site.

Content Development

What are the goals of the website? Who are our users? What information do they need? What does our analysis tell us?If you follow the recommendations described above, then you will probably get answers to most of these questions. The knowledge that you will receive through the competitor and target audience analysis should be used at one of the most important stages of website development, that is the ‘content development’. Unfortunately, content development is often postponed for later, giving priority to other ‘more important’ matters, such as ‘Design’ or ‘Writing code’. In fact, saving time and money on content development is a strategic mistake. When creating a new website, it is important to remember that the content is of the crucial role to the user.

There is absolutely no need for a good design if your site has nothing to offer to your target audience. If the site is useless to the customer, the code optimization and quick loading time will make no difference. When designing the website structure, the content that will be posted on it should be taken into account. Ultimately, you design the navigation in order to provide the user with the most convenient way to display the information necessary for him.If you do not want to create a beautiful but useless resource, start developing the content as early as possible.

Create a content plan based on the content matrix. To create a simple matrix, you need to build a table with intersections of customer types and their points of interest at different stages of product use. Use the clusters that you have discovered during the analysis of the semantic core for this purpose. Personalize user requests to identify their attitude towards the products. Determine the path that the user would walk from a ‘random visitor’ to a ‘regular customer’. Find out the user’s attitude to the work of your competitors at different stages of interaction with the brand. The received information will allow you to develop the most efficient content plan for each target group.

User Flows

Designing User Flows is one of the tasks that needs to be taken care of in advance. Nowadays it is difficult to imagine that the main page is the only entry point of your website. The User Flow design tool allows you to consider different website entry points, highlighting the obvious shortcomings that the user may encounter. It is important to implement a User Flow Diagram to evaluate the interaction experience. You should use the obtained data when optimizing the structure of your site. It is also important to make the equally convenient navigation for users that are visiting your site from different entry points. Based on the User Flow Diagram analysis, the content should be optimized and changes should be made to the site structure accordingly.In order to learn more about the purpose and experience of using User Flow Diagrams, read the article in our blog.

Forming a Relevant Website Structure

Once you have completed all the preparatory work, you can finally begin to build the structure of your website. The most popular form is the creation of a ‘Visual Sitemap’. A Visual Sitemap helps to define the hierarchy of the web pages clearly and accurately. Based on the data obtained, you can begin to develop a ‘Visual Sitemap’ diagram. As a rule, the hierarchy of a ‘Visual Sitemap’ is as follows: links from all pages of the site lead to the «Main Page», links of ‘Subsections’ lead to ‘Sections’, and links of the website pages lead to ‘Subsections’.

When forming the website structure, it is important to keep in mind that the page hierarchy is determined by the ‘weight’ (or ‘importance’) of the links. Statistically, link weights are a key parameter determining the site priority on the global Internet. The more there are links to a particular website, the more popular it is. The same principle works within a specific site. The more links leading to a particular page within the website, the more important it is compared to other pages. You should control the weight of links on your website, thereby determining their priority. Let us review the example of managing the weight of links.

The website dedicated to the sale of smartphones can have a huge amount of information about the new iPhone XS Max, but with proper distribution of link weights, the page where this iPhone can be bought will have a priority in search results. If the links weight is distributed incorrectly, the user’s query ‘Buy iPhone XS Max’ will not lead to the page where the smartphone can be bought. Another rule to consider when planning your website structure is to control the ‘depth of viewing’. Design your structure so that the depth of your site does not exceed three or four clicks. This ensures easy user navigation, providing a clear and understandable navigation from any entry point without problems. The relevant structure of the site collects traffic and provides visibility for the search engine.‍

Conclusion

Development of the website structure is a serious work. In this article, we reviewed basic UX designing tools and touched upon the principles of SEO optimization. When starting to develop the site structure, It is important to keep in mind that right now there is an opportunity to work out most of the scenarios of how users interact with your website. You should consider the interface errors, and save yourself from spending money on reworking your website. Learn more about the integration of UX methodology in product development and maintenance, and you will have the opportunity to control and monitor the success of your project at different stages of product development.

21 Ways for Creating a Website Structure That’s Optimized for SEO

Elise Dopson on May 30, 2021 (last modified on January 9, 2022) • 26 minute read

You can’t rank well in Google if its crawlers are unable to access your website.

Sure, 404 errors and internal links have a part to play in how Google spiders find their way around your site.

But we wanted to find out how big of an impact your site structure on SEO.

And, if so, how you can optimize your website to make it easier for Google (and your users!) to navigate. So in this guide, we cover:

What is Website Structure?

Website structure refers to how the different pages of a website are interlinked and presented.

How you structure your website is very important as it makes it easy for visitors to seamlessly navigate through your website and for website crawlers to move through your webpages in search of new content, which in turn helps to improve your search engine ranking.

What are the Different Types of Website Structures?

There are many different types of website structures, but the two most common are flat and deep site structures:

If you want to dive into website structure types a little deeper, then we can mention these four main types of website structure:

Hierarchical model: This is one of the most common types of site architecture. This model is similar to a tree that has a trunk. The homepage would be the trunk, and all the different categories and pages would be the branches. Databox is a great example of a website with a hierarchical website structure.

Sequential model: This model is more popular when it comes to creating individual web pages. The main idea is to lead the user through a process step by step. For example, the Databox help articles are all pages designed with sequence in mind.

Matrix model: This model is considered the oldest site structure on the internet. The idea is to give the users the option to choose where they want to go. The users are navigated via internal links or the search bar. Wikipedia is a good example of a matrix model. However, nowadays, pillar pages are a great “substitute” for this model.

Database model: Lastly, this is a dynamic approach to the website structure. In order to create a website structure like this, you have to consider the metadata of individual pages, adhere to strong information architecture, and taxonomic best practices.

Why is Website Structure Important for SEO?

Before we dive in with the techniques, let’s be clear on why the structure of your website needs to be SEO-friendly.

Donna Duncan of B-SeenOnTop explains: “The goal of structuring your website is to group your content topically so it is (a) easier for search engines to find and determine the relative importance of pages, and (b) easier for you to measure their performance over time.”

In layman’s terms: Google looks at how user-friendly your site is to determine where it ranks. If it’s not easy to use, you won’t be positioned high.

(Not to mention that Google’s spiders need a simple site structure to crawl your site, too.)

So, how can you create an SEO-friendly site structure? We’ll share the tips contributed by 50+ experts, including:

*Editor’s note: Keep an eye on your SEO with our Improve Your Google Search Position dashboard. You’ll be able to view your most important KPIs all in one place, and monitor how changes in your website structure impacts them:

21 Ways for Creating a Website Structure That’s Optimized for SEO

1. Plan your site structure first

“Websites are always evolving, and there is always new content being added,” Tara Reid of The Introvert Coach says.

“My best advice if you are building a new site or restructuring an old one is to make a plan for your site structure first before you start building. It will not only save you time later on in the creation process, but it will ensure nothing is missed, and everything is set up correctly.”

You can do this using a pen and paper, or online tools like GlooMaps:

2. Think about information hierarchy

“The most common website structure is that of an inverted pyramid: the homepage sits on top, and underneath a handful of top-level service pages, with additional pages to sit under that to provide more detail,” says Digital 22‘s Tiffany Kalus.

“For example: Home > Digital Marketing Services > SEO / PPC / Social Media etc.”

“Search engines use the hierarchy of a website to get an understanding of the importance of a page. A sensible hierarchy also helps users find their way around a website and makes breadcrumbs easier to implement, which is also beneficial for SEO.”

Ryan Guina of Little King Media explains: “Ideally, your site structure will look like a pyramid or an organizational chart, with your home page serving as the tip of the pyramid and gradually widening as your content structure becomes more specific.”

LetMeBank‘s Morgan Taylor summarizes: “If you want to improve your website structure for SEO, decide on the hierarchy of importance for each piece of your website – every page should be listed in its order of importance.”

“Within each of these main pages, subpages should be ordered in the same fashion. Your goal is to make your website a map with a clearly defined path leading your visitors to the main goal.”

3. Use heading hierarchy

You’ve got the hierarchy of your website planned.

But it’s not just your entire site you’ll need to think about. SH1FT ‘s Dorian Reeves advises to “optimize your H1, H2 [to include the] best possible keywords for your business using tools like Serpstat, SEMrush or Ahrefs.”

“You can also use tools like Yoast SEO on WordPress to make sure all your pages are SEO friendly,” Reeves adds.

(Maybe that’s why WordPress is voted one of the best CMS for creating an SEO-friendly site structure.)

Beekeeper‘s Jessica Ruane agrees: “It’s very important to pay close attention to the hierarchy of your tags. Be sure that you use H1 for the title, and then move on to H2 and H3. Some may tend to select the tag for the size of the text, but that’s a big mistake when it comes to SEO.”

4. Prioritize URLs in your navigation bar

“More often than not a website’s navigation fills up with unnecessary pages that don’t serve any purpose–the pages aren’t driving traffic, aren’t engaging visitors, and aren’t getting conversions,” Matthew Edgar explains.

“As you remove these pages from your website, almost always, the website becomes easier to use, and that increases conversions and engagement. It also helps the remaining pages on the website rank better in search results because Google’s bots are able to more easily crawl through the website.”

Precise‘s Nikki Corbett adds: “If your blog is a treasure trove of information, your fans shouldn’t have to dig to find it. Keep it in the top navigation, and you’re sure to get more traffic.”

That’s partly why over half of our experts recommend using a subfolder for your blog, rather than a subdomain:

Corbett continues: “People don’t have time to hunt around on your site. Lead them to the path you want them on, and make it easy, fun, and entertaining along the way.”

David LaVine of RocLogic Marketing agrees: “For your navigation menu, consider adding/removing links to focus on your most valuable pages (consider multiple navigation menus where it makes sense).”

That’s why Ricemedia‘s Isabelle Drury recommends to “link to key, revenue or inquiry driving pages from your navigation, and use internal links to point to-and-from deeper pages. For large sites, in particular, this ensures that the most important pages are being crawled more regularly.”

However, Alistair Dodds of Ever Increasing Circles has a word of warning: “Be really selective with your choice of categories in your run of site navigation.”

“Due to natural linking from all other pages on your site, these pages will be your most powerful. So once you’ve updated your keyword search, find which pages are bringing in traffic, which have the potential to if fully optimized and which can effectively be culled from your run of site navigation.”

McCall Robison also advises against removing “anything from your main navigation if you don’t have to.

“[Best Company] removed our “News” section from our main navigation to put it in the footer, and almost immediately we saw negative results. Our traffic hit a big blow and the only changing factor was our main navigation edit.”

“We wanted to be more selective and replace the “News” section with something more beneficial for our site, but because we are a developed site with quite a bit of traffic, messing with the main navigation completely upset our traffic.”

McCall continues: “Once we put the “News” section back into our main navigation, our traffic leveled back out. Google didn’t like to see us messing with the core structure of our site. So when you’re building an SEO-friendly website architecture, really think about what your main navigation should include and what it shouldn’t so you don’t have to hit a snag like we did later on.”

Ben Cook of JC Social Media concludes: “Having a great structure is all about prioritization – elevating the importance of key pages and content on your site.”

“Main menu items are given priority by the search engines so getting rid of options that are not ranking page or fundamental to the user journey is a simple and effective way to give more power to the pages you actually want to rank.”

5. Have a 3 click-maximum from the homepage

“One great tip to help optimize the SEO structure of a website is to use proper internal linking,” says Colin Mosier of JSL Marketing & Web Design. “Internal linking helps connect your website and helps users navigate around your website properly.”

“If you are linking your site, and it takes too many clicks from your homepage to get to a subpage, this can have a real negative impact on the user experience and SEO.”

That’s why Wolfate‘s Carlos Castro also advises to “ensure that the URLs are maximum 3 clicks away from the homepage”–something over 40% of our experts recommend, too:

inSegment‘s Alexander Kesler explains: “Creating a site structure with an extensive crawl depth of over 3 clicks from the homepage negatively impacts optimization efforts because it makes it more difficult for users and search engine crawlers to reach pages buried too deep in the website.”

Farasat Khan of IsItWP puts this into practice: “You have 1000 posts all in one category, and your website shows 10 pieces per page. And then there is pagination (Next >> Previous

7. Link to other, relevant pages on your site

“Don’t forget to create an internal linking strategy because your own website pages contain a significant amount of power to influence SEO rank between them,” Webbuzz‘s Ben Carew says.

“You want to map the flow of ‘page rank’ through your site, including the anchor text you are using to link to each page, which can be quite aggressively keyword-optimized without incurring a Google penalty. Part of this process will be linking between pages that are topically similar.”

Carew continues: “If you have a larger site you could also consider as part of this strategy to ‘wall off’ areas of your site by topic and only internally link between them.” Additionally, you can use this SEO dashboard to measure the effectiveness of your internal linking strategy.

Not only that, but Luke Budka of TopLine Comms recommends to “use descriptive internal links! It’s not enough to say ‘click here’ or ‘more info’ and then link those words to the destination page – rather make it crystal clear to Googlebot what the destination page is all about.”

Budka references a speech from Google Webmaster Trends Analyst John Mueller: “The context we [Google] pick up from internal linking is really important to us… with that kind of the anchor text, that text around the links that you’re giving to those blog posts within your content. That’s really important to us.”

8. Use the pillar and cluster methodology

When structuring your website, Mathew Peranick of 420interactive recommends to “make sure you identify your money pages or the pages that you want to rank for high-volume keywords. Then make sure you have content that supports the money page and links back to that page.”

“This helps show Google that you are putting emphasis on the money page, and that the rest of your content is pointing back to that page as a high authority page on your website.”

Colin Mosier of JSL Marketing & Web Design continues: “Internal linking will also help you to connect blog pages and subpages to your main content “pilar page”. This helps the search engines understand what is the most important part of your website.”

“Internal linking is a great way to optimize your website structure and improve your SEO,” Growth Hackers‘ Jonathan Aufray explains.

Aufray adds that you can take advantage of using this process: “Find pages and articles on your website discussing the same topic. Then, add internal links between them with relevant SEO. This will boost your SEO while helping search engines understand your site structure.”

Beaconstac‘s Sneh Choudhary summarizes: “The most overlooked piece of advice is interlinking. Make sure your high traffic blog posts are linked to your product pages and other relevant posts that help users and crawlers navigate faster.”

*Editor’s note: Do you know which pages on your site are driving the most organic traffic to your website? Add our Google Analytics Content Analysis dashboard to your Databox account and find out:

9. Add Schema markup

Anand Iyer says that “more than 50% of all online searches will be voice-based by 2020”– which is why Iyer’s “ONE tip would be to optimize the website for voice search by adding FAQ section and structured data.”

Fueled‘s Max Falb explains: “It is a really easy and effective way for Google to easily crawl and read the content on your page and will improve your SEO.”

We’ve put together a list of expert-recommended structured data tools to help you do this. But to start with, Insightland‘s Irena Zobniów advises using “schema.org online checker tools to make sure your website works properly.”

10. Assign parent categories

“When you publish content, you should ensure all but a few pages and posts have a consciously assigned parent,” says Donna Duncan of B-SeenOnTop.

“For example, if you are in the business of plumbing, it would make sense to create a “parent” plumbing services page that highlights the things you do for individuals and businesses, and points to child pages that provide more detail about each of your specialties.”

“Your “emergency repair”, “remodeling”, and “maintenance” pages should all be assigned the parent “plumbing services” page.”

Duncan continues: “If you do not assign parent pages to content, they will, by default, be assigned to the Home page. That can result in a very flat website structure, one with a single Home page and dozens, hundreds, or even thousands of pages underneath it.”

“Google won’t have any way of determining which of these pages are most important. Visitors will have difficulty finding what they’re looking for on your site, and you won’t be able to easily determine the performance of page groupings like services and blog posts,” Duncan adds.

11. Categorize products by search intent

“When creating an SEO friendly website structure, you must use logic to group products and buying styles together,” writes Marketing Labs‘ Matt Janaway.

“For example, if you sell personalized socks you ideally want to increase the exposure of your products by capturing as many related keywords as you can that surround how people may find your website.”

Janaway continues: “As well as SEO optimized product pages, think about using top-line categories such as ‘Shop by Recipient’ or ‘Shop by Occasion’ which then have targeted pages underneath such as ‘Socks for Mothers’ or ‘Birthday Socks’. These optimized pages can then begin to match ‘search intent’ of your potential customers.”

12. Stick with one category per blog post

“I’m a strong advocate for one category per blog post if your site or blog runs on WordPress,” writes Adzooma’s Luke Davis. “This reduces the possibility of duplicate content and helps you to categorize your content strategy – the clue’s in the name!”

“If you’re thin in some places and heavy in others, you can reconsider your plan and balance things out, opening up the door for outreach and repurposing.”

13. Remove one-item pages

Wayne Thompson says that Colewood‘s “one tip would be to avoid pages that only have one item on them. Whether that be a single product or a single sub-category, anything that adds an extra unnecessary click to the user journey will usually be bad for SEO.”

“This is usually because that unnecessary page in the journey will compete with the final destination you want users to get to. Removing this step makes site structures flow much better and gives search engines fewer competing pages,” Thompson adds.

14. Category-organized URL structure

“I’m a strong believer in having a site’s main pillar page(s) live on the root domain, and then build the supporting articles off of that URL,” writes Levi Olmstead.

“For example, the SaaS brand Hotjar does this perfectly. They build amazing pillar pages that live on their root domain (ex – https://hotjar.com/heatmaps) and then for supporting content, they continue the URL off that root domain (ex – https://hotjar.com/heatmaps/examples).”

Levi adds: “This helps both user experience and link equity flow through their site beautifully.”

Vistaprint‘s Giorgio Alan Franco explains what that might look like for an eCommerce website: “Your URL structure might look something like this: domain.com/product-category/product-sub-category/product.”

Plus, Bart van der Meer of Klik Proces advises: “Make sure all the pages for the big important keywords have at least 5 pages below the in the URL structure and at least 10 pages linking internally to this page to give it relevance and authority.”

“One great tip is to change the default permalink structure in WordPress from blog post/ date to just blog post,” Skill Scouter‘s Lewis Keegan says. “This will prevent adding in the year and month into the permalink structure which will eventually age the website over time and prevent article updates.”

You might have one question at the forefront of your mind: “Does URL structure affect SEO?” The answer is yes. Data from Backlinko found that shorter URLs rank better in organic search:

However, Topic‘s Ryo Chiba says: “Avoid changing any traffic-generating URLs unless absolutely necessary. You may be tempted to rename directories for the sake of a better “structure”, but it very frequently hurts more than it helps.”

(If you do decide to change your URL structure, use tools like Redirection to prevent 404 errors ruining your SEO and user experience.)

15. Create a sitemap

A sitemap is what the name suggests: A document that tells people (and Google) how to navigate around your website.

Morningscore‘s Zalan Taller explains: “Creating an XML sitemap will help search engines to understand the structure of your website when crawling it. It also helps you to determine which pages are the most important and valuable ones, so you can give those pages priority.”

Rajat Chauhan of TutorEye Inc also advises to “set a proper sitemap (.xml format) on your server and make a proper structure of it for the users to showcase on front-end of your website as well.”

(You can use tools like Website SEO Checker and XML Sitemaps to do this.)

Summarizing, Cary Haun of Page 1 Solutions says: “A working sitemap is critical to your website. It provides a snapshot for search engines of where everything currently lives on your site and how to get to it. The less confusing your internal architecture is, the more likely the pages of your site will be found, crawled, and indexed.”

PRO TIP: How to Monitor and Evaluate Your SEO Performance

If you want to understand how your visitors are behaving on your landing pages, there are several on-page events and metrics you can track from Google Analytics and Google Search Console that will help:

Now you can benefit from the experience of our SEO and website conversion experts, who have put together a plug-and-play Databox template showing the most important metrics for monitoring your landing page performance. It’s simple to implement and start using as a standalone dashboard or in marketing reports, and best of all, it’s free!

You can easily set it up in just a few clicks – no coding required.

To set up the dashboard, follow these 3 simple steps:

Step 1: Get the template

Step 2: Connect your Google Analytics and Google Search Console accounts with Databox.

Step 3: Watch your dashboard populate in seconds.

16. Delete old content

“One extremely overlooked way to optimize the structure of a website is to delete your old content that isn’t needed at all,” says Hosting Canada‘s Gary Stevens.

“If you’re an eCommerce store and have old products that aren’t being used, you need to delete them as Google crawlers will be scanning unnecessary products. The same is true for websites that rely on content more than anything else.”

Stevens continues: “Chances are that you have old content that may have been relevant years ago but now is completely unnecessary. Delete those pages, your site structure will be much improved.”

17. Group similar keywords on one page

“Extensive keyword research is key to an SEO friendly architecture,” says Jaywing‘s Ash Terry.

“This helps webmasters to understand how people search and what their intents are at each stage of the user journey. Your website architecture should reflect this eg. each silo targets different keyword groups you’ve identified within your research.”

You’re likely already using keyword research tools to find the search terms your target customers are using. But how do you organize those keywords when using them on your site?

“At the very beginning, you should brainstorm and highlight specific categories describing your products or services. Then write them down and identify how they connected to each other,” says DDI Development‘s Alexandra Zelenko.

“After filtering can you visualize them and create a website structure map – a basic skeleton of the key phrases that describe your product or service. After you have filtered all the irrelevant keywords, you need to build a hierarchy of your website by prioritizing the pages.”

Zelenko adds: “Also, don’t forget the rule – the higher page in your architecture is, the more competitive keywords can be used.”

Angela Ash of Flow SEO summarizes: “It can’t be stressed how important it is to identify the right keywords, and then to utilize them in the most SEO-friendly way.”

“For the main keyword, always be sure to include it in the first and last paragraphs, as well as somewhere else within the content. For supporting keywords, use them in the content, as well as in a sub-header. Google WILL notice, and you WILL be rewarded.”

(Once you’ve created that content, Candour‘s Mark Williams-Cook advises to “make sure your evergreen content isn’t on a chronological sorting system like a blog or news section, otherwise you’ll be doomed to lose good content deep within your site.”)

18. Check your competitor’s site structure

You don’t have to do every SEO activity from scratch. Chances are, you can latch onto the legwork your competitors have already done–especially when it comes to site structure.

PixlClick‘s Rai Yugen explains: “Most of the time your competitions have already done most of the work for you and all you have to do is steal them and make it your own. You can use a tool like Sitebulb to help you crawl and visualize the site structure better.”

*Editor’s note: Don’t let your competitors speed past you in the SERPs. If you have a Moz or AccuRanker account, you can view your competitors’ SEO metrics using our competitor analysis dashboards, such as this AccuRanker: Competitors Overview Dashboard.

19. Use canonical tags

When we asked Forward Linking for their best site structure tip, James Johnson said: “Make proper use of canonical tags wherever possible.”

(Jeffrey Moriarty of Moriarty’s Gem Art explains: “This then helps you reduce the chances of duplicate content and having search engines waste spider time on pages within your site that should not be indexed.”)

Johnson continues: “This is particularly important for eCommerce websites where hundreds of duplicate pages are created as a result of category filters; such as (examplestore.com/category/page-2/colour-blue/size-large) and so on.”

“Ensure that the canonical tag points to the most simplified version of the URL, which in this instance would be (examplestore.com/category). This reduces the risk of keyword cannibalization as it tells Google which version of the page you want them to index & rank in the search results.”

20. Optimize for people, not bots

It’s easy to get caught up with SEO best practices. You might find yourself falling down the rabbit hole of optimizing for Google–and forgetting all about the human visitors you’re trying to convert.

That’s why Stuart Cooke of Levity Digital says: “My tip would be to layout the structure of your website with the user in mind, not search engines.”

“This way you will create the best user experience i.e. getting to the right page in as few clicks as possible, providing relevant internal links and calls to action. When you do this not only will your website have a better user experience and lower bounce rate, it will also rank better as search engines want to rank sites that help users find answers to their queries.”

Engenius‘ Brooks Manley also recommends to “prioritize the user experience with testing and research. There are many SEO implications in regard to site structure, but none large enough to overlook what makes the most sense for your brand and audience.”

Plus, Alony Media‘s Nir Alony adds: “When you focus on value, and not SEO or trying to optimize for anything, you usually do better, if your users love your site and find the answers they need on it, Google will love it too.”

21. Keep it simple

So, how do you keep your website easy to navigate for human users?

Carly Campbell, who runs, Mommy on Purpose puts that into practice: “Looking back, I wish someone had told me to keep my structure as SIMPLE as possible (and still cover my key topics). Don’t go crazy with extra tags and categories. Make sure there is a straightforward and clear path for your readers to follow.”

“For example, they want pregnancy tips, they click on the pregnancy category. That takes them to a landing page where they can choose from 1st, 2nd, or 3rd-trimester information.”

“That’s as complicated as it needs to be. You don’t need 17 subcategories under pregnancy! If your site is well organized for people, it will probably also be well organized for Google,” Campbell adds.

Tung Dao of Avada Commerce agrees: “If you have a small site with a few hundred pages, you can get away with any kind of structure.”

“But when your site gets to a thousand pages or more, if you don’t have a clear, simple structure in the first place and place internal links according to it, things will be way more chaotic and it’s going to be bad for both SEO and user’s experience.” Use this web analytics dashboard to keep an eye on how well users interact your website overtime.

Final thoughts

Are you ready to rejig your site’s structure to make it more SEO-friendly?

Always prioritize how easy it is for real users to navigate around your site, and be wary of changing URLs, as Joseph Colarusso of ESM Digital summarizes: “Always consider your users [because] they matter more than anything else.

How do they navigate through their online journey as they seek information about your product/service/topic/etc? Your website should follow that journey.”

How to plan a website structure perfectly

Planning a website structure before you get into the nitty gritty of coding is an essential step for creating the ideal user experience. It also gives you the opportunity to optimize your overall website architecture, information architecture and the very content itself resulting in a far more SEO-friendly site.

14-day free trial

No credit card required

As the saying goes, “measure twice, cut once”

That’s what you’re doing by planning your sitemap structure in advance. Using visual sitemaps as a planning tool gives your team the ability to brainstorm ideas, test navigation and menus to hone the hierarchy, properly refine and implement your keyword research, iterate scenarios and redesign information layouts before all the pricey graphic design and coding takes place. And, FYI, it’s much easier to perfect your map in sitemap builder than recode finished pages.

Here’s how to plan website structure the right way

It’s more intuitive and less tricky than you might think, here’s how to plan a website structure effectively:

1. Set goals for an effective sitemap structure

So, what are you actually trying to accomplish with your site?

Knowing exactly where you want to go is what helps you plan how to get there.

A good place to start in crafting your sitemap structure is listing the goals for your website, both big and small. These should be measurable benchmarks which can include things like; increased readership, eCommerce conversions, newsletter signups, donations, purchases, content engagements, etc.

Doing this will help you determine which content to place up front in those marquee locations.

2. Know the audience

Who are your people?

Compile pertinent information about your target audience(s). Find out what other sites they spend time on, where they shop, search volume for your keywords and the more granular demographic stuff like average age, browsing locations, country, language, etc. Learning about the behavioral characteristics of your audience goes a long way in everything from helping with web design planning to perfecting your page content and even to developing blog posts as well as conducting the marketing activities which support the overarching website plan.

3. Analyze the competitive landscape

Do you have competition? (You do)

What are they doing?

Finding out what your competitors are doing can help shape what you do and don’t do. Take a gander at their sites and note what’s popular, what’s on their homepage, what content is getting the most engagement, how’s their site organized, what’s not working, what can be improved, etc.?

This isn’t about copying or plagiarizing, this is standard market research that all companies should be doing. Rest assured, your competitors have scoped you out too.

4. List your content for a solid website structure plan

Chances are dang near 100% that your website structure plan is going to include lots of content of many different varieties.

List all the types of content you’d expect to put on your website and group them by similar characteristics. Assign taxonomies, or classifications, which’ll allow you to further refine categories for your content.

5. Nail your information architecture

Modern content management system (CMS) platforms may make it easy peasy to build websites but rarely do they provide you with the best way to organize the content that will actually live on the site.

Information architecture (IA) is the part of your broader website architecture and site mapping efforts that focuses exclusively on the details of how content is organized and delivered to your user.

The sitemap is IA’s primary reference document and it communicates both the physical layout of your new site as well as the navigation to designers, developers, team leads and/or clients.

Because each website is as unique as the company behind it, the information you present may require its own content structure, which is another reason it’s so important to engage wholeheartedly in pre-planning.

When contemplating your website map structure, like everything else, you should have the user in mind first. Are you sensing a pattern here?

Depending on the types of content and the amount of it you’ll load your site with, you can choose from a variety of standard information architecture structures or create your own custom variations. The world is your oyster in that sense and the only rule is to make it user-centric.

Example website structure diagrams:

6. Plan your website structure for content

This may sound similar to locking in your information architecture but there’s a distinction here that matters.

To plan your website structure for content is to break down the information into groups relating to the topics, main categories and subcategories your site covers. This helps in establishing the hierarchy of information, going from generalized to more specific.

This is known as silo architecture, or index hierarchy information architecture if you want to impress someone, and its core advantage over other structures is that the resulting site is an incredibly instinctive one to navigate that’s primed for SEO success.

7. Develop internal linking strategy

Internal linking is what brings your sitemap to life in a sense. Aside from your main menu, these strategically placed links – and they must be strategic – are a key way in which your visitors will navigate your site.

It’s the roadmap you’d like them to travel and serves to make your site more user-friendly by putting qualitative content in their path with well positioned links.

Additionally, internal link building is crucial for enhancing link authority and spreading that link juice (link equity) around which can be a boon for your search rankings and search engine optimization in general. On top of that, it helps lower your bounce rate, increase page views and even boost conversion while doing away with orphaned pages.

8. Keep navigation depth shallow

Also known as click depth, this is about making sure your content doesn’t get buried in a sea of pages and lost in never-ending clicks.

Ultimately, the idea here is to ensure that users can find the info they need in as few clicks as possible. This also allows search engine bots to crawl your site more easily leading to you showing up in more search results.

When in this development phase, strive to go no further than 3 or 4 clicks deep.

A quick note about submitting sitemaps directly from Slickplan; we intentionally left that out because, spoiler alert, most websites continue to grow and evolve well after this initial planning phase. Given that, we recommend installing a CMS plugin for website planning that auto-generates search engine XML sitemaps each time web pages are added, updated or removed so your search engine sitemap will always be up to date and in line with your current structure.

How to plan a website structure with Slickplan

Designing and planning website structure is a time investment that can pay big dividends when done with intention and a concerted team effort.

Just like an architect creates a structural plan for a house, website architecture uses principles of organization, functionality and aesthetics to hone the user journey and deliver a product that effectively meets the needs of your visitors.

Between setting benchmarks for success, competitor analysis, understanding your own audience better and doing a deep dive into your content, shaping your website structure involves a lot of moving parts.

Long story short, good site structure sharpens the good stuff and does away with the bad, allowing web crawlers (and people!) to easily understand how to use and navigate your website.

Slickplan’s sitemap builder simplifies the process and gives you the tools to create intuitive sitemaps and structures that align with your mission, strategic goals and overall marketing plan.

Visual sitemap generator

Visually designing sitemaps is important in properly planning your website. Learn how a visual sitemap generator works.

Free sitemap creator

Check out our always free sitemap tool and get access to basic features. Upgrade to a free trial at any time to test out the entire suite of features.

How to Create a Website Structure That Enhances SEO and Boosts Your Rankings

The better and more logical your site structure, the greater UX, SEO, and other benefits you’ll see. Deciding how your website should be structured takes time and careful thought.

In this guide, you’ll learn what website structures are and why they’re important. We’ll dive into the four types of website structures and how you can choose the right one for your site.

Finally, we’ll show you just how to design and develop the right structure for your site.

What Is Website Structure?

Website structure refers to how information is laid out on your site, the way it is designed, and how the pages connect with one another.

Some of the top reasons why visitors leave a website are poor site structure. 73.1 percent of people said they leave a site with a non-responsive design and 34.6 percent said it was due to poor content structure.

Websites have a short window to make an impression otherwise visitors will go somewhere else.

Many elements go into a good website structure which includes taxonomies, internal links, breadcrumbs, navigation, and schema.

Why Is Your Website Structure Important?

There are three major reasons your website structure is important.

First, a logical and well-planned structure is ideal for User Experience (UX). 88 percent of online consumers say they are less likely to return to a site after a bad experience. Websites that are easy to navigate create a seamless experience for your audience without frustrations.

Second, and perhaps of the same importance as the first point, is Search Engine Optimization (SEO). More than 25 percent of SEO professionals believe structured data is an emerging SEO factor and 36.6 percent believe Google’s Core Web Vitals update is going to become one of the most important components to an SEO strategy in the future.

Making sure your website is well-laid-out, easy for search engines to crawl, and mapped properly will make it easier for your content to be indexed.

Lastly, an intentional structure helps prevent keyword cannibalization. This means content that covers similar topics will be distinguished and organized from one another, giving users and crawl bots a clear idea of the intention for each piece.

Top-Down Vs. Bottom-Up Website Structures

The four types of website structures fall into two categories: top-down or bottom-up.

Different structures satisfy different goals and there are pros and cons of each approach.

A challenge with top-down structures is everything needs to be planned out from the start. Once it is established, it’s impossible to change the overall flow and website setup.

On the flip side, this logical structure will make it easier for both users and search engine crawlers to navigate your pages.

As for the bottom-up website structure, its main strength is that it can be built over time and let you continue making adjustments. Even though these structures are better for a website owners, they might make the experience more difficult for users and search engines.

The 4 Types of Website Structure

Below is a breakdown of the four main types of website structures used today with use cases on when each one is more appropriate.

1. Hierarchical

A hierarchical structure, which is sometimes referred to as a tree structure, is the most popular website structure. It moves from larger, more general category pages into smaller, individual pages.

An example of this is with e-commerce websites that have high-level product categories (e.g., shirts) that flow into smaller categories (e.g., t-shirts, blouses, knits) that flow into individual product pages.

Hierarchical structures are great for websites with large amounts of data like e-commerce. First, you would establish your informational pages and other categories that would be important to your visitors. A good place to start is with the pages that receive the most traffic.

From there, you would determine how the rest of your pages fit amongst those categories. Always make sure you approach this in a way that makes sense for users and crawl bots since it will be very challenging to change this later.

2. Sequential

A sequential, or linear, website structure is one that follows a simple page-to-page path. These are more common for simple websites or when creating a campaign with multiple landing pages.

If you’re a startup or a small business, you probably only have a few essential pages you want to display so this approach would make sense. This would even make sense for large website checkout experiences like Gymshark or KKW Beauty have done:

The best use for this structure is when you want your content to have a chronological order. For example, an online course or sales funnel. A sequential website structure will ensure users go through the steps as you intend to make the process as straightforward as possible.

To get started with this structure, look for areas of your website where having a logical sequence would help improve the user experience. This could be through your checkout process, highlighting benefits of your offerings, or for specific content topics.

3. Database

A database structure is one of the most complex website structure types using a bottom-up approach.

This approach requires special attention to tagging and metadata in order to create a searchable database for users to access. Site search is becoming more and more popular and can be a valuable tool for increasing conversions.

About 30% of people who visit a website will use the site search at some point. Another previous study from eConsultancy found that when site search works well, those visitors convert almost twice as much.

An example of a database structure is Medium:

A big advantage from a database structure is that it can be personalized to meet your needs. It can also be built over time since it is bottom-up so you don’t need to worry about making it perfect right away. As your website grows, your previous database files will become part of their own dataset under the new, larger structure.

One challenge with a database structure is you will need someone on your team with extensive programming knowledge. This is an important part to make sure nothing gets lost in translation.

The first thing you should consider is the level of data your website has before using this structure. If there’s a fit, find an experienced website programmer who can help guide you in the right direction and start strategizing categories.

4. Matrix

A matrix structure is one of the oldest structure types on the internet. It’s complex and non-traditional that is best navigated using search and internal links.

Wikipedia is a prime example of a matrix structure. There are seemingly endless possibilities for the next steps a user can take and with more than 80 percent of their traffic coming from organic searches, it works.

Following a wiki-style approach is the most obvious use of a matrix structure. It lets you present a large amount of data and information in a word cloud-like format. You don’t need to worry as much about a parent-child relationships for pages or navigation. The next step in the sequence would depend on each user.

This structure should mainly be considered when a website has a narrow focus as broad topics might be overwhelming for users. For example, this would make sense as a training database for company systems or fan-based websites for popular TV shows.

To get started, list all the pages that might connect with each other and look for logical opportunities where you can link between them.

How to Pick Which Type of Website Structure Is Right for Your Website

The website structure you choose will largely depend on the type of website you’re building. While you can choose whatever structure you’d like for your website, it is best to choose one that aligns with your core ideas and how visitors expect to interact with your site.

For websites that have a lot of data and where clear categories exist, then a hierarchical or database structure might be your best bet.

If you want to deliver bite-sized chunks of data in chronological order, then the sequential structure is an easy choice.

As for the matrix structure, following a wiki-style approach is really the best solution. This makes the most sense for sites with a lot of content or links that can connect together.

7 Tips for Designing and Developing Your Website Structure

Before we get into the steps you should take to create a great website structure, we’re going to touch on some of the nuances of design and development.

This is important to consider from a user experience perspective.

1. Optimize Your Site for People, Not Bots

In recent years, there is less of a gap between website optimization best practices for people and bots than ever before. Some website owners are still more focused on optimizing for crawl bots instead of people though. While this is never a bad idea, keep in mind you are trying to keep people engaged in order to increase conversions.

Almost 40 percent of people will stop engaging with a website if the content or layout is too confusing.

2. Keep Links on Any Given Page to a Reasonable Number

It’s crucial to balance on-page time and link interactions. You want users to be engaged by the content of a current page, but you also want to encourage them to go deeper into your site.

The key to this balance is keeping links to a reasonable number and also make sure the link connects with the topic at hand.

So what is the ideal number? This topic has been debated endlessly in the SEO community. A safe number to aim for is three to five links per 1,000 words to get started. The important part is not overloading each page.

3. Utilize Heading Hierarchy

The structure of your website is important, but so is the structure of individual web pages.

When you utilize a heading hierarchy, you create a logical structure for your web pages that both humans and bots can understand.

A heading hierarchy helps you organize on-page content using different heading elements (e.g., H1, H2, H3, H4). These elements are fairly simple to implement and easy to organize while improving the readability of each page.

You can also test different header types to see what sort of impact they have on individual page engagement.

4. Keep Navigation Depth Shallow

No matter what kind of site you have, your users should be able to find what they need in as few clicks as possible. According to Google’s John Mueller, click depth carries more weight for SEO than the URL structure.

While there’s no hard-and-fast rule on the exact number of clicks, try to keep the navigation depth to four clicks or less.

5. Show Breadcrumbs

Speaking of navigation, you want to make it as easy for customers to navigate backwards as forward. The best way to do this is with breadcrumbs.

According to research from the Baymard Institute, breadcrumbs do a lot of the heavy lifting on mobile sites yet 36 percent of sites that use them fail to include the full category hierarchy on mobile product pages.

At the same time, 20 percent of desktop sites and a massive 65 percent of mobile sites don’t use breadcrumbs at all on their product pages. This is a pretty big gap that can confuse users since they don’t know where they are on the site or how to navigate from there.

Breadcrumbs make it a lot easier for users to navigate back to higher-level category pages or even your homepage in just a few clicks.

6. Keep up on Keyword Research

If there’s one thing equally important as the website structure, it’s content.

In order to produce content that resonates with your audience, you need to perform keyword research at each stage of the development process to ensure all pages are optimized.

According to Ahrefs, close to 95 percent of all keywords get 10 searches or less per month. It is very important to choose the right ones if you want to get traffic.

Where do you begin? Use a keyword tool like Ubersuggest to choose the right terms. It offers extensive keyword data, insights to improve traffic and backlinks opportunities.

7. Include Schema Markup

To take your website’s architecture to the next level, consider using structured data.

Structured data includes tags, JSON code, and rich data which was created for and understood by search engines. Using structured data has been recommended by Google since 2014. It can drastically improve website visibility with some sites reporting as much as 400 percent increase in rich result organic traffic.

If you’re looking for the most bang, then start with schema markup. This can be implemented quite easily compared to JSON, and there are plenty of schema markup guides to get you started.

How to Plan a Website Structure

What goes into the development and design of a website structure? Below is a step-by-step guide to planning your website’s structure.

Step #1 – Perform Market Research

There’s nothing wrong with innovating how you approach your website structure. However, it should be an intentional decision.

Pay attention to how similar websites in the market structure their sites before you choose your own. This can be a signal for what user expectations are and you don’t want your site to confuse them.

Before you begin planning, select the top five to 10 competitors in your market, go through their websites to see what structure they use, and identify the strengths and weaknesses of their setup.

Step #2 – Develop and Analyze Your Target Audience

Even more important than the competition is your target audience. Before making a decision, you should know who your audience is, what sites they visit, and what they expect from the user experience on your site.

Don’t rush this step of the planning process. This is the greatest opportunity to learn how your visitors navigate through competitor sites. Once you have identified the strengths and weaknesses, you can make improvements so your website delivers a much better experience.

Steph #3 – Choose Your Website Structure and Hierarchy

Now is the moment of truth. It’s time to use the information you received from your market and audience research to pick the right structure type for your website.

This would also be the right time to bring an experienced UX/UI designer into the mix if you’re still not sure which structure makes sense. They can provide valuable insights to your internal developers even if they aren’t a part of the entire project.

Step #4 – Choose a URL Structure

The best URL structure will closely mimic the website structure you chose. What does this mean?

Let’s say you chose a hierarchical structure for your website. Within it there are high-level category pages, low-level category pages, and product pages. A simple and effective URL structure would look like:

www.example.com/top-category/bottom-category/product-page

This URL structure offers a logical path for users to follow. It’s very similar to the breadcrumb navigation that many hierarchical websites use.

What about the URL structure for a matrix-style website structure? With so many internal links, it would be impossible to create a logical URL structure like the one shown above. In these cases, a workaround would be using a simple direct link to the page topic. Here’s an example of how Wikipedia does it:

Step #5 – Develop an Internal Linking Strategy

Think of internal links as a way to tell a cohesive story on a particular topic, with the added bonus of giving users another way to navigate your site.

As mentioned before, there should be a purpose behind each internal link you use and not overdo it. The goal is to provide value to users, not bombard them with more information.

Step #6 – Create a Sitemap File

If you want search engines to crawl your website quickly and efficiently, you need a sitemap.

A sitemap file is a map search engines can use to navigate your website. It tells crawl bots which pages are important and how they are connected to each other.

Fortunately, the process for creating and submitting your sitemap is quick—it usually takes less than 20 minutes.

Step #7 – Run User Testing

The job’s not done once the website is live. In fact, the journey is just beginning.

Running regular tests can help you uncover issues with your current setup. While this step won’t necessarily impact the website structure you chose, it can highlight key areas you should revisit.

This will help you answer questions like:

It’s not uncommon to run user testing several times as you implement changes to your website based on user feedback. Keep testing and keep optimizing.

Website Structure Frequently Asked Questions

What is a linear website structure?

A linear website structure displays content in sequential order from one page to the next. The best example of this is the checkout process on sites like KKW Beauty.

Which is the best type of website structure for SEO?

When it comes to SEO, the best website structure is hierarchical. This is a logical structure that is easy for search engine bots to crawl.

How many types of website structures are there?

There are four main website structures: hierarchical, sequential, database, and matrix.

Who is qualified to design a website’s structure?

A website developer is your best bet when it comes to designing and developing a website’s structure. They may work alongside other professionals, like UX/UI designers.

Conclusion: Website Structure

Website structure impacts your UX and SEO, which means it’s crucial for getting traffic and your overall online success. With a lot of planning and thoughtful organization, you can create a website structure that enhances SEO and boosts your rankings.

The best structure is the one that works for you and your audience’s needs. Whether you choose hierarchical, sequential, database, or matrix, make sure to keep user experience, SEO, and market research in mind.

Which of the above tips for designing and developing your website structure did you find most helpful?

See How My Agency Can Drive Massive Amounts of Traffic to Your Website

Share

Hey, I’m Neil Patel. I’m determined to make a business grow. My only question is, will it be yours?

About Neil Patel

He is the co-founder of NP Digital. The Wall Street Journal calls him a top influencer on the web, Forbes says he is one of the top 10 marketers, and Entrepreneur Magazine says he created one of the 100 most brilliant companies. Neil is a New York Times bestselling author and was recognized as a top 100 entrepreneur under the age of 30 by President Obama and a top 100 entrepreneur under the age of 35 by the United Nations.

Hey, I’m Neil Patel. I’m determined to make a business grow. My only question is, will it be yours?

Document and website structure

In addition to defining individual parts of your page (such as «a paragraph» or «an image»), HTML also boasts a number of block level elements used to define areas of your website (such as «the header», «the navigation menu», «the main content column»). This article looks into how to plan a basic website structure, and write the HTML to represent this structure.

Basic sections of a document

Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured:

Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one webpage to another.

Links to the site’s main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than an individual component, but that’s not a requirement; in fact, some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.

A big area in the center that contains most of the unique content of a given webpage, for example, the video you want to watch, or the main story you’re reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page!

Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author’s bio, or links to related articles) but there are also cases where you’ll find some recurring elements like a secondary navigation system.

A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It’s a place to put common information (like the header) but usually, that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.

A «typical website» could be structured something like this:

HTML for structuring content

The simple example shown above isn’t pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.

This is because visuals don’t tell the whole story. We use color and font size to draw sighted users’ attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like «pink» and «large font» very useful?

Note: Roughly 8% of men and 0.5% of women are colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognize those elements and help with tasks like «find the main navigation», or «find the main content.» As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

Active learning: exploring the code for our example

Our example seen above is represented by the following code (you can also find the example in our GitHub repository). We’d like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.

Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren’t asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We’ll wait for this until you start to study CSS layout as part of the CSS topic.

HTML layout elements in more detail

It’s good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you’ll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

Each of the aforementioned elements can be clicked on to read the corresponding article in the «HTML element reference» section, providing more detail about each one.

Non-semantic wrappers

Sometimes you’ll come across a situation where you can’t find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS or JavaScript. For cases like these, HTML provides the

is an inline non-semantic element, which you should only use if you can’t think of a better semantic text element to wrap your content, or don’t want to add any specific meaning. For example:

In this case, the editor’s note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.

Warning: Divs are so convenient to use that it’s easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you’ll have a hard time updating and maintaining your documents.

Line breaks and horizontal rules

: the line break element

creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

Without the
elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with
elements in the code, the markup renders like this:

: the thematic break element

elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

Would render like this:

Planning a simple website

Once you’ve planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called Information architecture. In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun!

Active learning: create your own sitemap

Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

Note: Save your work somewhere; you might need it later on.

Summary

At this point, you should have a better idea about how to structure a web page/site. In the last article of this module, we’ll learn how to debug HTML.