header和footer可在页面中多次使用,但必须符合语义:每个均须对应其所属内容区块(如body、article、section)的真正头部或尾部信息,不可仅为布局或样式滥用。

可以,header 和 footer 标签都允许在一个页面中多次出现,但前提是每次使用都符合语义——即它们必须分别代表某个内容区块(如页面、article、section)的真正头部或尾部信息,而不是为了布局或样式随意添加。
什么时候用多个 header
当页面包含多个逻辑上独立的内容单元,且每个单元都有自己的介绍性内容时,就该各自配一个 header:
- 整个页面顶部有一个全局 header:含网站 logo、主导航、搜索框
- 每篇
article开头有自己的 header:含文章标题(h1–h6)、作者名、发布日期 - 某个
section是独立专题模块(比如“编辑推荐”),它开头有小标题和说明文字,也适合用 header 包裹 - 避免情况:仅为了加背景图或留白而套一层 header;在同一个 article 里重复使用多个 header,除非结构确实分层(如带副标题的嵌套章节)
什么时候用多个 footer
footer 的复用逻辑和 header 类似,关键看“归属关系”——它必须描述紧邻的上文内容的结尾信息:
- 全站级 footer 放在
body直接子级最底部:含版权年份、备案号、隐私政策链接等 - 每篇
article结尾放一个 footer:写“作者:张三”“更新于 2026-01-15”“本文参考文献” - 某个
section是数据统计模块,结尾标注数据来源和更新时间,也适用 footer - 避免情况:把全站导航菜单塞进 article 的 footer 里;用 footer 当万能容器放广告或表单按钮;嵌套 footer(footer 里再套 footer)
怎么判断该用 header/footer 还是 div
问自己两个问题:
- 这部分内容是不是当前区块的引导性信息(header)或收尾补充信息(footer)?如果是,优先用语义标签
- 如果只是纯粹为了布局对齐、加背景、做 sticky 效果,且没有明确语义角色,那就用
div+ CSS,别硬套 header/footer - 特别注意:搜索引擎和屏幕阅读器会按语义解析这些标签。误用会导致辅助技术误读(比如把文章页脚当成整站页脚),影响可访问性和 SEO
常见搭配建议
让结构更清晰,header 和 footer 通常配合其他语义标签一起使用:
- 全局 header +
nav(主导航)+main(主内容)+ 全局 footer -
article内部:自有的header(标题/作者)→ 正文 → 自有的footer(引用/编辑记录) -
section下可带header(小节标题)和footer(相关链接/术语说明) - 不要用 footer 替代
address:联系信息优先用address,footer 更侧重“归属与元数据”










