HTML Rules

Below the list of rules supported by Biome, divided by group. Here’s a legend of the emojis:

The icon indicates that the rule is part of the recommended rules.
The icon indicates that the rule provides a code action (fix) that is safe to apply.
The icon indicates that the rule provides a code action (fix) that is unsafe to apply.
The icon indicates that the rule has been implemented and scheduled for the next release.

`a11y`

Rule name	Description	Properties
noAccessKey	Disallow the `accesskey` attribute.
noAmbiguousAnchorText	Disallow ambiguous anchor descriptions.
noAriaHiddenOnFocusable	Enforce that aria-hidden=“true” is not set on focusable elements.
noAriaUnsupportedElements	Disallow ARIA attributes on elements that cannot use them.
noAutofocus	Enforce that the `autofocus` attribute is not used on elements.
noDistractingElements	Enforces that no distracting elements are used.
noHeaderScope	The scope prop should be used only on `<th>` elements.
noInteractiveElementToNoninteractiveRole	Enforce that non-interactive ARIA roles are not assigned to interactive HTML elements.
noLabelWithoutControl	Enforce that a label element or component has a text label and an associated input.
noNoninteractiveElementInteractions	Disallow use event handlers on non-interactive elements.
noNoninteractiveElementToInteractiveRole	Enforce that interactive ARIA roles are not assigned to non-interactive HTML elements.
noNoninteractiveTabindex	Require a negative integer `tabindex` on non-interactive elements.
noPositiveTabindex	Disallow positive values for the `tabindex` attribute.
noRedundantAlt	Enforce `img` alt prop does not contain the word “image”, “picture”, or “photo”.
noRedundantRoles	Enforce explicit `role` property is not the same as implicit/default role property on an element.
noStaticElementInteractions	Require an appropriate role when a non-interactive element has event handlers.
noSvgWithoutTitle	Require a supported labeling pattern for non-decorative SVG elements.
useAltText	Enforce that all elements that require alternative text have meaningful information to relay back to the end user.
useAnchorContent	Enforce that anchors have content and that the content is accessible to screen readers.
useAriaActivedescendantWithTabindex	Enforce that `tabindex` is assigned to non-interactive HTML elements with `aria-activedescendant`.
useAriaPropsForRole	Enforce that elements with ARIA roles must have all required ARIA attributes for that role.
useAriaPropsSupportedByRole	Enforce that ARIA properties are valid for the roles that are supported by the element.
useButtonType	Require an explicit, valid `type` on every `<button>`.
useFocusableInteractive	Elements with an interactive role and interaction handlers must be focusable.
useHeadingContent	Enforce that heading elements (`h1`, `h2`, etc.) have content and that the content is
useHtmlLang	Require a `lang` attribute on the `<html>` element.
useIframeTitle	Require a `title` on every `<iframe>`.
useKeyWithClickEvents	Enforce elements with a click event handler to also have at least one keyboard event handler.
useKeyWithMouseEvents	Require keyboard equivalents for mouse hover events.
useMediaCaption	Enforces that `audio` and `video` elements must have a `track` for captions.
useSemanticElements	Enforces using semantic DOM elements over the ARIA `role` property.
useValidAnchor	Require anchors to provide a real navigation destination.
useValidAriaProps	Disallow unknown `aria-*` attributes.
useValidAriaRole	Elements with ARIA roles must use a valid, non-abstract ARIA role.
useValidAriaValues	Enforce that ARIA state and property values are valid.
useValidAutocomplete	Use valid values for the `autocomplete` attribute on `input` elements.
useValidLang	Require a supported language tag on the `<html>` element.

`correctness`

Rule name	Description	Properties
noDuplicateAttributes	Disallow duplication of attributes.
noRestrictedElements	Disallow the use of configured elements.
noVueVIfWithVFor	Disallow using `v-if` and `v-for` directives on the same element.
noVueVOnNumberValues	Disallow deprecated number modifiers on Vue `v-on` directives.
useVueVForKey	Enforce that elements using `v-for` also specify a unique `key`.
useVueValidTemplateRoot	Enforce valid Vue `<template>` root usage.
useVueValidVBind	Forbids `v-bind` directives with missing values or invalid modifiers.
useVueValidVCloak	Enforce valid `v-cloak` Vue directives.
useVueValidVElse	Enforce valid usage of v-else.
useVueValidVElseIf	Enforce valid `v-else-if` directives.
useVueValidVFor	Enforces valid `v-for` directives in Vue templates.
useVueValidVHtml	Enforce valid `v-html` directives.
useVueValidVIf	Enforces valid `v-if` usage for Vue templates.
useVueValidVOn	Enforce valid `v-on` directives with proper arguments, modifiers, and handlers.
useVueValidVOnce	Enforce valid `v-once` Vue directives.
useVueValidVPre	Enforce valid `v-pre` Vue directives.
useVueValidVText	Enforce valid `v-text` Vue directives.

`nursery`

