<header> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:header

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. header

Introduction

The header element marks the header of a section.

A header element typically contains one h1-h6 element or an hgroup element, and it can also contain navigation elements for the section.

The header Element summary

Item Value
Element: header
PermittedAny element that can contain flow elements.
Parents: The header element cannot be a descendent of the address or footer element and cannot be a descendant of another header element.
Local Attributes:None
Contents:Flow content.
Tag Style: Start and end tags
New in HTML5?Yes
Changes in HTML5N/A

Style Convention 

header {
   display: block;
}

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
h1, h2, h3 { background: grey; color: white; }
hgroup > h1 { margin-bottom: 0; margin-top: 0}
hgroup > h2 { background: grey; color: white; font-size: 1em;
margin-top: 0px; margin-bottom: 2px}
body > header  *, footer > * { background:transparent; color:black;}
body > section, body > section > section,
body > section > section > section {margin-left: 10px;}
body > header, body > footer {
   border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0;
}

      </style> 
   </head> 
   <body> 
      <header> 
         <hgroup> 
            <h1>CSS</h1> 
            <h2>Introduction</h2> 
         </hgroup> 
      </header> 
      <section> 
         <header> 
            <hgroup> 
               <h1>HTML</h1> 
               <h2>Element</h2> 
            </hgroup> 
         </header> 
         <section> 
            <header> 
               <h1>Style</h1> 
            </header> 
            <section> 
               <p>detail.</p> 
            </section> 
         </section>  
      </section>
   </body><!--  w  ww  .  j av a2 s . c o  m-->
</html>

Related Tutorials