About This HTML Issue
Why This Happens
In HTML, certain attributes are boolean and can appear without a value (e.g., disabled, required). The href attribute is not one of them — it expects a valid URL, path, or fragment identifier as its value. When a validator encounters href with no value or an empty value, it raises a warning because the attribute is being used in a way that doesn’t conform to the specification.
Writing <a href> produces a valueless attribute. Writing <a href=""> produces an attribute whose value is an empty string, which resolves to the current page’s URL per the rules of relative URL resolution. Both forms are problematic:
-
hrefwithout a value: The HTML spec requireshrefto contain a valid URL. A valueless attribute is ambiguous and was actively dropped by IE7, meaning the element would lose its link behavior entirely in that browser. -
href="": While technically parsed as a relative URL pointing to the current document, this is almost never the developer’s intention. It causes the page to reload or scroll to the top when clicked, which is confusing for users and harmful for accessibility.
The Impact
-
Accessibility: Screen readers rely on the
hrefattribute to identify an<a>element as an interactive link. A missing or empty value creates confusion — the screen reader may announce it as a link but provide no destination, or may not treat it as a link at all. - Browser compatibility: As the validator message notes, IE7 would strip the attribute entirely, meaning the element lost its link semantics and styling. While IE7 is no longer in common use, valueless attributes can still cause edge-case issues in parsers, crawlers, and automated tools.
- Standards compliance: Valid HTML ensures consistent rendering and behavior across browsers, assistive technologies, and search engine crawlers.
How to Fix It
The fix depends on your intent:
-
If the element should link somewhere, provide a real URL:
href="https://example.com"orhref="/about". -
If the element is a placeholder link (e.g., during development or for JavaScript-driven actions), use
href="#"and prevent the default navigation with JavaScript. -
If the element doesn’t need to be a link at all, use a
<button>for interactive actions or a<span>for non-interactive text. This is often the most semantically correct choice.
Examples
❌ Incorrect: href without a value
<a href>Click here</a>
This triggers the validation warning. The attribute has no value, which is invalid for href.
❌ Incorrect: href with an empty string
<a href="">Click here</a>
This resolves to the current page URL, likely causing an unintended page reload.
✅ Correct: Provide a real URL
<a href="https://example.com">Visit Example</a>
✅ Correct: Use a fragment as a placeholder
<a href="#" onclick="doSomething(); return false;">Perform action</a>
The return false prevents the page from scrolling to the top. A better modern approach uses event.preventDefault():
<a href="#" id="action-link">Perform action</a>
<script>
document.getElementById("action-link").addEventListener("click", function (e) {
e.preventDefault();
doSomething();
});
</script>
✅ Correct: Use a <button> for actions
If the element triggers a JavaScript action rather than navigating somewhere, a <button> is the most semantically appropriate choice:
<button type="button" onclick="doSomething();">Perform action</button>
Buttons are natively focusable, keyboard-accessible, and clearly communicate interactive intent to assistive technologies — no href needed.
✅ Correct: Use a <span> for non-interactive text
If the element is purely visual and shouldn’t be interactive at all:
<span class="label">Not a link</span>
This removes any expectation of interactivity for both the browser and the user.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.