Web design · Development · SEO
Website Header
Website header explained: orientation at the top of a page
Editorially reviewed ·
Clear definition
A website header is the upper area of a page and often contains a logo or wordmark, main navigation, search, language selection, contact details, or account actions. It helps users identify the offer and provider quickly and reach important destinations. Depending on page type, the header may remain consistent across the site or be deliberately reduced on a focused landing page.
A good header prioritises rather than highlighting everything at once. Navigation and controls need clear labels, keyboard access, and reliable operation on small screens. A sticky header may shorten navigation paths but should not obscure too much visible content. For SEO, clear internal linking matters most; simply placing a keyword in the header does not guarantee rankings.
Website Header in practice
A website header combines brand and primary orientation but should not contain every possible piece of information. On small screens, navigation still needs a clear order and keyboard-operable states.
An interface element should have a recognisable purpose and behave consistently across the site. Focus, hover, error, loading, and small-screen states are part of the component. Implementation becomes more reliable when content, semantic element, and visual presentation are considered separately. Interaction then remains understandable without animation and when assistive technology is used.
Website Header: relevance to SEO, paid search, and GEO
Recognisable components reduce orientation time and make important actions easier to find. This helps visitors from both organic results and ads. Elements should not compete for attention: a clear visual hierarchy, descriptive labels, and restrained effects support the path to conversion better than constant movement or several equally prominent calls to action.
For search and answer systems, coverage of Website Header should distinguish its definition, scope, and evaluation criteria. The editorial reference is “The header element” by WHATWG, making central claims traceable for readers and machine-based systems.
Practical code example
A lean semantic website header
Logo, skip link, and primary navigation are clearly identified. The current page is announced in navigation.
<a class="skip-link" href="#main-content">Zum Inhalt</a>
<header class="site-header">
<a href="/" aria-label="Startseite">scinet</a>
<nav aria-label="Hauptnavigation">
<a href="/leistungen/">Leistungen</a>
<a href="/glossar/" aria-current="page">Glossar</a>
<a href="/kontakt/">Kontakt</a>
</nav>
</header>Sources and further reading
- Standard The header element WHATWG · Checked
