HTML 5的验证错误

Question

我遇到了一系列疯狂的错误.我正在使用Bootstrap代码并且没有编辑它.那为什么会出现错误呢？

link具有sizes属性的元素必须具有rel包含值icon或值的属性apple-touch-icon.

...

元素banner属性的值不正确.rolenav

要查看同样的内容,请访问 https://validator.w3.org/nu并输入:www.iqtests4kids.com/

Answer 1

这里是W3C HTML检查器(验证器)的维护者.该rel=apple-touch-icon-precomposed错误是因为我最近更新了检查器以符合HTML规范要求sizes:

该sizes属性与icon链接类型一起使用.不能在link没有rel指定icon关键字或apple-touch-icon关键字的属性的元素上指定该属性.

关于role=banneron 的错误nav,这是因为检查器符合HTML规范中ARIA中nav不能具有任何其他角色的要求navigation.

但请注意,HTML规范中的ARIA 还声明了以下要求:

Web开发人员不应将ARIA role和aria-*属性设置为与表中定义的隐式ARIA语义匹配的值.

而在"表"的要求引用状态的隐性语义nav是navigation.

因此,如果您使用role=navigation与nav,检查程序会发出警告.

因此,根据HTML要求中的ARIA,底线是nav永远不应该有明确的role.

Answer 2

看起来验证者对以下内容更满意：

<link rel="apple-touch-icon".....

代替

<link rel="apple-touch-icon-precomposed"......

对于另一个错误，您可以通过将有问题的设置更改role="banner"为"role=navigation"：

<nav id="main-menu" ..... role="navigation">

要么保留它并接受由此产生的“警告”，要么完全忽略该值（最好的解决方案），验证者会很高兴:)