HTML Guide for a
A button element, or an element with the role=button attribute, is not allowed to be nested inside an <a> element.
An <a> element cannot contain a descendant element with the attribute tabindex.
Spaces are not permitted in the href value for phone links; the phone number must be a continuous string without spaces or slashes.
The href attribute of an anchor (<a>) element defines the link’s destination. For phone numbers, the proper URI scheme is tel:, not callto:. According to the HTML standard and the WHATWG Living Standard, the phone number should contain only digits and may use plus (+) or hyphen (-) characters for formatting, but it should not include spaces or slashes.
Incorrect HTML:
<a href="callto:07142/ 12 34 5">Call us</a>Correct HTML:
<a href="tel:0714212345">Call us</a>With country code and optional formatting:
<a href="tel:+49714212345">Call us</a>For best compatibility and validation, always use the tel: scheme and ensure the phone number string contains only allowed characters.
The href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
The pipe character | is not permitted in the query component of a URL in the href attribute of an a element.
According to the WHATWG and W3C HTML specifications, URLs in attributes such as href must be valid and properly encoded. The pipe character | is not a valid character in the query string of a URL unless it is percent-encoded as %7C. Failing to encode it will cause validation errors. This is especially important for interoperability and security across browsers and user agents.
Incorrect example (invalid href with pipe):
<a href="https://example.com/search?q=test|demo">Invalid link</a>Correct example (pipe character encoded):
<a href="https://example.com/search?q=test%7Cdemo">Valid link</a>Always encode special characters such as | in URLs used within HTML attributes to ensure your documents validate and behave consistently.
Space characters are not permitted in the value of the href attribute; they must be properly percent-encoded.
The href attribute specifies a URL, and URLs must follow specific syntax rules defined by RFC 3986. Spaces and some other characters are considered illegal in URLs. To include a space in the URL, use the percent escape sequence %20 in place of the space character.
Incorrect example with an illegal space in the query string:
<a href="search.html?q=my search">Search for 'my search'</a>Correct example using percent-encoding for the space:
<a href="search.html?q=my%20search">Search for 'my search'</a>Replace all spaces in URLs within href attributes with %20 to ensure W3C validation and proper browser behavior.
Square brackets ([, ]) are not allowed unescaped in the query part of an href URL value.
The href attribute in the <a> element must contain a valid URL. According to the URL standard, certain characters, including square brackets, are not permitted directly in the query component unless percent-encoded. Using unescaped square brackets in the URL can cause validation errors and unexpected behavior in browsers.
To include a square bracket in the query string, use percent encoding:
- [ encodes to %5B
- ] encodes to %5D
Incorrect usage:
<a href="search.html?q=[value]">Search</a>Correct usage:
<a href="search.html?q=%5Bvalue%5D">Search</a>This ensures the URL is valid and compliant with HTML standards.
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>The target attribute on <a> elements can’t be blank.
This attribute defines the browsing context for links, that is, where should the linked documents be opened. This was used extensively on the now deprecated <frame> element, so you could give the name of the frame to open the document in, but is now more used to force links to open in a separate tab or window using target="_blank". Another option is using a name, so the new browsing context can be referred to on subsequent clicks on links with the same target.
For example, this will force the links to open on a new tab:
<a href="https://example.com" target="_blank">will open a blank tab</a>Empty type attributes are invalid on the <a> element; you must either remove the type attribute or provide a valid MIME type value.
The type attribute on an <a> (anchor) element specifies the MIME type of the linked resource. According to the WHATWG HTML specification and W3C validator, the value of the type attribute cannot be an empty string. It should be a valid MIME type, such as application/pdf or text/html. If you do not know the MIME type or it’s not relevant, you should omit the attribute.
Incorrect HTML example (causes validation error):
<a href="document.pdf" type="">Download PDF</a>Correct HTML example (remove the invalid attribute):
<a href="document.pdf">Download PDF</a>Correct HTML example (provide a valid MIME type):
<a href="document.pdf" type="application/pdf">Download PDF</a>If the type is unknown or unnecessary, leaving it out is preferred to using an empty value.
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 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://).
Curly braces {} are not allowed in the href attribute value of an <a> element because they are not permitted in valid URLs.
According to the HTML standard and URL specification, certain characters—including { and }—must be percent-encoded in URLs to avoid validation errors and ensure proper browser handling. If you need to include a curly brace in a URL, use percent-encoding: { is %7B and } is %7D.
Incorrect HTML:
<a href="http://example.com/?i=470722{0}">Link</a>Correct HTML with percent-encoding:
<a href="http://example.com/?i=470722%7B0%7D">Link</a>Resulting link:
http://example.com/?i=470722%7B0%7D
Only use plain { or } if you are generating URLs client-side (for example, as template placeholders in JavaScript). To validate properly, always encode or remove illegal characters in attribute values.
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 attribute value in the href on the <a> element contains invalid characters.
HTML links require a valid URL as the value of the href attribute. Brackets ([, ]) are not allowed in attribute values.
Example of invalid usage:
<a href="mailto:[user@example.com]">Email Us</a>Correct usage:
<a href="mailto:user@example.com">Email Us</a>If you are using a template variable to create the links, be sure the template engine properly outputs a valid address in the final HTML.
Example using pseudocode for a templating engine (replace with your syntax as needed):
<a href="mailto:{{ address }}">Email Us</a>Correct, fully rendered HTML after the template variable is replaced:
<a href="mailto:user@example.com">Email Us</a>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 W3C Validator issue you’re seeing is because the ping attribute on the <a> (anchor) element is supposed to contain a space-separated list of URLs to which, when the hyperlink is activated, the browser will send ping requests. The ping attribute must only contain proper “http” or “https” URLs, that is, relative URLs are not allowed.
Example of Incorrect Code
<a href="https://example.com" ping="/track">Visit Example</a>Examples of Correct Code
-
Proper Ping URL: Ensure the ping URL starts with http or https and is correctly formatted.
<a href="https://example.com" ping="https://example.com/track">Visit Example</a> -
Multiple URLs: If you have multiple URLs, they should be space-separated and each should be a valid URL.
<a href="https://example.com" ping="https://example.com/track https://example.com/another-track">Visit Example</a>
Common Mistakes to Avoid
- Using invalid URL schemes like mailto: or /relative-path.
- Including broken URLs or URLs with protocols other than http or https.
- Incorrectly formatting multiple URLs; they must be space-separated, not comma-separated or otherwise.
Note
The ping property is not effective in Firefox and its usage may be limited due to privacy and security concerns.
The value used in the target property of an <a> element has been identified as a keyword because it starts with an underscore _, but it’s not a valid keyword.
Values starting with an underscore for the target property are used for reserved keywords like _blank, _self, _parent or _top.
The value provided on the type attribute of an a element is not a valid MIME type.
The type attribute expects a MIME type that hints at the linked URL’s format.
The type attribute on <a> elements, when present, gives a hint on the MIME type of the linked resource, for example:
<a href="application/pdf" src="book.pdf">Read our book</a>
<a href="image/jpeg" src="photo.jpeg">See a photo</a>That is, we’re talking about the type of the linked resource, not the type of the <a> element, as it’s sometimes misunderstood. The following example is invalid because button is not a valid MIME type.
<a href="/order.php" type="button">Submit</a>The <a> element requires either a href attribute, or a role attribute.
An </a> end tag has been found to violate nesting rules. <a> tags can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:
<a href="one.html">Page 1
<a href="two.html">Page 2</a>