As one of the main visual elements of a website, a header is a valuable piece of digital real estate. There are many different functions a website header can have depending on the nature of your business. However, as a tool for branding and in some cases navigation, your website header sets the tone for each page that it appears on.
Website headers are easy to overlook when in fact they are extremely important. After all, it will be one of the first things visitors will see when accessing your website. New to headers in website design and want to learn more about them? Here is everything you need to know on what is a website header and why you should use it.
What is a Header?
A header is a visual image or typographic element that runs across the top of your homepage, and ideally every other page of your website. A header will make your website instantly recognisable, especially if it uses your brand logo and colours. Many headers are clickable too, taking users back to your homepage to act as a central navigational tool.
Headers can be focused on a CTA, brand, content, video or a product. For example, within a product focused website header, the website name or logo might be quite insignificant, with the main information about the product (such as ‘30% off today only!’) taking the main focus instead. As headers can be used to advertise any messages or promotions, they are extremely versatile.
Design wise, headers are usually displayed as a particular type, such as a sticky or fixed header. While you can adopt either strategy, it’s imperative to make sure it fits the style of your website and doesn’t prevent users from being able to read the rest of your website properly.
Why do I need a Header for my webpage?
You never get a second chance to make a first impression, which is why your website header is so important. A header helps identify a website and gives information about the brand. It’s also an opportunity to reinforce your company ethos or get across any particular important message.
Think of a website header almost like the front of a shop on the high street. When standing outside, you’d see the name of the company and store window that may display information about what’s inside. Your website header acts in the same manner only in a digital sense. It’s very much an introduction that sums up what it is you can offer.
Which information should a Header contain?
First and foremost, your header should contain the name of the company or the website that people have landed on. This can either be achieved by using your logo, or a combination of your logo and a strapline. If your logo is quite bulky, try experimenting with simple typography instead. Or, an icon that represents your brand rather than the entire logo.
A header should be clearly displayed and feature the brand colours of your business so that visitors know they are on the right website. Depending on the format of your header, it may be possible to include other key information about your business. For example a phone number or links to your social media pages.
Remember though that your header should still be simple and easy to read. There is also an opportunity to add additional information into your footer. Doing so can help prevent your header from looking too cluttered.
Are there best practice examples?
August is a digital marketing agency in Australia. In their header they use a hamburger menu. This is very innovative as it allows for much more information to be given when the user hovers over it. The result gives a very clever finish to the rest of the design, allowing the main photographic background to stand out more. Hamburger menus are especially popular in mobile design too.
Another great example is Amazon who use their header as a search function. As one of the most successful online retailers in the world, many eyes glance over Amazon’s website header every day. Amazon manages to cram in a lot of information into the header without overwhelming the audience. Plus, it gives the user everything they need in just one bar without having to look for it. It’s done in a way that makes you feel as if you are browsing the aisles of a supermarket, only in a digital sense.
What is the difference between header, <header> and <head>?
They might all sound the same, but there are some key differences between a header, <header> and <head> that you need to know about. Let’s take a closer look.
Header
A header is a term given to a main strip or icon that sits towards the top of your website. Its purpose is to introduce your branding and send out a message. Headers usually appear on every single page of your website, though they can vary in placement if required.
<header>
A <header> element is placed before introductory content or a set of navigational links. It can be used multiple times on a website, although is never found within a <footer> or an <address> element.
Anyone who owns a website or blog will be familiar with a <header> as this usually appears at the top of your HTML code. Also, if you are asked to paste in code (such as for Google Adsense) it specifies to paste it after the ‘<header>’ element.
After the <header> it is common to see a heading element such as H1 tags, which run on a scale of H1 to H6, with H1 being the main SEO title on a blog or page. The greater the number, the smaller the tag, making H6 the least insignificant tag to use on a page.
<head>
A <head> element is used for holding metadata which means data about data. This could include information such as <title>, <link>, <script> etc. A <head> element is not displayed on the page, but the information is used by the browser.
An interesting point to note is that in HTML 4.01 the <head> element was compulsory but in HTML5 it can be skipped. The browsers that support <head> include Google Chrome, Internet Explorer, Firefox, Opera and Safari making it widely accepted.
To Sum Up
A website header is one of the most instantly recognisable elements of your website. Therefore, care and attention should go into its design and placement, especially as it’s there to get across your branding and overall messaging. Whether you choose to use a simple icon or a more elaborate toolbar, your website header should offer purpose and function. Above all, it should greet visitors and set the tone for their overall user experience.
