What is a Website Header?
A website header sits at the top of each page and serves a few very important purposes. This does more than provide a place for your logo; it is part of a consistent user experience that all good websites share. The design of a header may differ from site to site, but the core features that determine how a site is navigated and experienced remains the same.
This section is usually consistent across all of the pages on the website, however, some designs give the home page a slightly different header appearance in order to draw attention to featured areas of the site.
Overall, a good header makes your website easier to navigate, establishes your brand, and creates a consistent browsing experience throughout your website.
Header vs. Head
It is important not to confuse a page header with a page head. The terms are nearly identical, but one describes a section of the page that people see and interact with while the other describes an area of the page’s HTML (or background code) that tells third-party services what the page is about.
The page head is set in the page code with <head></head> tags. Everything between these tags determines how third party services like Google’s search engine, Twitter, Facebook, and your browser see the page.
Luckily for Muse users, this information doesn’t need to be hand coded. Muse automatically generates the code in the head. Additionally, there are a lot of great tools used to generate information in the head area of the page’s HTML code that don’t require a lot of knowledge in HTML.
Common elements found in the <head></head> tags include (but are not limited to):
-
Title: This refers to the title of the HTML document. Each page has its own unique title.
-
Style: This is where style options that affect the entire page are set. For example, if you want text to be a certain color, this is where you would set that.
-
Meta: Meta information, such as a webpage’s title (note: different from the one set in the title tag), author, and featured image will help social media networks display any links to that page in the best way possible. Copyright information, keywords, and more are also stored in meta tags. This information is also used to help search engines to better catalog each page.
-
Link: The link tag is used to designate any external stylesheets you want to have loaded in the page.
-
Script: Client-side JavaScripts are defined here.
Common Features of a Header
Moving back to a header as your visitors experience it, there are a number of common features that just about every website has. These features make it easy for someone to navigate and identify your website.
Headers can also be fixed or floating. Fixed headers stay in place at the very top of the page; they are stuck in position and do not follow your browser’s viewport as you scroll down.
A floating header follows you as you scroll. Depending on the design, this header may change during the scroll becoming more compact. This allows someone to quickly navigate to another area of the site after reading to the bottom of the page without having to scroll back up first.
You might be accustomed to headers without even knowing it. If you go to CNN.com, for example, you will see the news organizations sections defined in the header right next to the logo. So when you navigate to CNN’s home page, you can jump to the Money section right away from the header.
Consistent header elements make the web a more user-friendly place. Websites can vary in design in virtually infinite ways, but by maintaining a core set of features, your site will be much easier to navigate.
Expected header features include:
- Logo / Identity
- Navigation (Main Menu)
- Page Title
Other common header features include:
- Search
- Shopping Cart (Ecommerce Site)
- Login / Logout
- User Profile Link
- Notifications (if applicable)
 |
Logo / Identity |
This area of the header is where you set the tone for your site’s branding. A logo makes it easy for someone to identify your website at a glance, especially if they have multiple tabs open across several sites. For many users, it serves as peace of mind that they have arrived where they intended.
If you’re on Apple.com, for example, you expect to see the Apple logo in the upper-left corner of each page. It’s always there, consistently.
Logos can easily be replaced by text, as long as they identify the website. Typically, the logo/identity also functions as a home button, which will take visitors back to the home page with one click. This is another step you can take to maintain consistency with other websites, as most reputable ones have this feature.
 |
Navigation |
Your main menu is the primary user interface for your website. This is where you put your primary page links. If your website deals with the news, this is where you would put the main categories of news that you cover so users can quickly get to the stories they care most about.
Menus can be simple or complex, with single links or dropdowns that expand across multiple levels. It’s entirely up to the creator.
 |
Page Title |
The page title typically occupies a space below the logo and navigation area of the header. It may even take on a slightly different design from the rest of the header, more appropriately matching that of the rest of the page’s body.
If you’re in the About page of a website, you might expect the word "About" to be printed in big bold letters at the top of the page. This is technically part of the header.
 |
Search |
Giving your visitors the ability to search your website for specific content is a great idea and your search bar shouldn’t be difficult to find. Some websites place this in an ever-present sidebar, while others throw it in the upper-right corner next to the main menu.
 |
Shopping Cart |
Just about every ecommerce site has a shopping cart access point in the same place: the most upper-right corner of each page in the store. When someone is done browsing products and is ready to buy, having a consistent spot to access the shopping cart to check out is key.
 |
Login / Logout & User Profile Link |
Websites where visitors can become members often have login/logout features somewhere on the header bar.
It’s common practice for the login button to stand alone, and to be replaced by the user’s profile image with a dropdown access to the logout shortcut. This image dropdown also gives the user access to their profile and settings. Google’s homepage is set up this way.
 |
Notifications |
Notifications, if your members receive them, need to be easily spotted and accessed. The header is likely the best place for this, as it is at such a primary focal point.
Summary
Your website header is a vital part of your visitor’s website experience. A functional, consistent header can make a world of difference in your site’s usability.
You can do a lot to make your header look and feel unique to your site and as long as the core common features are in place, your content and design will shine through.
