HTML Guide for encoding
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 action attribute 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.
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.
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>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 src attribute contains square brackets ([ or ]) in the URL’s query string, which are not permitted in valid HTML URLs.
According to the HTML standard, attribute values such as URLs must conform to valid URI syntax. Unencoded square brackets are reserved characters in URI syntax and must be percent-encoded. Specifically, [ should be replaced with %5B and ] with %5D. This ensures the URL is correctly interpreted by browsers and validators. For example, a URL parameter like sort=[asc] should be coded as sort=%5Basc%5D.
Correct HTML Example:
<iframe src="/page?time=%5Btimestamp%5D"></iframe>Always encode reserved characters in URLs when using them in HTML attribute values to ensure W3C compliance.
The src attribute on an element <img> contains a character which is not allowed unless properly encoded.
Special characters needing encoding are: :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =, as well as % itself.
For example, this image tag is incorrect because the src attribute contains an the unallowed characters [ and ]:
<img src="image[00].svg" alt="logo">Instead, this is the properly percent-encoded src attribute, where [ has been replaced with %5B and ] with %5D.
<img src="image%5B00%5D.svg" alt="logo">Space characters are not allowed in src attributes. Instead, they should be converted to %20. In this example, the first line is invalid and the second is valid:
<img src="https://example.com/?s=some term" alt="description" />
<img src="https://example.com/?s=some%20term" alt="description" />The src attribute on an <img> tag is not allowed to contain space characters. You should replace them with “%20“.
The issue arises from the space character in the src attribute value of the script element. In URLs, spaces are not allowed and should be properly encoded to avoid validation errors.
Fix
Replace spaces with %20, which is the URL-encoded representation of a space.
Example
Before:
<script src="https://example.com/media assets/app.js"></script>After:
<script src="https://example.com/media%20assets/app.js"></script>Explanation
In this example, the space between “media” and “assets” in the URL is replaced with %20. This change ensures that the URL conforms to standards and is correctly processed by browsers and servers. Spaces and other special characters in URLs must be encoded to ensure proper formatting and accessibility.
An HTML tag could not be parsed, most probably because of a typo.
A character has been found in the document that is not allowed in the charset encoding being used.
The character encoding declared in the HTML differs from the actual file encoding.
The meta element with charset="utf-8" tells browsers to interpret the document as UTF-8. However, if the file is actually saved in another encoding (such as Windows-1252), validators and browsers will detect a mismatch, leading to this error. To resolve this, you must ensure the file contents and the encoding declaration match.
Recommended: Save your document in UTF-8 encoding to match your meta tag.
Alternatively, if you must use Windows-1252, update charset accordingly.
UTF-8 example (preferred):
<!DOCTYPE html>
<html lang="en">
<head>
<title>UTF-8 Encoding Example</title>
<meta charset="utf-8">
</head>
<body>
<p>This page is encoded in UTF-8.</p>
</body>
</html>Windows-1252 example (not recommended):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Windows-1252 Encoding Example</title>
<meta charset="windows-1252">
</head>
<body>
<p>This page is encoded in Windows-1252.</p>
</body>
</html>Summary:
- Use UTF-8 as your file encoding and declare <meta charset="utf-8">.
- Always make sure the file is saved using the same encoding you declare in the HTML.
The document has been declared to use a windows-1251 charset but the actual contents seems to be utf-8. You should update the charset to that like in this example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">The document could not be properly parsed due to malformed characters. Check the document encoding.
Ensure to escape unescaped angle brackets by using < for < and > for > in HTML.
HTML documents may contain special characters where using the raw characters could lead to errors or misinterpretation by the browser. This is common with angle brackets < and >, which are used for delimiting HTML tags. If these characters are used in textual content or mistakenly typed in an unintended manner, it can cause issues, such as unexpected tag closure or rendering problems.
In your case, the W3C HTML Validator has detected an occurrence of the characters </> which might actually be intended as a simple display of these symbols, but are misinterpreted as an incomplete HTML tag. To prevent such issues, you should escape these characters using HTML character entities like < for the less-than sign and > for the greater-than sign.
Example:
You might want to display code or a message like This is the “<tag>” example in your HTML content. The direct use of < and > can break the HTML content. Instead, use:
<p>This is the "<tag>" example.</p>If you are trying to display the stand-alone sequence </>, you should use:
<p>Saw “</>”</p>These replacements ensure the validator processes your HTML correctly without mistaking your intended display content for HTML coding errors.