Strong foundations lead to exceptional user experiences. In website design and development, that foundation is your page structure. A well-defined page structure dictates how easily users navigate and engage with your content.

What is Page Structure?

Page structure is the layout and organization of content elements on your webpage. The image below depicts a simple page layout.

Representation of a simple page structure with a header, navigation menu, content and footer, all in sequential order.

Page structure is provided by landmarks that contain elements like navigation systems, paragraphs, headings, and lists.

Assistive technology relies on landmarks to help users understand the layout of a document and navigate to specific sections. These landmarks act like signposts, making it easier for people with disabilities to identify the purpose of different document parts and quickly find the necessary information.

Proper page structure can significantly enhance your website's accessibility by making the content programmatically determinable by screen readers. It also improves scan-ability, readability, SEO, and user engagement.

How Do I Ensure Proper Page Structure?

For the purposes of this post, I am going to focus on 4 key landmarks needed for proper page structure. Those landmarks are:

header
navigation bar
main content
footer

Header

The header element, not to be confused with head or heading elements, is the first key landmark. The header has a built-in ARIA role of banner. The header element is where users typically will find the organization's logo and main navigation system. It is very similar to the footer element but generally the first landmark for a page and should provide general consistency across the website's pages.

Head

The head element, which is placed outside the tag, contains metadata about the document, such as the title, required scripts, and style sheets. The head element is not the same as the header element and is not a key landmark.

The page title is the only information in the head tag that can be seen on the browser tab or programmatically determined by a screen reader. It helps website visitors determine the page's purpose and what content to expect.

Simple Page Structure

Navigation Bar

Use the HTML5

landmark to identify your website's navigation. Website navigation acts like a roadmap, using buttons, menus, and links to steer users to different parts of the website.

A well-structured navigation system should prioritize a user's experience by making it easy and intuitive to find what they want. Here are some key characteristics:

Clear and Simple: Keep the navigation menu concise and clear, with descriptive labels .
Logical Organization: The navigation should follow a logical flow that users can understand. Group related content together.
Consistency: Maintain a consistent layout and navigation design throughout your website. Users should always know where to find the navigation menu and how to use it, regardless of the page they're on.
Accessibility: Use proper coding techniques and consider features like keyboard navigation for screen reader users, focus size, location , and color , and the use of skip links .

Main Content

According to the World Wide Web Consortium, W3C, the main content landmark of your webpage can include the following structural elements: articles, sections, paragraphs, lists, quotes, figures, images, illustrations, and tables. I’m including one more element, the essential .

This is the main content area of the page.

I've chosen those two elements because testing for accessibility was a core responsibility in my previous role in higher education. Among the most frequent accessibility roadblocks I found were issues with headings, lists (and alt text for images, but that's a different blog post ).

Headings

Headings help people find the information they need. Readers can quickly understand:

what they are looking at,
what is most important,
whether or not they want to read the stories.

A good heading structure reduces cognitive load and provides clear way-finding cues for everyone.

Each webpage should have a single main heading, using the

tag, that captures the overall topic or purpose of the page. Subsequent headings, from

to

, should follow a clear hierarchy, breaking down the content into smaller and more specific sections.

Proper heading hierarchy. Source: WebAIM

Lists

Now, let’s take a look at . The most prevalent issue I found regarding using on a website is that the list wasn’t appropriately structured; therefore, it wasn’t an actual list. Putting a bullet character in front of each sentence in a paragraph does not make it a list.

A list should convey hierarchical content. There are three types of lists: ordered lists, unordered lists, and description lists.

An ordered list is one that is in sequential order. In this list, the order of operation determines the outcome. Recipes are the best example of ordered lists:

Mix
Bake
Eat

In an unordered list, the order does not affect the outcome. A shopping list is a great example of an unordered list:

Bananas
Flour
Milk

Description lists are for key-value pairs, such as terms and definitions. For example:

**Captions**: Text-based alternatives of the audio and/or video content.
**WCAG**: Web Content Accessibility Guidelines

Note that the terms (

) are typically bold, and the descriptions (

) are of normal weight and indented.

Footer

A webpage footer is where users typically look for specific items like a copyright notice, a link to a privacy policy, an accessibility policy, a sitemap, contact information, social media icons, and an email sign-up form. The footer acts as a visual cue to indicate the end of a webpage. Because