What is the new header tag in html5-Front-end Q&A-php.cn

Table of Contents

网页标题

文章标题

HTML5视频教程

Home

Web Front-end

Front-end Q&A

What is the new header tag in html5

青灯夜游

Dec 16, 2021 pm 05:51 PM

header html5

The new header tag in html5 is "header". The header tag can define the header (introduction information) of the document. It is a structural element with guiding and navigation functions. It is often used to represent some preface or navigation content; it can contain some title elements, and can also place some such as Elements for logos, search boxes, etc.

What is the new header tag in html5

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

The new header tag in html5 is "header".

The header tag can define the header (introduction information) of the document.

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.

The header element 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 it in the header. logo images, search forms, etc.

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.

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 of header element:

Let’s look at the usage of header element based on a picture:

What is the new header tag in html5

Wrapped in the black wireframe is our web page. There is a web page title in the web page. Below the web page title is our article title and text content area. In this picture, we can give our web page title and Article titles all use the header element.

Let’s demonstrate together:

<body>
<header>
<h1 id="网页标题">网页标题</h1>
</header>
<article>
<header>
<h1 id="文章标题">文章标题</h1>
</header>
<p>文章正文部分</p>
</article>
</body>

Copy after login

Header element effect demonstration diagram:

What is the new header tag in html5

In HTML5, a header element can at least Contains a heading element (h1-h6), it can also include the hgroup element we will learn in the next lesson, and it can also include other elements. In the new W3C HTML5 standard, we can also include NAV elements.

What is the new header tag in html5

Let’s implement the header case in the above picture:

<style>
*{
Margin:0;
Padding:0;
}
Body{
Font-family:微软雅黑;
Text-algin:center;
}
A{
Color:#f60;
Text-decoration:none;
}
Hgroup{
Margin-bottom:10px;
}
Nav{
Height:48px;
Backgroud:#ff6600;
}
Nav li{
Float:left;
Backgroud:#000000;
Border-radius:5px;
Padding:5px 10px;
Margin:10px;
List-style:none;
}
</style>

<body>
<header>
<hgroup>
<h1 id="HTML-视频教程">HTML5视频教程</h1>
<a href=”/”>[手机版]</a>
<a href=”/”>[HTML5论坛]</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

Final effect demonstration picture:

What is the new header tag in html5

Recommended tutorial: "html video tutorial"

The above is the detailed content of What is the new header tag in html5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn