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, v-else-if, or v-else 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.
noObsoleteAttributes	Disallow obsolete attributes on HTML elements.
noObsoleteTags	Disallow obsolete HTML elements.
noSvelteAtDebugTags	Disallow the use of Svelte’s {@debug} tag.
noSvelteAtHtmlTags	Disallow the use of Svelte’s {@html} tag.
noSvelteBindValueOnCheckableInputs	Disallow bind:value on checkbox and radio inputs.
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.
noVueChildContent	Disallow content inside elements whose content is replaced by v-html or v-text.
noVueDeprecatedFunctionalTemplate	Disallow the deprecated functional attribute on the <template> of a Vue component.
noVueDeprecatedHtmlElementIs	Disallow the is attribute on HTML elements in Vue templates.
noVueDeprecatedInlineTemplate	Disallow the inline-template attribute on Vue components.
noVueDeprecatedRouterLinkTagProp	Disallow the tag prop on RouterLink.
noVueDeprecatedScopeAttribute	Disallow the scope attribute on <template> elements in Vue templates.
noVueDeprecatedSlotAttribute	Disallow the deprecated slot attribute in Vue templates.
noVueDeprecatedSlotScope	Disallow the deprecated slot-scope attribute in Vue templates.
noVueDeprecatedVBindSync	Disallow the .sync modifier on Vue v-bind directives.
noVueDeprecatedVOnNativeModifier	Disallow the .native modifier on Vue’s v-on directive.
noVueLoneTemplate	Disallow <template> elements in a Vue template that don’t use v-if, v-else-if, v-else, v-for, or v-slot.
noVueRestrictedVOn	Disallow configured event listeners in v-on directives.
noVueRootVIf	Disallow v-if on the root element of a Vue component template.
noVueTemplateKey	Disallow the key attribute on <template> elements in Vue.
noVueTemplateShadow	Disallow template variables that reuse the name of a variable from an outer scope.
noVueTextareaMustache	Disallow {{ }} text interpolation inside a Vue <textarea>.
noVueUndeclaredDirectives	Disallow custom Vue directives that are not declared.
noVueUndeclaredSlots	Disallow <slot> elements whose slot isn’t declared in the component’s types.
noVueUnusedRefs	Disallow template refs that are never used.
noVueUselessTemplateAttributes	Disallow attributes and directives that have no effect on <template> elements.
noVueUselessVBind	Disallow v-bind directives whose value is a fixed string.
noVueVForTemplateKeyOnChild	Disallow placing the key of a <template v-for> on its child elements.
noVueVHtml	Disallow the use of Vue’s v-html directive.
noVueVText	Disallow the use of Vue’s v-text directive.
noVueVTextVHtmlOnComponent	Disallow v-text and v-html on components.
useAstroClientOnlyDirectiveValue	Require a value for Astro’s client:only directive.
useConsistentBlockLang	Enforce which languages the top-level blocks of Vue and Svelte components use.
useConsistentUnicodeBom	Require or disallow a Unicode byte order mark at the beginning of a file.
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.
useTailwindVariablesShorthand	Enforce the shorthand syntax for CSS variables in Tailwind CSS classes.
useVueBlockOrder	Enforce the order of the top-level blocks in Vue components.
useVueComponentIs	Require <component> elements to bind the is attribute.
useVueConsistentBooleanPropStyle	Enforce a consistent style for component props set to true.
useVueConsistentEventHyphenation	Enforce a consistent hyphenation style for event names in v-on directives on custom components.
useVueConsistentVForDelimiter	Enforce a consistent delimiter between the item and the list in v-for directives.
useVueConsistentVSlotStyle	Enforce a consistent style for v-slot in Vue templates.
useVueSlotNameCasing	Enforce a consistent casing for the names of Vue slots.
useVueToggleInsideTransition	Require the element inside a Vue <Transition> to be shown and hidden with v-if or v-show.
useVueVModel	Enforce v-model instead of a prop binding paired with an update: listener that writes the value back.
useVueVOnExact	Enforce the .exact modifier on v-on directives when another listener for the same event needs more modifier keys.
useVueValidAttributeName	Require valid attribute names in Vue templates.
useVueValidVIs	Enforce valid v-is Vue directives.
useVueValidVMemo	Enforce valid v-memo Vue directives.
useVueValidVModel	Enforce valid v-model directives.
useVueValidVShow	Enforce valid v-show directives.
useVueValidVSlot	Enforce valid v-slot directives in Vue templates.

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.