HTML Guide
The issue here is related to the encoding of URLs. In HTML and URLs, special characters that have specific meanings need to be encoded to ensure that the URL is interpreted correctly. This process converts characters to their percent-encoded form, where a character is replaced by % followed by two hexadecimal digits representing the ASCII code of the character.
Explanation:
-
The
actionattribute of a<form>element specifies where to send the form-data when a form is submitted. -
If the URL contains special characters (e.g., spaces, <, >, #, %, etc.), they need to be percent-encoded. For instance, a space character is encoded as
%20. -
In this case, the validator is complaining about a
%sign that is not correctly followed by two hexadecimal digits, which typically happens if the URL was not properly encoded.
How to Fix:
- Check the URL: Look for any raw special characters that need encoding.
- Correctly Encode the URL: Use online tools or libraries that provide URL encoding support to ensure that the URL is correctly percent-encoded.
Example:
Suppose you have the following incorrect form tag:
<form action="submit%data.html">
<!-- form elements here -->
</form>
The % in submit%data.html should be followed by two hexadecimal digits. If %data was intended to be a part of the URL, it should be encoded properly. Here is how to correct it:
<form action="submit%25data.html">
<!-- form elements here -->
</form>
If % should represent data, replace % with %25, which is the percent-encoded form of %. Always verify each special character is correctly encoded. Using this approach ensures that the URL in the action attribute is valid according to HTML standards.
Related W3C validator issues
The action attribute on a <form> element is not a required attribute, but if specified, must be a valid, non-empty URL. For example:
<form action="register.php">
</form>There is no attribute validate on the <form> element. Perhaps you meant novalidate?
If the novalidate attribute is present on a <form>, indicates that the form is not to be validated during submission.
For example, while this form has a required attribute on its input, it won’t be enforced because form validation has been disabled using novalidate:
<form novalidate>
<label>City: <input required name="city"></label>
<input type="submit" />
</form>The href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
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>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.
An empty value for the name attribute on the form element is invalid and should be removed or replaced with a valid non-empty string.
The name attribute on a form element provides a way to reference forms via scripts and images, and it must not be empty. According to the HTML standard, if the name attribute is present, it must have a non-empty value. An empty string is considered invalid and will trigger HTML validator errors.
Invalid example:
<form name="">
<!-- form elements here -->
</form>How to fix:
- Remove the empty name attribute if you don’t need it.
- Replace the empty value with a meaningful, unique name if you require it for scripting or identification.
Valid examples:
<form>
<!-- form elements here -->
</form><form name="registrationForm">
<!-- form elements here -->
</form>Avoid using empty attribute values, as they do not provide any benefit and result in validation errors.
The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
The accept attribute may be specified to provide browsers with a hint of what file types will be accepted on an <input> element. It expects a comma-separated list of allowed file types. Refer to the list of media types to check the accepted tokens. In this example, the first line is invalid while the second is valid:
<input name='file' type='file' accept='doc, docx, pdf' />
<input name='file' type='file' accept='text/doc, text/docx, application/pdf' />The href attribute in the a tag uses an invalid character, as > is not allowed in URL fragments.
According to the HTML standard and URL syntax, fragment identifiers (the part after #) can only contain certain characters. The > character is not permitted and must be removed or percent-encoded. If the > is unintentional, simply omit it; if it must be included as part of the fragment, encode it as %3E.
Original HTML (invalid):
<a href="/page.php>">Read more</a>Corrected HTML (if > should not be present):
<a href="/page.php">Read more</a>Corrected HTML (if > is required in fragment, encode it):
<a href="/page.php%3E">Read more</a>