header标签语义上代表页面或区块的逻辑头部，非单纯视觉顶部；全站通栏用顶层header（role="banner"），栏目区块用嵌套header，须含导航、标识或搜索等入口功能，禁用作无语义容器。
header 标签在 HTML5 中语义上代表页面或区块的“头部”，不是单纯“顶部视觉区域”，而是承载主导航、品牌标识、搜索入口等关键入口功能的逻辑容器。对聚合类资讯平台（如新闻门户、内容聚合站），用好 header 能提升结构可读性、SEO 可识别性和辅助技术兼容性。
明确 header 的作用范围：页面级 vs 区块级
聚合平台常有「全站顶部通栏」和「单篇文章/栏目区块头部」两类需求：
- 全站统一顶部（含 logo、主导航、用户登录、全局搜索）——应使用 顶层
header，且通常只出现一次，放在<body>直接子级； - 每个资讯栏目（如「科技」「财经」）或专题卡片组上方的标题与操作区——可用 嵌套
header，作为<section>或<article>的第一个子元素，表达该区块自身的头部信息。
典型结构示例（全站顶部通栏）
以下代码体现语义清晰、兼顾 SEO 和可访问性：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<header role="banner">
<div class="header-inner">
<h1><a href="/" aria-label="返回首页">智闻网</a></h1>
<nav aria-label="主导航">
<ul>
<li><a href="/news">头条</a></li>
<li><a href="/tech">科技</a></li>
<li><a href="/finance">财经</a></li>
<li><a href="/opinion">观点</a></li>
</ul>
</nav>
<div class="header-actions">
<form role="search" aria-label="全站搜索">
<input type="search" name="q" placeholder="搜新闻、作者、话题...">
<button type="submit">?</button>
</form>
<div class="user-controls">
<a href="/login">登录</a>
<a href="/subscribe">订阅</a>
</div>
</div>
</div>
</header>
说明：
– role="banner" 是 ARIA 补充，强化其为页面最顶层横幅的语义；
– <h1> 包裹 logo 链接，既满足标题层级，又提供无障碍返回路径；
– 导航用 <nav> 嵌套在 header 内，符合语义分工；
– 搜索表单标注 role="search"，便于屏幕阅读器快速定位。
避免常见误用
- 不用
header替代div.header—— 若仅作样式容器、无语义头部功能（如无导航、无标识、无搜索），应改用<div class="top-bar">； - 不把广告位、轮播图 banner 直接塞进
header—— 它们属于内容层，更适合放在<main>开头或独立<section>中； - 不在一个页面中多次使用无上下文的顶级
header—— 多个<header>可以存在，但只有一个是role="banner"，其余应归属具体区块。
配合 CSS 实现响应式通栏
header 本身不带默认样式，需用 CSS 控制布局。推荐方式：
立即学习“前端免费学习笔记（深入）”；
- 用 Flexbox 实现 logo、nav、action 的水平流式分布，并在小屏下折叠导航（配合 hamburger 按钮）；
- 固定定位（
position: sticky; top: 0;）实现滚动吸附，但注意设置z-index避免被内容遮挡； - 内部文字大小、行高、间距保持可读性，尤其搜索框输入提示文字建议 ≥14px。
