The HTML
<header>
element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.This will open a window containing the HTML source code of the page. Inspect an HTML Element: Right-click on an element (or a blank area), and choose 'Inspect' or 'Inspect Element' to see what elements are made up of (you will see both the HTML and the CSS).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Content categories | Flow content, palpable content. |
---|---|
Permitted content | Flow content, but with no <header> or <footer> descendant. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts flow content. Note that a <header> element must not be a descendant of an <address> , <footer> or another <header> element. |
Permitted ARIA roles | group , presentation |
DOM interface | HTMLElement |
Usage notes
The
<header>
element is not sectioning content and therefore does not introduce a new section in the outline. That said, a <header>
element is intended to usually contain the surrounding section's heading (an h1
–h6
element), but this is not required.Historical Usage
Although the
<header>
element didn't make its way into specifications until HTML5, it actually existed at the very beginning of HTML. As seen in the very first website, it was originally used as the <head>
element. At some point, it was decided to use a different name. This allowed <header>
to be free to fill a different role later on.Attributes
This element only includes the global attributes.
Examples
Page Header
Article Header
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<header>' in that specification. | Living Standard | |
HTML5 The definition of '<header>' in that specification. | Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHubDesktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
header | ChromeFull support 5 | EdgeFull support Yes | FirefoxFull support 4 | IEFull support 9 | OperaFull support 11.1 | SafariFull support 4.1 | WebView AndroidFull support Yes | Chrome AndroidFull support Yes | Firefox AndroidFull support 4 | Opera AndroidFull support 11.1 | Safari iOSFull support 4.2 | Samsung Internet AndroidFull support Yes |
Legend
- Full support
- Full support
See also
- Other section-related elements:
<body>
,<nav>
,<article>
,<aside>
,<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
,<hgroup>
,<footer>
,<section>
,<address>
.
Active7 years, 4 months ago
I'm in the middle of creating a html to pdf converter using the wkhtmltopdf application and having trouble trying to insert a custom header and footer to appear on the output document. For the program I am making this for I need these to be created within the html page that gets passed into the converter for packaging reasons. The wkhtmltopdf program won't accept the @media print css method so I was wondering if there was any other way in which this can be done within HTML,JavaScript, or CSS?
SayseSayse31.2k1212 gold badges5252 silver badges102102 bronze badges
1 Answer
Use the
--header-html
and --footer-html
options to pass in a URL or file path to the executable. DocumentationIf you are linking to the library use the object settings header and footer properties:
settings.header.htmlUrl
code0100funcode0100fun
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.