HTML <header> Element
The HTML <header> element represents introductory content for a page or section. It commonly contains headings, introductory text, logos, navigation, search controls, or other content that helps identify and introduce the surrounding content.
Syntax
<header>
<h1>Page Heading</h1>
<p>Introductory information about the page.</p>
</header>The <header> element requires both an opening and closing tag. The content placed inside it should introduce or provide supporting information for the page or section it belongs to.
Attributes
The <header> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses a <header> to introduce the page with a heading, short description, and navigation links before the main content begins.
Usage Notes
A <header> can be used for the introductory content of an entire page, but it is not limited to the top of the document. Elements such as <article> and <section> can also contain their own headers.
A page can therefore contain more than one <header> element when different sections of the page require their own introductory content.
A <header> commonly contains a heading, but a heading is not required. It may also contain a logo, introductory text, navigation, search controls, or other information associated with the surrounding content.
The <header> element describes the purpose of its content rather than its visual position. Do not use it simply because content appears at the top of a page or section.
The <header> element is different from the <head> element. The <head> contains document metadata that is generally not displayed as page content, while <header> contains introductory content within the document body.
Accessibility
Using a <header> can help communicate the organization of a page when it contains introductory content associated with the document or a section.
Use meaningful heading elements within a header when headings are appropriate, and maintain a logical heading hierarchy throughout the page. Navigation placed inside a header should use the <nav> element when it represents a major group of navigation links.
Do not rely only on the visual position or styling of header content to communicate its purpose. Semantic elements and descriptive headings help users of assistive technologies understand the page structure.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <header> Element .
Related Elements
<head> - Contains metadata and resources that provide information about the HTML document.
<footer> - Represents footer information for a page or section.
<nav> - Represents a section containing major navigation links.
<section> - Represents a thematic section of content that commonly includes a heading.
<article> - Represents self-contained content that can include its own header and footer.