HTML Guide

A button element, or an element with the role=button attribute, is not allowed to be nested inside an <a> element.

A button element cannot contain a descendant element with the attribute tabindex.

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>

The tabindex attribute expects a valid integer value, not an empty string.

This attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key) and determine their relative ordering for sequential focus navigation.

This attribute accepts an integer value, where:

• A negative value means the element is not reachable via sequential keyboard navigation.
• A value of 0 means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values. The focus navigation order of these elements is defined by their order in the document source.
• A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" is focused before tabindex="5" and tabindex="0", but after tabindex="3".

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>

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://).

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.