Description
HTML element <header> is used to define a container for the content header, which can include a title or a heading that explains the content.
An HTML document can contain several <header> elements.
It is commonly used to define any of the below.
- A visible page header with headings, logo, navigation links, and some authorship information
- A visible section header that explains the section content in short.
The element <html> and <header> are different.
- The element
<html>defines the document header - The element
<header>defines the document content header
The below table summarizes its usage.
| Usage Details | |
| Placement | It is displayed as a Block element. |
| Contents | It can contain Block elements, Inline elements, and text. It cannot include the elements <header>, <footer>. |
| Tags | Both opening and closing tags are required. |
| Versions | HTML5 |
Syntax
Here is the basic syntax of the <header> element.
<header>...</header>Examples
Element <header> used to define web page header with navigation links.
<header>
<h1>Random Codez</h1>
<nav>
<p>
<a href="https://www.randomcodez.com/">Home</a> |
<a href="https://www.randomcodez.com/about">About</a> |
<a href="https://www.randomcodez.com//terms">Terms</a>
</p>
</nav>
</header>Element <header> used to define article content header.
<article>
<header>
<h1>Article Heading</h1>
<p>Posted by Kumar</p>
</header>
<p>Article content goes here...</p>
</article>Attributes
The following table shows the list of supported and unsupported attributes for the <header> tag.
| Attribute Type | Details |
| Element-Specific Attributes | The tag <header> doesn't have any element-specific attributes. |
| Global Attributes | Like all other HTML tags, the tag <header> supports the HTML Global Attributes. |
| Event Attributes | The tag <header> also supports the HTML Event Attributes. |
Browser Compatibility
The tag <header> is supported in all modern browsers.
- Google Chrome 6+
- Internet Explorer or Edge 9+
- Firefox 4+
- Apple Safari 5.1+
- Opera 11.1+