How do you structure a webpage?

17 Apr How do you structure a webpage?

Each website is unique, and they are created to meet a need or to solve a problem for a given audience.

While having good content, graphics, and appealing design are importing to have, there are structural elements they must have.

There are standard structural elements that visitors look for to be able to navigate the site and complete tasks intuitively.

When building a website, ask yourself:

What are the structural elements my webpages must have?

1. Header

The header is the first element a visitor will see when they come to your site. It’s usually a bar that takes up the width of the site and it contains the site’s identity. That bar never changes and stays in the same place throughout the site.

The header must have:

• a logo that link to the homepage;
• site name and tag line or slogan;
• main navigation menu; and
• a search box that is always visible and in the same place.

2. Navigation bar

This section is found in the website’s header, but it needs to be treated as an element of its own because this is how visitors will be able to navigate your site.

When creating the menu:

• use labels (e.g., Our Service) that convey the information that the user will find when they navigate to that section of the site; and
• test the links to ensure that they are functional and that they send the visitor to the right location.  

The navigation menu must also:

• be easy to locate;
• be consistent (placement and functions are the same across the website); and
• the site map and navigation are intuitive.

3. Main content

This section contains the more robust and unique content that is found on the website.

This is where you add text, images and graphics, and videos.

When creating regular webpages or landing pages ensure that:

• the page title is readable and is in an <h1> tag for accessibility;
• the breadcrumb navigation is visible above or below the page title;
• the navigation to related content is placed at the bottom of the page where the reader can navigate to other pages;
• the publication date is placed at the top of the page; and
• the last updated date is displayed at the bottom of the content area.

4. Footer

The footer is the last section of the site. Like the header, the information it contains never changes and is always in the same place on the website.

The footer is used to provide easy and quick access to popular content.

The information that is found in the footer varies from websites, but they are commonly used for:

1. legal information
   • copyright
   • privacy policylegal information
2. popular information
   • contact us link or form
   • newsletter subscriptionpopular information
   • social media buttons
   • careers
3. repeated navigation menu and search box