Linter Rule: Require `href` attribute on `<a>` tags

Rule: html-anchor-require-href

Description

An <a> element that has an href attribute represents a hyperlink (a hypertext anchor) labeled by its contents. Links should go somewhere. If you want to perform an action without navigating the user to a new URL, use a <button> instead.

Rationale

Anchor tags without an href attribute are not focusable via keyboard navigation and are not visible to screen readers. This makes them inaccessible to users who rely on assistive technologies.

Examples

✅ Good

erb

<a href="https://alink.com">I'm a real link</a>

🚫 Bad

erb

<a>Go to Page</a>Add an `href` attribute to `<a>` to ensure it is focusable and accessible. Links should navigate somewhere. If you need a clickable element without navigation, use a `<button>` instead. (html-anchor-require-href)

erb

<a href="#">Go to Page</a>Avoid `href="#"` on `<a>`. `href="#"` does not navigate anywhere, scrolls the page to the top, and adds `#` to the URL. If you need a clickable element without navigation, use a `<button>` instead. (html-anchor-require-href)

erb

<a data-action="click->doSomething">I'm a fake link</a>Add an `href` attribute to `<a>` to ensure it is focusable and accessible. Links should navigate somewhere. If you need a clickable element without navigation, use a `<button>` instead. (html-anchor-require-href)

Linter Rule: Require href attribute on <a> tags ​

Description ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​