HTML 新标签到底有什么用？

一、先说结论

<search> 是 HTML 新增的一个语义化容器标签，专门用来包裹页面或应用中”与搜索、筛选功能相关”的内容——通常就是一个搜索框、筛选控件组，或者两者的组合。它本身不参与展示搜索结果，只负责标记”这一块是搜索/筛选区域”。

如果你已经很熟悉 <header>、<nav>、<footer> 这类语义化标签，那么理解 <search> 会非常轻松：它属于同一个家族,只是专门服务于”搜索”这个场景。

二、它解决了什么问题

在 <search> 出现之前，前端开发者想要标记一个搜索区域，通常有两种做法：

用一个普通的 <div> 包裹搜索表单，纯靠 class 命名（比如 class="search-box"）表达语义，但浏览器和屏幕阅读器完全看不懂这层含义;
给 <form> 元素手动加上 role="search"，让辅助技术知道”这是一个搜索表单”。

第二种做法能用，但存在几个局限:

只能用在 <form> 上，如果搜索功能不是靠表单实现的（比如纯 JS 拼出来的搜索交互块），就没法自然地加这个角色;
语义完全依赖开发者主动补一个 ARIA 属性，很容易被遗漏；
从标签本身完全看不出”这里是搜索区域”，可读性和可维护性都打折扣。

<search> 元素的引入,本质上是把这层语义从”靠属性模拟”变成了”原生标签自带”。

三、`<search>` 具体是做什么的

按照标准定义，<search> 是一个容器，用来包裹文档或应用中那些带有表单控件、或者其他与”执行搜索或筛选操作”相关的内容。这里的”搜索”范围其实很宽泛,可以是：

针对整个网站或应用的全局搜索；
针对当前页面/文档内容的过滤查找；
针对整个互联网某个子集的搜索（比如搜索引擎首页本身）。

需要特别注意的一点是：<search> 不是用来展示搜索结果的。搜索结果依然应该放在页面的主体内容区域（比如 <main> 里），<search> 只负责包住”输入查询条件”这部分交互控件。不过,如果搜索框自带的”快速联想建议”下拉列表是搜索功能本身的一部分，那么把它嵌套在 <search> 内部是合适的。

<search> 元素在属性上非常”朴素”——它只支持全局属性，没有任何专属属性，这也符合语义化标签一贯的设计思路：结构和样式无关，专注表达含义。

四、和无障碍访问（Accessibility）的关系

<search> 最直接的价值,体现在无障碍访问层面。使用 <search> 包裹内容后，它会自动对应一个 search 的 ARIA landmark（地标）角色。

这意味着什么？屏幕阅读器用户可以通过”地标导航”功能，直接跳转到页面中的搜索区域，而不需要在一堆内容里逐个摸索。以前要达到同样的效果，需要手动给 <form> 加上 role="search"；现在只要用 <search> 包一层，浏览器和辅助技术就能自动识别，不用再手写 ARIA 角色。

一个典型的写法大致是这样：

<header>
  <h1>电影网站</h1>
  <search>
    <form action="./search/">
      <label for="movie">查找电影</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">搜索</button>
    </form>
  </search>
</header>

这里 <search> 是语义容器，负责声明”这一块是搜索区域”；里面的 <form> 才是真正负责提交查询请求的表单。两者分工明确,并不冲突。

五、和 `<input type="search">` 是什么关系

这是很多人第一次看到 <search> 标签时容易混淆的地方——两者名字很像,但完全是两回事：

<input type="search"> 是一种表单控件类型,早在很多年前就已经被广泛支持，作用是渲染一个专门用于输入搜索关键词的文本框（在部分浏览器里会带有清除按钮等细节样式）；
<search> 是一个语义容器标签，2023 年才被主流浏览器支持，作用是从结构层面标记”这一整块内容是搜索/筛选区域”。

换句话说，<input type="search"> 关心的是”这个输入框长什么样、怎么交互”，<search> 关心的是”这一整块内容在页面结构里扮演什么角色”。两者可以搭配使用，就像上面的示例代码那样：外层用 <search> 声明语义，内层用 <input type="search"> 承载实际的输入交互。

六、浏览器支持情况

<search> 元素目前已经进入 Baseline（网页平台”基线可用特性”）的 “Newly Available（新近可用）” 阶段，起始时间是 2023 年 10 月。主流浏览器的支持时间点大致集中在同一时期：Chrome、Edge 118（2023 年 10 月），Firefox 118（2023 年 9 月底），以及 Safari 17（2023 年 9 月）。也就是说，从 2023 年秋天开始，各大主流浏览器基本上都已经支持这个标签了。

不过需要提醒一点：对于还需要兼容比较老旧浏览器版本的项目，在正式大规模使用前，建议根据自己项目的目标用户群体，确认一下浏览器覆盖范围是否满足需求。好在即便某个旧浏览器不认识 <search> 标签，它也会被当作一个普通的无语义容器来解析，不会导致页面报错或布局崩溃，属于”渐进增强”友好型的标签。