The usage of header labels in html5.

The usage of header labels in html5.

<Header> A tag defines the header of a document, which usually contains guidance and navigation information. It is not limited to writing in the webpage header, but also in the webpage content.
In the new standard, the header label is defined as follows:

"A group of introductory or navigational aids ."
The basic meaning is "a group of introductory content related to navigation ". Literally, we can understand that header labels not only define the content of the page header, but also define the introduction of other content below the page header. This is not exactly the same as our traditional page header definition.
Generally, a Copy XML/HTML Code to clipboard

1. <Header>
2. <H1> Yu Pai duckweed
3. <P> focus on web Front-end development </p>
4. </Header>
5. <Article>
6. <Header>
7. <H1> structure tag of html5 semantic tag
8. <P> article, section, hgroup, aside, nav... </p>
9. </Header>
10. <P>... there are many items in the bread... </p>
11. </Article>

In the above structure, we can see that we have defined the title and content of an article using the header. Here, the header label is not the page header, but the page header of the article.

In HTML5, the use of headers is more flexible. You can define and organize the document structure as needed.

Similarly, in the architecture page, header labels are generally placed on the top of the page, but if you want to place it on the left, right, or even bottom, it doesn't matter, A tag only defines its role on the page, rather than its position. Of course, there are more search engine optimization principles, and the important content is advanced at the end of the Architecture page.
Finally, because the header in HTML5 is a block element, it is best to define CSS if we want to use it in most mainstream browsers, as shown below.

Copy the content to the clipboard using CSS Code.

1. Header {display: block ;}