The usage of header tag in HTML5


The < header > tag defines the header of a document, usually some guidance and navigation information. It is not limited to writing in the head of the page, but also in the content of the page.
In the new standard, the header tag is defined as follows:

“A group of introductory or navigational aids.”
The basic meaning is “a set of introductory auxiliary contents related to the navigation”. Literally, the header tag not only defines the content of the page header, but also defines the introduction of other content below the page header. This is not exactly consistent with our traditional definition of page header.
Generally, the < header > tag contains at least (but not limited to) a title tag (< H1 > – < H6 >), can also include < hgroup > tag, and can also include table content, logo, search form, < NAV > navigation, etc.

XML/HTML CodeCopy content to clipboard
  1. <header>  
  2.  <h1>Rain beat duckweed</h1>  
  3.  <p>Focus on web front end development</p>  
  4. </header>  
  5. <article>  
  6.  <header>  
  7.   <h1>Structure tags of HTML5 semantic tags</h1>  
  8.   <p>article、section、hgroup、aside、nav…</p>  
  9.  </header>  
  10.  <p>There are many things in it</p>  
  11. </article>  

In the above structure, we can see that using header, we define the title and content of an article. Here, the use of header tag is not the page header, but the page header of the article.

So in HTML5, the use of header is more flexible. You can define and organize the document structure according to your needs.

Similarly, when constructing a page, the header tag is usually placed at the top of the page, but if you want to put it on the left, right or even bottom, it doesn’t matter. The tag only defines its role in the page, not its position. Of course, more search engine optimization principles, the important content of the final page in the architecture ahead of time.
Finally, since header is a block element in HTML5, if we want to use it in most mainstream browsers, we’d better define CSS as follows.

CSS CodeCopy content to clipboard
  1. header { display:block;}