HTML5中header是什么意思？-猿码集

HTML5是由世界万维网联盟（W3C）制定的一套新的标准，相较于HTML4，HTML5更加注重语义化标签的使用，其中header就是其中一个非常好的例子。

01. header的定义和作用

在HTML中，header是一个分组内容的通用标记，header用来定义一个文档或者一个节（section）的头部，通常用作头部的标题元素（title），其中包含了一些导航链接、搜索框、banner图片、公司logo或者一些附加元素。

在HTML5中，header元素是为了更好的对文档进行语义化而引入的标记，在以前的版本中通常用的是<div>标签，但是<div>不同于<header>，它没有语义价值，仅仅是为了做样式的布局和区分一个内容块。

01.1 header的使用场景

首先来看看这样一个简单的HTML文件：


<!DOCTYPE html>
<html>
  <head>
    <title>This is a Page Title</title>
  </head>
  <body>
    <div>
      <h1>This is a Blog Title</h1>
      <p>This is the Blog post content.</p>
    </div>
  </body>
</html>

在这个HTML文件中，有一个<div>标签的头部，其中包含了一个博客的标题和内容。但是这样并不能很好地突出标题，而且它没有任何语义价值，无法很好地描述文档的结构。

我们在这里可以使用<header>标签来代替<div>，并且给它加上一些额外的文本和链接：


<!DOCTYPE html>
<html>
  <head>
    <title>This is a Page Title</title>
  </head>
  <body>
    <header>
      <h1>This is a Blog Title</h1>
      <p>by Jane Smith </p>
      <nav>
        <a href="#about">About</a> 
        <a href="#contacts">Contact</a>
      </nav>
    </header>
    <div>
      <p>This is the Blog post content.</p>
    </div>
  </body>
</html>

在这个HTML文件中，我们使用<header>标签来代替原来的<div>标签，并且加入了导航链接和副标题文本，这样就使得文档的结构更加明确，也更加符合html语义化的要求。

02. header元素的结构和属性

<header>标签的结构可以包括一些必要的元素和属性，例如:

02.1 典型header结构


<header>
  <h1>This is a Title</h1>
  <p>This is some additional text.</p>
  <nav>
    <a href="#about">About</a>
    <a href="#contacts">Contact</a>
  </nav>
</header>

在上述代码中，我们使用了<H1>标记来确定内容的主标题，并且给它添加了一些附加文本和导航链接。

02.2 header标签的可选属性

<header>标签并不强制要求诸如title之类的属性，即可表示一个头部块的构成，但是有时候加上一些自定义的属性也能够使得代码更容易被阅读理解。

其中最常用的属性是class和id属性，其他可选的属性还包括了title、style和lang等属性。


<header id="header" class="main-header">
  <h1>This is a Main Title</h1>
  <p>This is some additional text.</p>
  <nav>
    <a href="#about">About</a>
    <a href="#contacts">Contact</a>
  </nav>
</header>

在这个代码片段中，我们同时使用了class和id属性来指定这个<header>标签提供的主要角色的类型，以便于样式和脚本中引用。

03. header的最佳实践

<header>标签提供了一种更适合语义化结构的HTML元素，但是过度地使用<header>标签会导致代码的混乱和不可维护性。

03.1 header的用法原则

总的来说，<header>标签的原则应该是，当需要表示一个页面或者一个区块的头部时，才使用这个标签。如果使用<header>标签时无法确定其作用，那么就不要使用这个标签。

下面是一些使用<header>标签的最佳实践：

03.2 header仅用于文档开始部分

<header>标签通常应该只出现在文档的头部部分，例如在元素中，就应该在其最上面设置这个标签。

03.3 用header替换div

如果必须设置一个文档或区块的头部，那么优先考虑使用<header>标签替代原来的<div>标签，因为<header>标签可以更好地描述文档结构，也更符合HTML5的语义化规范。

03.4 header标签的嵌套和关联

在使用<header>标签时，应该注意它和其他标签的嵌套关系，例如它和<main>、<section>、<article>等标签的关联。

03.5 header和SEO优化

标签对搜索引擎优化同样十分重要，在我们使用<header>标签时，还要另外考虑它是否对SEO优化有作用，在选择标题、导航链接和附加文本时，需要根据SEO的规则进行优化。

04. 总结

<header>标签是HTML5中非常重要并且有语义化特性的标签之一，它应该仅用于定义文档或区块头部，并且需要和其他HTML元素嵌套和关联，以便于更好地描述文档结构和SEO优化。在编写HTML代码时，我们应该始终考虑使用这个标签来优化我们的代码结构。

HTML5中header是什么意思？