HTML <header> Tag for Header Content

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

The <header> Tag in HTML 5

The <header> tag is one of the heading tags in HTML.


<header> Tag Syntax

Rules for coding HTML header elements
<body>
   ...
   ... flow content expected ...
   <header>
      ... flow content ...
   </header>
   ...
</body>
  1. Inside an element where flow content is allowed, code one or more optional header elements.
  2. Begin each header element with a starting <header> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include any HTML global attributes on the <header> tag as appropriate.
  4. End the header element with a matching </header> closing tag.
  5. Inside the header element, code the appropriate flow content.

<header> Content Model

Content of the <header> Tag

The content of the header element can include HTML comments, text content and any tags that can be used in flow content except for other <header> tags or <footer> tags.


<header> Tag Attributes

Attributes of the <header> tag
global attributes The only attributes that can be coded on the <header> tag are the common HTML attributes.

<header> Tag Examples

Examples of the header tag in HTML 5

Header for the body of a page:

<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>
      <header>
         <h1>Page Title</h1>
      </header>
      ...
   </body>
</html>

It is common to use the same Page Title for both the <title> tag and the first heading <h1> tag.

Header for a subsection of a page:

<section>
   <header>
      <h2>Subsection Title</h2>
   </header>
   ...
</section>

Section header with multiple heading lines:

<section>
   <header>
      <hgroup>
         <h2>Section Title</h2>
         <h3>Section Subtitle</h3>
      </hgroup>
   </header>
   ...
</section>

The <hgroup> tag associates the <h3> heading with the <h2> section rather than starting a new implied subsection.


Changes in HTML 5 - <header> Tag

What's new in HTML 5

The <header> tag is one of the new elements in HTML 5. It is one of the new sectioning tags in HTML 5, which are intended to reduce the need to use <div> tags for sectioning purposes.

Differences between HTML 5 and earlier versions of HTML

The <header> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the header element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.


Valid HTML 5