HTML Guide for href
Empty href attributes like href or href="" are invalid in HTML and can cause unpredictable behavior.
According to the HTML specification, the href attribute in elements such as the a and link tags must contain a valid URL or fragment reference. An empty or omitted href results in the attribute being ignored or possibly causing compatibility problems, especially in older browsers. If you intend the link to do nothing, use href="#" and prevent the default action with JavaScript, or avoid making it a link if no action is necessary.
Valid HTML for a regular link:
<a href="https://example.com">Visit Example</a>Valid usage for a link that does nothing:
<a href="#" onclick="return false;">Do nothing</a>If the element should not be clickable, use a different tag such as span or button:
<span>Not a link</span>or
<button type="button">Not a link</button>Avoid writing:
<a href>Invalid link</a>or
<a href="">Invalid link</a>as these will produce the validation warning you saw.
An <a> element has been found with an invalid href attribute, containing more than one # adjacent character.
The # is used to separate the fragment part of an URI (typically used to indicate a section within a document). For example, this is a valid link to a URI containing a fragment:
<a href="https://example.com/faqs#pricing">pricing</a>The next example is invalid because it contains two adjacent # characters, so that the fragment part would be #pricing instead of pricing:
<a href="https://example.com/faqs##pricing">pricing</a>The href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
The href attribute of the a element contains an invalid backslash character, which is not permitted in URLs.
According to the WHATWG HTML living standard, the href attribute must contain a valid URL. URLs use forward slashes (/) for path separators, and backslashes are not allowed as they can cause browsers and validators to misinterpret the address. Backslashes often arise when file paths are copied from Windows environments.
Correct Usage:
- Always use forward slashes / in your URLs.
- Remove any backslashes from href values.
Example of incorrect usage:
<a href="images\picture.jpg">View Picture</a>Corrected example:
<a href="images/picture.jpg">View Picture</a>An illegal character has been found for the “href” attribute on the “link” element.
To fix this issue, find the “link” element in question and make sure that the “href” attribute contains a valid URL without any illegal characters.
Here’s some example HTML code of a link element:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>Here is some content...</p>
</body>
</html>In the above example, the link element has a valid href attribute value of styles/main.css. Make sure that your href attribute values don’t contain any illegal characters.
The href attribute on the link element must not be empty.
The href attribute on an a tag expects a valid URL, but only http(s):// was found.
<a> tags can be used to link to an email address using the mailto protocol in the href attribute. Ensure that there is no space in the email address.
<a href="mailto: liza@example.com">This is wrong as it contains an space</a>
<a href="mailto:liza@example.com">This is OK</a>The href attribute on an <a> link contains an invalid character. If you’re trying to link to a phone URL, review the href attribute to remove unallowed characters, as in this example:
<!-- Invalid as it contains a space character -->
<a href="tel: +123456789">call me</a>
<!-- Valid -->
<a href="tel:+123456789">call me</a>The W3C HTML Validator issue you encountered indicates that the URL provided in the href attribute of an anchor (<a>) element is not formatted correctly.
How to Fix the Issue
- Check the Protocol: For a valid URL, make sure that after https: there are two slashes (//).
- Update the URL: Correct the URL format to include the missing slash.
Example of Incorrect HTML
Here is an example of the code that would trigger the validation error:
<a href="https:/example.comf">Example</a>Corrected HTML
Here’s how the corrected code should look:
<a href="https://example.com">Example</a>Summary
Make sure that all URLs within href attributes are correctly formatted with both slashes following the protocol (https:// or http://).
Hash (#) characters can be used in an href attribute to link to a specific part of a document.
For example, if we have this page with several sections, each of them marked with an ID:
<h1>Frequently Asked Questions</h1>
<h2 id="pricing">Pricing</h2>
<p>All about pricing...</p>
<h2 id="terms">Terms</h2>
<p>You can find our terms at...</p>
<h2 id="guarantee">Guarantee</h2>
<p>We offer a guarantee...</p>You can link to a specific part of that document, for example if this page URL is /faqs and you want to link to the Guarantee section you could use:
<a href="/faqs#guarantee">Guarantee</a>Or, if you’re linking from inside the same document, for example in a table of contents, you could just use:
<a href="#guarantee">Guarantee</a>As there can only be one fragment in an URL, the # character should only be used once. The following would be an invalid href:
<a href="/faqs#guarantee#pricing">Bad</a>If needed, the # could be encoded as %23.
Space characters are not allowed in href attributes. Instead, they should be converted to %20. In this example, the first line is invalid and the second is valid:
<a href="https://example.com#some term">invalid</a>
<a href="https://example.com#some%20term">valid</a>The href attribute on an <a> tag contains an space, which is not allowed. Consider replacing space characters with “%20”.
The href attribute on an element <a> contains a character that is not allowed, and should be encoded.
Some typical examples include the pipe character | that should be replaced by its encoded alternative %7C , and the left square bracket [ that needs to be encoded as %5B.
An href attribute on an a element contains an invalid URL that has space characters in the domain.
The domain in a URL cannot contain space characters, for example the following are invalid:
<a href="http://my domain.com">link</a>
<a href="http://my%20domain.com">link</a>The at symbol (@) should be percent-encoded as %40 in order to include it at an href attribute.
The href attribute on an element <link> contains a character that is not allowed, and should be encoded.
Some typical examples include the pipe character | that should be replaced by its encoded alternative %7C , and the left square bracket [ that needs to be encoded as %5B.
The <a> element requires either a href attribute, or a role attribute.
An a element with an href attribute provides a link to a resource, so adding the link role to it is redundant.
When not using semantic HTML for its intended purpose, interactive features must be re-implemented. For example, when role="link" is added to an element, the tab key should enable giving focus to the link and the enter key should execute the link when focused.