A website header is the band across the top of each page that stays the same as visitors move around the site. It usually shows your logo, the main menu and one important action, such as a "Book now" button or phone number. It is how people recognise they are still on your site and how they get anywhere else.
Header, head and heading: three different things
The word gets used three ways, which causes confusion. The visible site header is built with the HTML <header> element. The <head> element is something else entirely: invisible information for browsers and search engines, such as the title tag and meta description. Headings are the h1 to h6 titles inside your content. In email and HTTP there are also "headers", which are behind-the-scenes metadata and unrelated to page design.
Using the proper <header> element (with a <nav> inside for the menu) helps screen readers announce the region and let users skip past it to the main content.
What a typical header contains
- Logo, linking back to the homepage.
- The primary navigation bar, collapsed into a hamburger menu on phones.
- One call to action, styled as a button.
- Optional: phone number, search, account or cart icon for shops, or a language switcher.
Some sites add a thin bar above it for announcements, like holiday hours or free delivery thresholds.
Example: a roofing contractor
A roofer's header holds the logo on the left, five menu items in the middle and a "Free quote" button on the right, with the phone number above it on desktop. On phones, the menu becomes an icon, but the phone number stays as a tap-to-call icon beside it, because calling is what most mobile visitors want. The header is sticky: it shrinks slightly and stays visible while scrolling, so the quote button is always one tap away.
When to put effort into it
Every page shares the header, so a small improvement there improves the whole site at once. It matters most if your menu has grown past six or seven items, or if your main action is hidden in a menu.
Header mistakes
- Too many menu items. Group pages under clear labels; put the rest in the footer.
- A tall sticky header on phones. If it covers a quarter of a small screen while scrolling, it gets in the way. Keep it slim.
- Logo not linked home. Visitors expect clicking it to return to the homepage.
- Low contrast over a hero image. A transparent header over a busy photo can make the menu unreadable.
Related terms
- Navigation bar: the menu that usually lives inside the header.
- Footer: the matching block at the bottom of every page.
- Hero section: the large block that sits just below the header.
- HTML: provides the header, nav and head elements.