Skip to content

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 go somewhere, you probably want to 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 go somewhere, you probably want to use a `<button>` instead. (html-anchor-require-href)

References

Released under the MIT License.