HTML header 标签

HTML header 语法

header 是 HTML5 新增的语义化标签，它主要用于页面头部、文章头部（即 article）、区块头部（即 section）。

当 header 用于页面头部时，它一般用于包含网站名称、页面 LOGO、顶部导航、介绍信息等，如下图所示。

HTML header标签用于页面头部

当 header 用于文章头部时（即 article 元素头部），它一般用于包含 “文章标题” 和 “元信息” 这两部分。所谓的元信息，一般指的是作者、点赞数、评论数等，如下图所示。

HTML header标签用于文章头部

当 header 用于区块头部时（即 section 元素头部），它一般只包含区块的标题内容，如下图所示。

HTML header标签用于区块头部

语法：

<header>
    ……
</header>

说明：

header 标签可以包含任何合法的 HTML 标签。

注意: header 标签与 head 标签是不同的。header 标签包含的是页面头部的可视内容，而 head 标签包含的是文档的元数据。

HTML header 摘要

属于	HTML 语义化
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML header 示例

接下来，我们通过一个简单的例子来讲解一下 HTML header 标签是如何使用的。

示例：header 标签的基本用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <header></header>
    <nav></nav>
    <article>
        <header></header>
        ……
        <footer></footer>
    </article>
    <aside></aside>
    <section>
        <header></header>
        ……
    </section>
    <footer></footer>
</body>
</html>

上面代码的 HTML 结构如下图所示。

HTML header标签示例

分析：

上图是 HTML5 结构元素最经典的一个使用图，从中可以清楚看出 header 元素一般用于 3 个地方：页面头部、文章头部（article 元素）和区块头部（section 元素）。

这个结构图非常重要，对于其他结构元素，小伙伴们也应该多联系一下此图，这样学习思路会更加清晰。

HTML5 语义化标签

HTML5 新增了非常多结构性的语义化标签，以提高代码的可读性和利于 SEO，主要包括：