HTML 的 `<search>` 元素是什么？怎么用？

结论：<search> 是 HTML 标准在 2023 年新增的语义化地标元素（landmark），专门用来包裹「搜索、筛选」相关的表单控件，浏览器会自动为它映射 ARIA role="search"，从此不必再写 <form role="search">。

<search> 和 <form role="search"> 有什么区别？

结论：两者对屏幕阅读器暴露的语义完全一致，区别是 <search> 属于原生 HTML 语义，不依赖 ARIA 属性，也不需要内部必须有 <form>。

在 <search> 之前，大家写的是 <form role="search">。这里有个容易被忽略的细节：<form> 只有在拥有可访问名称（aria-label、aria-labelledby 或 <legend>）时才会映射为 form 角色，否则等同于 generic，所以 role="search" 本质是「覆盖式」写法。而 <search> 天生就是 search 地标，读屏用户可以用快捷键（NVDA 的 D、VoiceOver 的转子）直接跳过来。

另一个差别是容量：<search> 里可以放任何和搜索/筛选有关的东西，比如一组纯前端的筛选复选框，不一定是表单。<form role="search"> 则强制你得有个 form 外壳。

<search> 怎么用？三步写出标准搜索框

结论：把搜索相关的控件整体包进 <search>，需要提交就再内嵌一个 <form>，<search> 本身不负责提交、没有 action 属性。

<search>
  <form action="/search" method="get">
    <label for="q">搜索文章</label>
    <input id="q" name="q" type="search" placeholder="输入关键词">
    <button type="submit">搜索</button>
  </form>
</search>

三步：第一步用 <search> 包住整块区域；第二步内部放 <form action="/search" method="get"> 处理提交；第三步照常写 <label>、<input>、<button>。如果是 React 里那种「输入即筛选」的受控组件，可以省略 <form>，直接 <search><input ... /><button>清空</button></search>。

注意点：<search> 只包「输入/筛选控件」，搜索结果列表要放在 <main> 或 <section> 里，别一起塞进去。

<search> 和 <input type="search"> 是一回事吗？

结论：不是。<input type="search"> 是一个输入框控件（部分浏览器会渲染出可点的清除小叉），<search> 是一个容器级地标，两者层级不同，通常搭配使用。

<input type="search"> 从 HTML5 就有了，作用是告诉浏览器这是个搜索输入框，移动端键盘可能显示「搜索」键。<search> 则是 2023 年才进标准的容器元素。写错成 <form><input type="search"></form> 不会报错，但读屏用户就没有地标可跳了。

浏览器支持怎么样？老浏览器怎么办？

结论：Chrome/Edge 118、Firefox 118、Safari 17 起均原生支持，2023 年 9—10 月间落地；更老的浏览器会把它当成未知内联元素处理。

主流版本都已跟上，Baseline 状态为 2023 年 10 月起 newly available。老浏览器的问题只有一个：未知元素默认是 display: inline，会打乱布局。加一行兜底 CSS 即可：

search { display: block; }

这行写在 CSS reset 里没有任何副作用，现代浏览器本来就把它当块级元素。不需要 JS polyfill。

一个页面能放几个 <search>？

结论：可以有多个，但每个都必须用 aria-label 起可区分的中文名，否则读屏用户会听到一串同名的「搜索 地标」。

典型场景：顶部导航一个全局搜索，侧边栏一个文章筛选。写法是 <search aria-label="站内搜索"> 和 <search aria-label="筛选文章">。只有单个搜索区域时可以省略标签名。另外提醒一句，<search> 不是 sectioning element（不产生文档大纲层级），嵌套在 <header>、<aside> 里语义都正常。

<search> 对 SEO 有影响吗？

结论：<search> 不直接提升搜索排名，它是无障碍（a11y）层面的改进；Google 的 Sitelinks Searchbox 靠的是 JSON-LD 里的 WebSite + SearchAction，与这个标签无关。

所以别指望换个标签就能涨排名。它的价值在于语义正确和可访问性合规，对 C 端站点来说，读屏可用性属于体验分的一部分。真正做站内搜索 SEO，还是老老实实加结构化数据。

总的来说，<search> 是一个「换掉 role="search"」的小而干净的现代化元素：包住搜索/筛选控件，需要提交就内嵌 <form>，多个实例记得加 aria-label，再补一句 search { display: block; } 兜底，就完事了。