标签不是有效的 html 元素，浏览器将其视为未知自定义标签；真正语义化搜索功能依赖 input type="search" 和 标签。
<search></search> 标签目前**不是有效的 HTML 元素**，浏览器完全不识别它，也不会提供任何语义、样式或行为支持。所有主流浏览器（Chrome、Firefox、Safari、Edge）都把它当作一个未知的自定义标签来处理，等同于 <div> 或 <code><span></span>，没有任何特殊能力。
为什么你看到的 <search></search> 示例会“看起来能用”
常见误解来自三类混淆：
- 把
input type="search"误当成<search></search>标签本身 - 将早期 W3C 被否决的草案（2014 年起多次搁置，2026 年最新标准仍未纳入）当作已实现功能
- 某些框架或 CMS 的自定义组件名恰好叫
<search></search>，但那是 JS 渲染层的产物，和 HTML 标准无关
如果你在 DevTools 里看到 <search></search> 节点渲染出来了，那只是因为浏览器容错机制允许未知标签存在，并非它被“支持”了。
input type="search" 才是真正起作用的语义化核心
搜索功能的语义和原生体验，全部依赖 input 元素的 type="search" 属性，而不是什么外围容器标签。它的实际价值体现在：
- iOS/Safari 键盘自动显示「搜索」回车键（不是「前往」或「完成」）
- 桌面 Safari 自动添加清除按钮（×），点击清空输入内容
- 部分浏览器（如 Chrome）启用搜索历史下拉建议（需配合
autocomplete="search"） - 屏幕阅读器明确播报“搜索编辑框”，而非“文本编辑框”
但这些能力全靠 type="search" 单独触发——<search></search> 容器对它毫无加成。
如何正确标记“搜索区域”这个语义区块
你想表达“这里是页面的搜索功能区”，比如页眉右上角那个搜索框，或侧边栏的过滤入口？不用虚构标签，用已有且被广泛支持的语义组合：
- 全局搜索（如顶部导航栏）：直接放在
<header></header>内，<header></header>本身已隐含“站点级操作入口”语义 - 局部搜索（如文章页内筛选）：用
<section></section>+aria-label="文章搜索"显式声明用途 - 必须包裹在
<form></form>中：这是表单提交、无障碍焦点流、键盘回车触发表单提交的基础 - 可选增强：给
<form></form>加role="search"，辅助技术能更精准识别意图（注意：这不是替代<form></form>，而是补充）
别试图用 <search></search> 包裹 <form></form> —— 它既不合法，也不带来任何额外语义或兼容性收益。
<mark></mark> 是唯一用于高亮搜索结果的原生语义标签
用户搜完关键词，要在页面中高亮匹配文字？别用 <span class="highlight"></span>，用 <mark></mark>：
- 它是 HTML Living Standard 正式支持的语义元素，明确告诉辅助工具“这段是搜索命中内容”
- CSS 可单独针对
mark设置背景色，不影响em、strong等强调逻辑 - 必须成对使用：
<mark>关键词</mark>，不能写成<mark></mark> - 动态插入时，先对关键词做 HTML 实体转义（如把
&变成&），再塞进<mark></mark>，否则破坏 DOM 结构
真正的语义链路是：表单用 <form></form> + input type="search" → 提交后服务端返回结果 → 前端用 <mark></mark> 渲染关键词。中间不需要、也不应该插一个不存在的 <search></search>。
