HTML Guide

Set a non-empty list of valid ID references in the aria-labelledby attribute on the <a> element, or remove the attribute and provide an accessible name another way.

The aria-labelledby attribute takes an IDREFS value: a space-separated list of one or more element IDs, each of which must be non-empty, exist in the document, and be unique. An empty value ("") violates the ARIA/HTML constraints and triggers the validator error. On an <a> element, aria-labelledby supplies the accessible name for the link by concatenating the text from the referenced elements. If you don’t have IDs to reference, use visible link text or aria-label. Avoid leaving aria-labelledby empty (common with templating when a variable is blank); either omit the attribute entirely or populate it with valid IDs. Remember that aria-labelledby overrides other naming methods, so an empty or broken reference can result in a link with no accessible name.

HTML examples

• Invalid (what triggers the error)

  <a href="/report" aria-labelledby=""></a>

• Fixed by referencing an existing element with a valid id

  <a href="/report" aria-labelledby="report-link-text">
  <svg aria-hidden="true" viewBox="0 0 16 16"></svg>
  </a>
  <span id="report-link-text">View report</span>

• Fixed with multiple IDs (space-separated)

  <a href="/apples" aria-labelledby="prefix apples-text">
  <svg aria-hidden="true" viewBox="0 0 16 16"></svg>
  </a>
  <span id="prefix">Learn more: </span>
  <span id="apples-text">Apples</span>

• Fixed by using visible text content (no ARIA needed)

  <a href="/report">View report</a>

• Fixed by using aria-label for an icon-only link (when no separate label element exists)

  <a href="/search" aria-label="Search">
  <svg aria-hidden="true" viewBox="0 0 16 16"></svg>
  </a>

Empty aria-labelledby on the <svg> is invalid because it must reference one or more existing IDs with non-empty, non-whitespace text.

The aria-labelledby attribute takes a space-separated list of element IDs (IDREFS). Each ID must exist in the document and point to elements that provide an accessible name. On <svg>, this is commonly a <title> or other visible text element. If you have no label to reference, either remove aria-labelledby or provide a valid referenced element. Alternatively, use the aria-label attribute with a text string. Do not leave aria-labelledby empty, and ensure IDs are unique and match exactly (case-sensitive). Examples: reference a <title> with an id, or use aria-label directly on the <svg>.

HTML Examples

Example showing the issue

<svg role="img" aria-labelledby="">
  <use href="#icon-star"></use>
</svg>

Fixed examples

<!-- Option A: Reference a title by ID -->

<svg role="img" aria-labelledby="starTitle">
  <title id="starTitle">Favorite</title>
  <use href="#icon-star"></use>
</svg>

<!-- Option B: Use aria-label instead (no referenced IDs needed) -->

<svg role="img" aria-label="Favorite">
  <use href="#icon-star"></use>
</svg>

<!-- Option C: Decorative icon (no name) -->

<svg aria-hidden="true" focusable="false">
  <use href="#icon-star"></use>
</svg>

An empty string is not a valid value for the autocomplete attribute on an input element.

The autocomplete attribute controls whether the browser can autofill input values, and it requires a valid, non-empty value according to the HTML specification. Acceptable values are on, off, or specific autocomplete tokens such as name, email, username, etc. Leaving it empty, like autocomplete="", causes validation errors.

Incorrect example:

<input type="text" name="username" autocomplete="">

Correct examples: Enable browser autocomplete:

<input type="text" name="username" autocomplete="on">

Disable browser autocomplete:

<input type="text" name="username" autocomplete="off">

Use a specific token (recommended for forms that collect particular data):

<input type="email" name="useremail" autocomplete="email">

The for attribute on a label element can’t be an empty string. This attribute is intended to specify which form element a label is associated with, and it must reference the ID of an existing form element. An empty string is neither a valid ID nor a meaningful association.

Explanation

• Invalid HTML: <label for=""></label>

The for attribute expects the value to be the ID of a form element, such as an input, textarea, select, etc.

How to Fix

1. Identify the Form Element: Find the form element (input, textarea, select, etc.) that the label is supposed to be associated with.
2. Assign an ID to the Form Element: Ensure the form element has a unique ID.
3. Modify the Label’s for Attribute: Set the for attribute of the label to match the ID of the form element.

Example

Before Fix

<form>
    <label for="">Username:</label>
    <input type="text" name="username">
</form>

After Fix

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
</form>

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>

Spaces in the URL fragment are invalid; encode them or remove them (e.g., use %20 or hyphens/underscores).

