Definition:
A header is an area of a web page that provides identifying information and orientation, such as the site’s name, its logo, or access to its main sections. The site-wide header usually appears at the top and is repeated across several pages to maintain consistent navigation.
It is not synonymous with a menu or navigation bar: it can contain those elements alongside a search field, account options, or other controls. Its composition depends on the site’s purpose; there is no compulsory set of components, and not every page needs a separate visual header.
Table of contents
The header in HTML
In HTML, the <header> element represents introductory content or navigational aids for the page or a section. It does not by itself determine its position, size, or appearance: that presentation is controlled through CSS styles.
The header element reference distinguishes a site-wide header from the header of an article or section. A single page can therefore contain several <header> elements with different functions; not all of them represent the site’s main header.
The following is a minimal markup example:
<header>
<a href="/">Site name</a>
</header>
This element should not be confused with <head>, which contains metadata and references to document resources. Nor is it equivalent to an <h1> heading or the <nav> element, which identifies a navigation block. A header can contain headings and navigation, but each element has its own semantic function.
A header can remain visible while scrolling through the use of CSS. This feature, known as a fixed or sticky header depending on the technique used, is not inherent to <header> and should be checked to ensure it does not cover content or controls, particularly on small screens.
Header elements
The selection depends on user needs and the type of site. These nine components are common options, not a list that should be included in full in every header:
Logo
It identifies the brand and usually links to the homepage. It is often placed on the left, although that position is not compulsory. When it acts as a link, its text or image alternative should make the destination or site understandable.
Search bar
It makes it easier to find content or products without navigating menus, particularly on sites with extensive catalogs or information. It is not necessary on every website. The field and its button should have understandable labels and be usable with a keyboard; adding a magnifying glass icon does not in itself guarantee accessibility.
Language selection
It allows users to switch between available language versions. Language names identify the option more accurately than a flag alone: a country can have several languages, and one language can be used in different countries. Where an equivalent page exists, the selector should lead to that version rather than only to the homepage.
Contact
It can display a phone number, email address, location, or link to the contact page when relevant to the user’s needs. This information can also be placed in the footer; there is no need to repeat every detail in the header if doing so makes navigation harder.
Website links
The menu brings together access to the main sections. Its organization should reflect the site’s structure and use descriptive labels. On mobile devices, it can be grouped into a collapsible menu with an identifiable control that allows users to open it, close it, and move through its options with a keyboard.
Social media
Links to profiles on platforms such as Instagram, Facebook, LinkedIn, or X can provide access to the business’s other channels. They do not always need a prominent position in the header: they should be weighed against the website’s main actions and lead to active, recognizable profiles.
Banner
A banner can present a promotion, an announcement, or advertising. It is not a compulsory header component. Its size and loading behavior should not hide navigation or unexpectedly move controls; advertising content should be distinguishable from the rest.
Registration and login
They allow users to access or create an account when the service provides features for registered users. After login, these controls can be replaced by links to the profile or private area. Labels should distinguish different actions, such as registering, logging in, and logging out.
Mobile app
If an Android or iOS application exists, the header can link to its listing in the corresponding app store. The destination should match the stated application and operating system. Access to the download should not prevent users from continuing to use the web version.