data 属性

data 属性 是一组全局属性，名字以 data- 开头，用来往元素上挂自定义数据^[1]。HTML 不认识这些名字的具体含义，它们留给脚本与样式使用^[1]。

读写方式

数据通过元素的 dataset 接口访问，属性名去掉 data- 前缀后从连字符写法转成小驼峰^[1]。

data-id="10784"        element.dataset.id
data-test-abc="x"      element.dataset.testAbc
data-ship-id="324"     连字符后接数字不建议使用

连字符后面接非字母字符（例如 data-test-1、data--test）不会被 dataset 正常识别，命名要避开^[1]。样式端可以用属性选择器与 attr() 取到这些值^[1]。

与搜索的关系

data-* 里的文字不是正文，页面内容判断不靠它。要控制摘要里出现哪些内容，用的是规范里定好的那一个属性 data-nosnippet，它挂在元素上让这一块不进摘要^[2]。它只能写在 div、span、section 这三种元素上^[2]。

常见误用

第一种是把商品参数、正文段落只写进 data-*，页面上看不到也抓不到^[3]。第二种是用 data-* 存敏感信息，接口返回的 HTML 里所有人都能读。第三种是给埋点写几十个属性，页面体积与可读性一起变差^[1]。

命名建议

规范给出三条建议：全小写、只用字母数字与连字符、避免以 XML 命名空间开头^[1]。建议是建议，不遵守也不会报错，属性仍会被匹配到，只是 dataset 取不到^[1]。

附录

参见

• 属性
• data-nosnippet
• 隐藏内容与 CSS
• ARIA
• 事件与交互

参考资料

官方（境外）

1. 《data-* HTML 全局属性》，MDN Web 文档。
2. 《Google 支持的 meta 标记和属性》，Google 搜索中心。
3. 《了解 JavaScript SEO 基础知识》，Google 搜索中心。

外部链接

• HTML 标准：自定义数据属性，WHATWG。