HTML元素可以两次具有相同的属性吗？

Question

我正在考虑编写生成可能具有重复属性的HTML标记的代码,如下所示:

<div data-foo="bar" class="some-class" data-foo="baz">

这是合法的HTML吗？其中一个值data-foo优先于另一个吗？我可以依靠半现代浏览器(IE> = 9)来解析它而不会窒息吗？

还是我要在这里做一些非常愚蠢的事情？

Answer 1

在元素中两次具有相同的属性名称无效.对此的权威引用有点复杂,因为旧的HTML版本名义上基于SGML,并且对SGML标准的规范性引用暗示了限制.在HTML5 PR中,第8.1.2.3节的属性明确地说:"在同一个开始标记上绝不能有两个或多个属性,这些属性的名称是彼此不区分大小写的ASCII."

实践中发生的是后一属性被忽略.好吧,未来的浏览器可能会这样做.在DOM中,属性显示为元素节点以及attributes对象的属性,因此没有自然的方法来存储两个值.

Answer 2

从技术上讲，这是无效的，但是每个浏览器都会忽略HTML文档中的重复属性，并使用第一个值（data-foo="bar"在您的情况下）。

在标记中两次使用相同的属性名称被认为是内部解析错误。如果您担心这会导致您的文档无法通过验证。但是，重要的是要理解HTML 5定义了预期的结果，即使您遇到“解析错误”的情况。解析器允许在遇到错误时停止，但是如果选择不停止，则解析器必须产生规范中描述的特定结果。实际上，当遇到HTML文档中的错误时，没有浏览器会选择停止（XML / XHTML是另一回事），因此所有现代浏览器都将成功且一致地处理这种情况。

WHATWG HTML规范在第12.2.4.33节“属性名称状态”中描述了这种情况：

当用户代理离开属性名称状态时（如果合适，在发出标签令牌之前），必须将完整的属性名称与同一令牌上的其他属性进行比较；如果令牌上已经存在一个具有完全相同名称的属性，则这是一个解析错误，必须删除new属性以及与之关联的值（如果有）。

另请参见第12.2节“解析HTML文档”的开头对“解析错误”的描述：

解析算法中的某些点被称为解析错误。解析错误的错误处理是明确定义的（这是整个规范中描述的处理规则），但是用户代理在解析HTML文档时，可能会在他们不希望遇到的第一个解析错误时中止解析器。应用本规范中描述的规则。