HTML规则

这些规则涵盖了 Vue 模板中的 HTML 有效性和语义标记。它们是独立于 Vue专用指令规则和无障碍规则，以便启用HTML符合性检查或者单独解释。

`html/id-duplication`

报告会在同一模板内重复静态ID。

默认严重程度：error 预设：essential、happy-path、nuxt、opinionated

缺点：

<template>
  <label for="email">Email</label>
  <input id="email" />
  <p id="email">Required</p>
</template>

好：

<template>
  <label for="email">Email</label>
  <input id="email" aria-describedby="email-help" />
  <p id="email-help">Required</p>
</template>

报告已弃用HTML元素。

默认严重程度：warning 预设：happy-path，nuxt，opinionated

缺点：

<template>
  <center>Profile</center>
</template>

好：

<template>
  <section class="profile">Profile</section>
</template>

报告已弃用HTML属性。

默认严重程度：warning 预设：happy-path，nuxt，opinionated

缺点：

<template>
  <table border="1">
    <tr>
      <td>Total</td>
    </tr>
  </table>
</template>

好：

<template>
  <table class="summary">
    <tr>
      <td>Total</td>
    </tr>
  </table>
</template>

报告用于布局的连续<br>元素。

默认严重程度：warning 预设：happy-path，nuxt，opinionated

缺点：

<template>
  <p>First line<br /><br />Second block</p>
</template>

好：

<template>
  <p>First line</p>
  <p>Second block</p>
</template>

需要机器可读的 datetime 值在<time>上。

默认严重程度：warning 预设：happy-path，nuxt，opinionated

缺点：

<template>
  <time>May 13, 2026</time>
</template>

好：

<template>
  <time datetime="2026-05-13">May 13, 2026</time>
</template>

报告在同一<dl>内重复<dt>术语。

默认严重程度：warning 预设：happy-path，nuxt，opinionated

缺点：

<template>
  <dl>
    <dt>API</dt>
    <dd>Public interface</dd>
    <dt>API</dt>
    <dd>Internal service</dd>
  </dl>
</template>

好：

<template>
  <dl>
    <dt>API</dt>
    <dd>Public interface</dd>
    <dd>Internal service</dd>
  </dl>
</template>

报告空白的元素，这些元素本应暴露可见或可感知的内容。包含文本、子内容、aria-label、aria-labelledby、v-html或v-text的元素包括接受。

默认严重程度：warning 预设：happy-path，nuxt，opinionated

缺点：

<template>
  <p></p>
  <li></li>
  <td></td>
</template>

好：

<template>
  <p>Overview</p>
  <li>{{ item.label }}</li>
  <td aria-label="No value"></td>
</template>