Paragraph 1
Paragraph 2
Paragraph 3
The <header>
tag specifies a header section for a page or another container.
This element usually presents introductory content.
A page layout with <header>
, <main>, and <footer> sections.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header style="padding:30px;background:aliceblue;">
Header section.
</header>
<main style="padding:90px 30px;margin:30px 0;background:aliceblue;">
Main section.
</main>
<footer style="padding:30px;background:aliceblue;">
Footer section.
</footer>
</body>
</html>
The <header>
element serves as a container for introductory content.
A <header>
element may contain any of the following:
A page can have multiple <header>
elements located in different sections.
A <header>
inside an <article>.
Paragraph 1
Paragraph 2
Paragraph 3
<article>
<header style="padding:20px;background:aliceblue;">
Article header section
</header>
<p style="padding-left:30px;">Paragraph 1</p>
<p style="padding-left:30px;">Paragraph 2</p>
<p style="padding-left:30px;">Paragraph 3</p>
<footer style="padding:20px;background:aliceblue;">
Article footer section
</footer>
</article>
The <header>
element has no attributes, but it does accept global attributes.
The following are commonly used.
Attribute | Value | Description |
---|---|---|
id | value | Provides the header element with a unique identifier. |
class | classnames | Assigns one or more classnames to the header element. |
style | CSS-values | Assigns CSS style values to the header element. |
data-* | value | Defines additional data that can be used by JavaScript. |
hidden | hidden | Specifies whether the header element is hidden. |
For additional global attributes see our global attributes list.
The <header>
tag is part of a group of semantic tags
that help with creating the layout of web pages.
This group is referred to as the Layout tag group.
Together, they allow you to create comprehensive page layouts.
An example layout and a list of layout tags below.
Element | Description |
---|---|
<header> | Defines a header section on a page or a section of a page |
<main> | Creates a container for the main content of the page |
<footer> | Defines a footer section on a page or a section of a page |
<nav> | Creates a container for navigation links |
<aside> | Creates a content area that is related to the primary content on a page |
<article> | Defines a container for independent and self contained text |
<section> | Defines a piece of content that can stand on its own |
<div> | Creates a division or section on a page |
Note: Layout tags define areas on a page that contain content. By default they have no visual appearance, but are often styled, for example with a border or background color.
Here is when <header>
support started for each browser:
Chrome
|
6.0 | Sep 2010 |
Firefox
|
4.0 | Mar 2011 |
IE/Edge
|
9.0 | Mar 2011 |
Opera
|
11.1 | Mar 2011 |
Safari
|
5.0 | Jun 2010 |