The href attribute must contain a valid URL. When using a fragment identifier (the part after #), it must follow URL syntax rules: no unescaped spaces. Fragments usually reference an element’s id. An element’s id must be unique and is case-sensitive; while spaces aren’t allowed in id values, many authors accidentally mirror text with spaces in the fragment. Use hyphens or underscores in ids and match the fragment, or percent-encode reserved characters. Prefer readable, dash-separated ids for accessibility and shareable links.

For example, instead of href=”#My Section”, use href=”#my-section” and set id=”my-section” on the target. If you must preserve spaces in a generated URL, encode them as %20, but it’s better to avoid spaces entirely in ids.

HTML Examples

Invalid: reproduces the validator error

<!doctype html>
<html lang="en">
  <head>
    <title>Fragment with space</title>
  </head>
  <body>
    <a href="#My Section">Go to section</a>

    <h2 id="My Section">My Section</h2>
  </body>
</html>

Fixed: use a valid fragment and id

<!doctype html>
<html lang="en">
  <head>
    <title>Valid fragment</title>
  </head>
  <body>
    <a href="#my-section">Go to section</a>

    <h2 id="my-section">My Section</h2>
  </body>
</html>

Alternatively, encoding the space also passes validation, though less ideal as the id would be invalid because it contains spaces:

<a href="#My%20Section">Go to section</a>
<h2 id="My Section">My Section</h2>

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>

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 id attribute is used to identify a single element within a document, it’s not required, but if used it must be unique, and must not be an empty string.

IDs for HTML elements can’t be blank.

For rel="preload" and as="image" only, the imagesizes attribute is a sizes attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.

For rel="preload" and as="image" only, the imagesrcset attribute is a sourceset attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.

The max attribute on an <input> element does not accept an empty string.

The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.

Remove the empty maxlength value and provide a non-negative integer or omit the attribute entirely.

Explanation

The maxlength attribute on an input element must be a valid non-negative integer per the HTML specification. An empty string ("") is invalid and triggers the validator error.

• Valid: a decimal integer like 0, 10, 255.
• Invalid: empty string, negative numbers, non-numeric strings, or whitespace.
  If no maximum length is needed, omit maxlength instead of leaving it empty.
  Note that maxlength applies to text-entry controls such as type="text", search, url, tel, email, and password. For other types (e.g., number, date), maxlength is ignored and should not be used.

Examples

Correct: set an explicit maximum

<input type="text" name="username" maxlength="20">

Correct: no maximum, omit the attribute

<input type="text" name="comment">

Incorrect: empty string (validator error)

<input type="text" name="username" maxlength="">

Remove the empty maxlength and provide a valid non‑negative integer, or omit maxlength entirely.

The maxlength attribute limits the number of characters a user can enter. It must be a valid non-negative integer (0, 1, 2, …). An empty string, whitespace, or non-numeric value fails validation. When maxlength is omitted, the length is unlimited. When set to 0, no characters can be entered. The value applies to the textarea element itself, not its content.

Common fixes:

• Set maxlength to a concrete number like 200.
• If you don’t need a limit, remove the attribute.
• Ensure templating doesn’t output an empty attribute (e.g., maxlength="").

HTML Examples

Invalid example (reproduces the validator error)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Invalid maxlength</title>
</head>
<body>
  <form>
    <label for="msg">Message</label>
    <textarea id="msg" name="message" maxlength=""></textarea>
  </form>
</body>
</html>

Fixed example (valid integer or omit attribute)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Valid maxlength</title>
</head>
<body>
  <form>
    <label for="msg">Message (max 200 chars)</label>
    <textarea id="msg" name="message" maxlength="200"></textarea>
  </form>
</body>
</html>

An empty string for the min attribute on an input element is invalid; it must be a valid number.

The min attribute specifies the minimum value an <input> element can accept when using types such as number, range, date, or datetime-local. According to the HTML specification, the value for min must be a valid floating point number (or a valid date/time string for date inputs). Setting min="" (an empty string) is invalid and will trigger validator errors.

HTML examples

Invalid usage:

<input type="number" min="" max="10">

Valid usage (set min to a specific number, or omit it if no minimum is required):

<input type="number" min="0" max="10">

or, if no minimum restriction is needed:

<input type="number" max="10">

Always provide a valid number for min or remove the attribute entirely if a minimum is not needed.

Empty name attributes on <a> are invalid; an anchor’s name/id must be a non-empty unique identifier.

Historically, the name attribute on <a> was used to create fragment targets (e.g., <a name="top"></a>). In HTML5/living standard, fragment navigation should use the id attribute instead. The name attribute on <a> is obsolete for this purpose, and an empty string is never allowed for identifiers.

Use id with a non-empty value to create link targets, and point to them with href="#idValue". If you keep name for legacy reasons, it must still be non-empty and match the HTML syntax for valid IDs. Avoid adding empty attributes like name="" or id="". Also ensure uniqueness of each id in the document.

HTML Examples

Example causing the validator error

<!doctype html>
<html lang="en">
  <head>
    <title>Anchor name error</title>
  </head>
  <body>
    <a name=""></a>
    <a href="#"></a>
  </body>
</html>

Corrected example using id (recommended)

<!doctype html>
<html lang="en">
  <head>
    <title>Anchor id fix</title>
  </head>
  <body>
    <a id="top"></a>
    <a href="#top">Back to top</a>
  </body>
</html>

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 name attribute is required for all input elements.

An empty value for the poster attribute on a video element is not valid; the attribute must contain a non-empty URL.

The poster attribute specifies an image to show before the user plays the video. According to the HTML living standard and W3C specifications, if the poster attribute is present, it must have a non-empty value that is a valid URL to an image resource. Using poster="" is invalid and triggers validator errors.

If you do not want to show any poster image, simply omit the poster attribute altogether. If you want to show an image, provide a valid image URL as the value.

Valid examples:

Video without a poster (omit the attribute):

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Video with a poster image:

<video controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Invalid (causes error):

<video controls poster="">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Always either use a valid URL in the poster attribute or omit it entirely to ensure HTML validity.