HTML5 中怎么用 header 标签组织聚合类资讯平台的顶部通栏-H5教程-PHP中文网

header标签语义上代表页面或区块的逻辑头部，非单纯视觉顶部；全站通栏用顶层header（role="banner"），栏目区块用嵌套header，须含导航、标识或搜索等入口功能，禁用作无语义容器。

html5 中怎么用 header 标签组织聚合类资讯平台的顶部通栏

header 标签在 HTML5 中语义上代表页面或区块的“头部”，不是单纯“顶部视觉区域”，而是承载主导航、品牌标识、搜索入口等关键入口功能的逻辑容器。对聚合类资讯平台（如新闻门户、内容聚合站），用好 header 能提升结构可读性、SEO 可识别性和辅助技术兼容性。

明确 header 的作用范围：页面级 vs 区块级

聚合平台常有「全站顶部通栏」和「单篇文章/栏目区块头部」两类需求：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

全站统一顶部（含 logo、主导航、用户登录、全局搜索）——应使用 顶层 header，且通常只出现一次，放在直接子级；
每个资讯栏目（如「科技」「财经」）或专题卡片组上方的标题与操作区——可用 嵌套 header，作为 <section></section> 或 <article></article> 的第一个子元素，表达该区块自身的头部信息。

典型结构示例（全站顶部通栏）

以下代码体现语义清晰、兼顾 SEO 和可访问性：

<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></h1> 包裹 logo 链接，既满足标题层级，又提供无障碍返回路径；
– 导航用 <nav></nav> 嵌套在 header 内，符合语义分工；
– 搜索表单标注 role="search"，便于屏幕阅读器快速定位。

避免常见误用

不用 header 替代 div.header —— 若仅作样式容器、无语义头部功能（如无导航、无标识、无搜索），应改用 <div class="top-bar">； <li>不把广告位、轮播图 banner 直接塞进 <code>header —— 它们属于内容层，更适合放在 <main></main> 开头或独立 <section></section> 中；
不在一个页面中多次使用无上下文的顶级 header —— 多个 <header></header> 可以存在，但只有一个是 role="banner"，其余应归属具体区块。