What does the header tag in HTML5 mean? Do you know how to use the header tag in HTML5?

寻∝梦

Release： 2018-08-15 17:48:28

Original

9026 people have browsed it

What does the header tag in HTML5 mean? Do you know how to use the header tag in HTML5? This article mainly introduces the HTML5 head tag

in detail, explaining the usage method and instructions

Introduction to the homepage:

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>

Copy after login

HTML The definition and usage of the header tag:

tag defines the header (introduction information) of the document.

HTML

element is used to represent some preface or navigation content. It can contain some title elements, and can also place some elements such as logos, search boxes, or other

elements.

Instructions for use:

The

element is not an element that can form paragraph content, so it does not need to be reflected in the content directory.

Usage examples:

<header>
  a logo
</header>

Copy after login

Differences between HTML 4.01 and HTML 5

The

tag is a new tag in HTML 5.

: Describes the header area of the document, which is used to define the introduction and display area of the content.

The header tag is different from the head tag we are most familiar with. Header is often more commonly used. Define the header of the article. Let’s briefly analyze the usage of the header tag in HTML5:

tag defines the header of the document, usually some guidance and navigation information. It is not limited to being written in the header of the web page, but can also be written in the content of the web page.

The header tag is defined as follows in the new standard:

"A group of introductory or navigational aids.”

Copy after login

The basic meaningis"A set of introductory navigation-related aids content". Literally understood, the header tag not only defines the content of the page header, but can also define the introduction of other content below the page header. This is not completely consistent with our traditional page header definition.

Usually the

tag contains at least (but is not limited to) a header tag (

-

), and can also include the tag, and can also include table content, Logo, search form,

navigation, etc.

<header>  
 <h1>PHP中文网</h1>  
 <p>专注于前端后台开发授课</p>  
</header>  
<article>  
 <header>  
  <h1>html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含很多东西...</p>  
</article>

Copy after login

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

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

Similarly, when structuring a page, the header tag is generally placed at the top of the page, but if you want to place it on the left, right or even bottom, it doesn’t matter. The tag only defines its location on the page. Role, not location. Of course, it is more based on search engine optimization principles. Important content is finally advanced when structuring the page.

Finally, since header is a block element in HTML5, if we want to use it in most mainstream browsers, it is best to define CSS as follows.

header { display:block;}

Copy after login

If you want to know about the footer tag, please click here: Do you know how to use the footer tag in HTML5? , what does the footer tag in HTML5 mean?

This article explains the header tag in HTML5 thoroughly. If you have other questions, you can ask below.

[Related recommendations]

What are the attributes of the HTML IMG tag? Understand the usage of IMG tag

What is web in HTML5? What are the elements in web storage?

The above is the detailed content of What does the header tag in HTML5 mean? Do you know how to use the header tag in HTML5?. For more information, please follow other related articles on the PHP Chinese website!