What does the html5 header tag mean? Detailed explanation of the usage of html5 header tag (with examples)-H5 Tutorial-php.cn

What does the html5 header tag mean? Detailed explanation of the usage of html5 header tag (with examples)

寻∝梦

Release： 2018-08-30 13:41:48

Original

6501 people have browsed it

This article mainly introduces you to a basic introduction to the elements of the html5 header tag, and an analysis of usage examples of the header tag. Let’s take a look at this article about the html5 header tag

1. First, let’s talk about the basic introduction of the html5 header tag element

header element It is a structural element with guiding and navigation functions. It is usually used to place the title of the entire page or a content block within the page, but it can also contain other content, such as placing logo images, search forms, etc. in the header.

Note: There is no limit to the number of header appearances in a page, which means we can add a header element to different content blocks on the same page.

Before the HTML5 version, it was customary to use div tags to layout web pages. In HTML5, a new header tag element is added based on the DIV tag. Also called "

" header tag. In the past, we often divided web pages into header, content, and bottom in div css layout. For large structures, we often use divs with ids for layout. The header is often laid out using or . The characteristics are different from the traditional DIV layout. There is no need for div. tag, but add a new element tag.

It is recognized that "header" is a commonly used name in HTML layout, so a new header tag element is added to HTML5. You can understand why the header is added as a label element in html5.

In addition to using the header tag directly, you can also set class or id to the header.

html5 header tag usageExample:

Introduction to the homepage:

<header>  
 <h1>PHP中文网</h1>  
 <p>专注于编程（PHP中文网）</p>  
</header>  
<article>  
 <header>  
  <h1>PHP中文网的html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含了很多东西...</p>  
</article>

Copy after login

The code effect is as shown in the figure:

What does the html5 header tag mean? Detailed explanation of the usage of html5 header tag (with examples)

This is the most basic usage. 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.

2. Now let’s talk about the compatibility issue:

Because the header tag is a new tag element in HTML5, it is not supported by older versions of browsers. You need to Only supported by IE9 or above browsers, the latest Google Chrome and other browsers. Of course, domestic browsers such as 360 Browser, Baidu Browser, and Aoyou Browser all use the IE kernel that comes with the system, so domestic browsers are actually the same version as the IE version that comes with your system, so your IE browser is IE9 or above. The version is naturally compatible with the new tag elements of HTML5.

Now let’s upgrade the above code:

<body>
<header>
<hgroup>
<h1>HTML5教程php中文网</h1>
<a href=”/”>[手机版]</a>
<a href=”/”>[PHP中文网]</a>
</hgroup>
<nav>
<ul>
<li><a href=”/”>首页</a></li>
<li><a href=”/”>手机版</a></li>
<li><a href=”/”>论坛</a></li>
</ul>
</nav>
</header>
</body>

Copy after login

The effect is as shown:

What does the html5 header tag mean? Detailed explanation of the usage of html5 header tag (with examples)

The above is an introduction to the usage of HTML5 header tags , this article has introduced so much. If you want to see more, welcome to the PHP Chinese website. If you have any questions, please leave a message below.

【Editor’s Recommendation】

About the difference between the section tag and the div tag in HTML5 (with examples inside)

## What is the use of the #html article tag? Introduction to how to use the html article tag

The above is the detailed content of What does the html5 header tag mean? Detailed explanation of the usage of html5 header tag (with examples). For more information, please follow other related articles on the PHP Chinese website!