Rule name	Description	Properties
noAstroConflictingSetDirectives	Disallow conflicting content sources on Astro elements.
noAstroSetHtmlDirective	Disallow the use of Astro’s `set:html` directive.
noInvalidFileInputAccept	Disallow invalid `accept` values on file inputs.
noMisplacedListElements	Require `<li>` elements with an HTML element parent to be children of `<ul>`, `<ol>`, or `<menu>`.
noNonScalableViewport	Disallow disabling zoom with `user-scalable=no` in the `<meta name="viewport">` element.
noObsoleteTags	Disallow obsolete HTML elements.
noSvelteAtDebugTags	Disallow the use of Svelte’s `{@debug}` tag.
noSvelteAtHtmlTags	Disallow the use of Svelte’s `{@html}` tag.
noSvelteClassDirective	Disallow Svelte’s `class:` directive.
noSvelteLegacyConst	Disallow legacy Svelte `{@const}` tags.
noTailwindArbitraryValue	Disallow arbitrary values in Tailwind CSS utility classes.
noTailwindLegacyUtilities	Disallow Tailwind CSS utility classes that Tailwind CSS only keeps for backward compatibility.
noTailwindRawColors	Disallow Tailwind CSS utility classes that use raw palette colors.
noTailwindRestyledComponents	Disallow Tailwind utilities that override the appearance of components.
noUndeclaredClasses	Reports CSS class names in HTML `class` attributes that are not defined
noUndeclaredCustomProperties	Disallow undeclared CSS custom properties in inline styles.
noUnsafeIframeSandbox	Disallow `allow-scripts` together with `allow-same-origin` in an iframe sandbox.
noVueRootVIf	Disallow `v-if` on the root element of a Vue component template.
noVueUndeclaredDirectives	Disallow custom Vue directives that are not declared.
noVueVHtml	Disallow the use of Vue’s `v-html` directive.
noVueVText	Disallow the use of Vue’s `v-text` directive.
useAstroClientOnlyDirectiveValue	Require a value for Astro’s `client:only` directive.
useConsistentBlockLang	Enforce which languages the top-level blocks of Vue and Svelte components use.
useControlLabel	Enforce that interactive control elements have an accessible label.
useSvelteKitResolve	Require internal navigation in SvelteKit apps to use paths built with `resolve()`.
useSvelteRequireEachKey	Require keyed `{#each}` blocks in Svelte templates.
useSvelteShorthandDirective	Enforce the shorthand syntax for Svelte `bind:`, `class:`, and `style:` directives.
useTailwindShorthandClasses	Enforce using fewer Tailwind utilities instead of multiple utilities that are functionally the same.
useTailwindSortedClasses	Enforce the sorting of Tailwind CSS classes.
useTailwindStaticClassStrings	Require complete, statically written class names.
useVueConsistentEventHyphenation	Enforce a consistent hyphenation style for event names in `v-on` directives on custom components.

`performance`

Rule name	Description	Properties
noSyncScripts	Disallow external scripts that block HTML parsing.
useVueVapor	Enforce opting in to Vue Vapor mode in `<script setup>` blocks.

`security`

Rule name	Description	Properties
noScriptUrl	Disallow `javascript:` URLs in HTML.
useIframeSandbox	Require the `sandbox` attribute on `<iframe>` elements.

`style`

Rule name	Description	Properties
noExcessiveLinesPerFile	Restrict the number of lines in a file.
noInlineStyles	Disallow the use of inline styles.
useVueConsistentVBindStyle	Enforce a consistent style for `v-bind` in Vue templates.
useVueConsistentVOnStyle	Enforce a consistent style for `v-on` in Vue templates.
useVueHyphenatedAttributes	Disallow uppercase letters in Vue template attribute names.

`suspicious`

Rule name	Description	Properties
useScopedStyles	Keep component styles scoped in Vue and Astro files.

Recommended rules

noAccessKey (Severity: error)
noAmbiguousAnchorText (Severity: error)
noAriaHiddenOnFocusable (Severity: error)
noAriaUnsupportedElements (Severity: error)
noAutofocus (Severity: error)
noDistractingElements (Severity: error)
noHeaderScope (Severity: error)
noInteractiveElementToNoninteractiveRole (Severity: error)
noLabelWithoutControl (Severity: error)
noNoninteractiveElementToInteractiveRole (Severity: error)
noNoninteractiveTabindex (Severity: error)
noPositiveTabindex (Severity: error)
noRedundantAlt (Severity: error)
noRedundantRoles (Severity: error)
noStaticElementInteractions (Severity: error)
noSvgWithoutTitle (Severity: error)
useAltText (Severity: error)
useAnchorContent (Severity: error)
useAriaActivedescendantWithTabindex (Severity: error)
useAriaPropsForRole (Severity: error)
useAriaPropsSupportedByRole (Severity: error)
useButtonType (Severity: error)
useFocusableInteractive (Severity: error)
useHeadingContent (Severity: error)
useHtmlLang (Severity: error)
useIframeTitle (Severity: error)
useKeyWithClickEvents (Severity: error)
useKeyWithMouseEvents (Severity: error)
useMediaCaption (Severity: error)
useSemanticElements (Severity: error)
useValidAnchor (Severity: error)
useValidAriaProps (Severity: error)
useValidAriaRole (Severity: error)
useValidAriaValues (Severity: error)
useValidAutocomplete (Severity: error)
useValidLang (Severity: error)
noDuplicateAttributes (Severity: error)
noVueVIfWithVFor (Severity: error)
noVueVOnNumberValues (Severity: error)
useVueVForKey (Severity: error)
useVueValidTemplateRoot (Severity: error)
useVueValidVBind (Severity: error)
useVueValidVCloak (Severity: error)
useVueValidVElse (Severity: error)
useVueValidVElseIf (Severity: error)
useVueValidVFor (Severity: error)
useVueValidVHtml (Severity: error)
useVueValidVIf (Severity: error)
useVueValidVOn (Severity: error)
useVueValidVOnce (Severity: error)
useVueValidVPre (Severity: error)
useVueValidVText (Severity: error)
noScriptUrl (Severity: error)
useVueConsistentVBindStyle (Severity: information)
useVueConsistentVOnStyle (Severity: information)
useVueHyphenatedAttributes (Severity: information)
useScopedStyles (Severity: warning)

Missing a rule? Help us by contributing to the analyzer or create a rule suggestion here.