搜索表单应放入header仅当其服务于页面级导航，需满足作用域匹配、功能从属性和可访问性支持三原则；全站搜索放页面header，文章内搜索则置于article的header中。

应该包含，但前提是它属于该

语义范围内的引导性内容。

搜索表单本身不是必须放进

的“装饰项”，而是要看它服务的对象——如果搜索功能面向整个页面（如全站搜索），且位于页眉区域，那它天然属于页面级

的语义职责；如果只是某篇文章内部的“站内搜索本页”，则应放在对应

或

的

里，而非全局页眉。

判断搜索表单是否该进 header 的三个关键点

• 作用域匹配：搜索框是否服务于当前

所代表的节（sectioning root 或 section）。例如，首页

里的搜索框默认搜全站，合理；而一篇博客文章

的

里放个“搜本文”，也合理。但把“搜商品”的搜索框塞进“关于我们”页面的

里，就错位了。

• 功能从属性：搜索是导航辅助手段，和 logo、主导航同属“引导用户快速定位内容”的一类。它不承载正文，也不提供收尾信息，符合

定义中“introductory or navigational aids”的定位。

• 可访问性支持：屏幕阅读器会将

内所有内容（包括

）视为该区域的入口工具集。若搜索框被孤立放在

里，它就失去上下文关联，键盘用户难以预判其用途；放进

后，配合和适当的ARIA标注（如aria-label="全站搜索"），能显著提升操作效率。

常见错误与替代方案

• 把搜索当样式容器用：仅因视觉上在顶部，就用

包住搜索框+广告图+轮播图——后两者完全不属于引导性内容，应移出

，改用

或

。

• 忽略标题锚点：只放搜索框，不配任何

–

。此时

语义失效，建议至少加一个隐式标题，比如：

网站导航与搜索

…

。

• 跨节混用：在

的

里放全站搜索，逻辑上割裂——该

的服务对象是这篇文章，不是整个站点。此时应保留全局

里的主搜索，文章内如需搜索，宜用独立组件或链接跳转。

实际结构建议

• 全站搜索（页面级

）：
<header>
  <h1>我的网站</h1>
  <nav>…</nav>
  <form action="/search" role="search">
    <label for="q">搜索全站</label>
    <input type="search" id="q" name="q">
  </form>
</header>

• 文章内搜索（

级

）：
<article>
  <header>
    <h2>如何使用 header 标签</h2>
    <p>作者：张三｜发布于 2026-06-20</p>
    <form action="#search-in-post" aria-label="在本文中搜索">
      <input type="search" placeholder="搜索本文内容">
    </form>
  </header>
  <p>正文开始…</p>
</article>