HTML Rules

import { Icon } from "@astrojs/starlight/components";

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

• The icon <span class='inline-icon' title="This rule is recommended"><Icon name="approve-check-circle" label="This rule is recommended" /></span> indicates that the rule is part of the recommended rules.
• The icon <span class='inline-icon' title="This rule has a safe fix"><Icon name="seti:config" label="The rule has a safe fix" /></span> indicates that the rule provides a code action (fix) that is safe to apply.
• The icon <span class='inline-icon' title="This rule has an unsafe fix"><Icon name="warning" label="The rule has an unsafe fix" /></span> indicates that the rule provides a code action (fix) that is unsafe to apply.
• The icon <span class='inline-icon' title="This rule is not released yet"><Icon name="moon" label="This rule is not released yet" /></span> indicates that the rule has been implemented and scheduled for the next release.

a11y

Rule name	Description	Properties
noAccessKey	Enforce that the accesskey attribute is not used on any HTML element.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span><span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
noAutofocus	Enforce that the autofocus attribute is not used on elements.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span><span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
noDistractingElements	Enforces that no distracting elements are used.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span><span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
noHeaderScope	The scope prop should be used only on <th> elements.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span><span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
noPositiveTabindex	Prevent the usage of positive integers on tabindex attribute.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span><span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
noRedundantAlt	Enforce img alt prop does not contain the word "image", "picture", or "photo".	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noSvgWithoutTitle	Enforces the usage of the title element for the svg element.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
useAltText	Enforce that all elements that require alternative text have meaningful information to relay back to the end user.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
useAnchorContent	Enforce that anchors have content and that the content is accessible to screen readers.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span><span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useAriaPropsForRole	Enforce that elements with ARIA roles must have all required ARIA attributes for that role.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
useButtonType	Enforces the usage and validity of the attribute type for the element button	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
useHtmlLang	Enforce that html element has lang attribute.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
useIframeTitle	Enforces the usage of the attribute title for the element iframe.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
useMediaCaption	Enforces that audio and video elements must have a track for captions.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
useValidAriaRole	Elements with ARIA roles must use a valid, non-abstract ARIA role.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span><span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useValidLang	Ensure that the attribute passed to the lang attribute is a correct ISO language and/or country.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>

nursery

Rule name	Description	Properties
noAmbiguousAnchorText	Disallow ambiguous anchor descriptions.
noDuplicateAttributes	Disallow duplication of attributes.
noScriptUrl	Disallow javascript: URLs in HTML.
noSyncScripts	Prevent the usage of synchronous scripts.
noVueVIfWithVFor	Disallow using v-if and v-for directives on the same element.
useScopedStyles	Enforce that <style> blocks in Vue SFCs have the scoped attribute and that <style> blocks in Astro components do not have the is:global directive.	<span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useVueConsistentVBindStyle	Enforce a consistent style for v-bind in Vue templates.	<span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useVueConsistentVOnStyle	Enforce a consistent style for v-on in Vue templates.	<span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useVueHyphenatedAttributes	Enforce hyphenated (kebab-case) attribute names in Vue templates.	<span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useVueVForKey	Enforce that elements using v-for also specify a unique key.
useVueValidTemplateRoot	Enforce valid Vue <template> root usage.	<span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useVueValidVBind	Forbids v-bind directives with missing arguments or invalid modifiers.
useVueValidVCloak	Enforce valid v-cloak Vue directives.	<span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useVueValidVElse	Enforce valid usage of v-else.
useVueValidVElseIf	Enforce valid v-else-if directives.
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.	<span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useVueValidVPre	Enforce valid v-pre Vue directives.	<span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>
useVueValidVText	Enforce valid v-text Vue directives.
useVueVapor	Enforce opting in to Vue Vapor mode in <script setup> blocks.	<span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>

Recommended rules

• noAccessKey (Severity: error)
• noAutofocus (Severity: error)
• noDistractingElements (Severity: error)
• noHeaderScope (Severity: error)
• noPositiveTabindex (Severity: error)
• noRedundantAlt (Severity: error)
• noSvgWithoutTitle (Severity: error)
• useAltText (Severity: error)
• useAnchorContent (Severity: error)
• useAriaPropsForRole (Severity: error)
• useButtonType (Severity: error)
• useHtmlLang (Severity: error)
• useIframeTitle (Severity: error)
• useMediaCaption (Severity: error)
• useValidAriaRole (Severity: error)
• useValidLang (Severity: error)

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