A header is the visible area at the top of a web page. It is an integral part of the website structure and provides the user with basic, essential information. As a rule, it contains important and frequently used navigation points and elements such as “Login” or “Help” in addition to the site’s logo. A header is designed the same for all pages across domains. It is located above the actual main menu or includes it.
But what is the header of a website for? An important function of this website element is to help visitors navigate, find their way around and interact within the site. By the way, the header is the counterpart of the footer, which is located at the very end of the web page.
Example:
This is what the header of the Apple website looks like: In addition to the logo on the left, you’ll find important navigation items here, as well as the option to access the full main menu (far right via the honeycomb). In web shops, the shopping cart is usually part of this as well. This makes sense, because the header remains identical on all subpages. This way, the user can access his saved products at any time, no matter in which category he is browsing products. The same applies to the search field, which is also accessible on all subpages via the header.
By the way, a header is not only used to refer to the header area of a website. Emails also have a so-called header. This email header contains important information about the message – for example, the sender, recipient and creation date.
HTML elements: What is the difference between <header> and <head>?
Attention: people often confuse the HTML header element <header>, which is used to integrate the header on a web page, with the element <head>. However, they are different elements with different functions!
HTML element <header>: Describes the visible header area of an HTML document. It contains a group of introduction and navigation aids, as well as header elements such as logo, search box, etc. … The content of the HTML5 header element is visible for you, e.g. when you call a web page.
HTML element <head>: Meta tags are used to store meta data for the corresponding web page. These are only visible when you look into the source code of the HTML document. So you don’t see them at first sight when you open a page.
Design of the header
The header is the first thing you see when you open a website. It is its business card, so to speak. To make a good impression, you should pay a lot of attention to the design and function of the header. On the one hand, you should provide the user with basic information, because here he has it immediately in view when calling up the above-the-fold area of the website. On the other hand, you should not overdo it with the amount of information. A clear and concise website header is more appealing to users than a completely cluttered one. For further navigation points there is the main menu. The header should not distract from the main menu!
When designing the header, you should follow common usability standards. The user should be able to find the elements he is looking for quickly. In addition, they should also be in the place where he expects them. Therefore, some guidelines have evolved in the design to make the use and navigation of the website as easy and intuitive as possible.
Logo: The logo is located in the upper left corner. It is visible on every page of your domain. This signals to the visitor that he is still on your site. A click on the logo should lead back to the home page. Here could also be the name and slogan of your website.
Search field: The search box should be aligned on the top right or centrally.
Useful links that help the user navigate are also:
Paid search, also known as SEA, enables companies to advertise their products and services to targeted potential customers. By continuously optimizing campaigns, companies can improve the performance of their ads and use their advertising budgets more effectively to achieve maximum results. Learn more about this topic here. ... Continue reading
Targeting is a crucial strategy in online marketing that helps companies to direct their advertising messages to the right target group. Precise targeting can make advertising campaigns more efficient and minimise wastage. Read more about targeting here. ... Continue reading
CAPTCHA beschreibt ein Spamschutzverfahren, dessen Ziel es ist, automatisch generierte Eingaben von menschlichen zu unterscheiden und entsprechend herauszufiltern. CAPTCHA ist ein Akronym und steht für „Completely Automated Public Turing test to tell Computers and Humans Apart”. Zu den bekanntesten Varianten gehört das sogenannte reCAPTCHA von dem US-Unternehmen Google, welches im Web weit verbreitet ist. ... Continue reading
You are currently viewing a placeholder content from HubSpot. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.