HTML Guide
An <a> element has been found in an invalid place within a <table> element.
For example, the following code would cause this issue:
<table>
<tr>
<a href="#">link</a>
</tr>
</table>
Instead, the <a> element should be inside a <td> element, as a <tr> can’t hold content directly:
<table>
<tr>
<td>
<a href="#">link</a>
</td>
</tr>
</table>Last reviewed: October 27, 2022
Related W3C validator issues
Table rows on the same <table> element must have the same number of columns, which comes determined by the first tr row.
For example, this table is wrong as the first row defines 2 columns, while the second row tries to use 4 columns:
<table>
<tr>
<td>Liza</td>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</table>A <table> contains a <tr> row that has less <td> columns than the column count established by the first row. Check the table to ensure all rows have the same number of columns.
For example, in the following table, the first <tr> row defines that it’s 2 columns wide, but the second <tr> row tries to use only 1 column:
<table>
<!-- This first row sets the table as 2 columns wide -->
<tr>
<td>First</td>
<td>Second</td>
</tr>
<!-- This second row has only 1 column -->
<tr>
<td>Wrong</td>
</tr>
</table>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.
The <table> element does not accept a height attribute. Use CSS instead.
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 validator error occurs when an element such as an a, button, or custom widget includes aria-controls="" (empty) or whitespace-only. The aria-controls attribute takes one or more space-separated id values (IDREFS). Each referenced id must exist exactly once in the same document. Leaving it empty violates the ARIA and HTML requirements and provides no usable relationship for assistive technologies.
Why this matters:
- Accessibility: Screen readers rely on aria-controls to announce relationships between controls and controlled regions (e.g., a toggle and its panel). An empty value misleads AT or adds noise.
- Standards compliance: HTML and ARIA require at least one non-whitespace id. Empty values cause validation failures.
- Robustness: Incorrect references can confuse scripts and future maintainers, and break behavior when IDs change.
How to fix it:
- Only add aria-controls when the element truly controls another region (show/hide, sort, update).
- Ensure the controlled element has a unique id.
- Set aria-controls to that id (or multiple space-separated IDs).
- Keep the reference in sync if IDs change.
- If nothing is controlled, remove aria-controls entirely.
Examples
Invalid: empty aria-controls (triggers the error)
<a href="#" aria-controls="">Toggle details</a>Valid: control a single region
<div id="details-panel" hidden>
Some details...
</div>
<a href="#details-panel" aria-controls="details-panel">Toggle details</a>Valid: control multiple regions (space-separated IDs)
<section id="filters" hidden>...</section>
<section id="results" hidden>...</section>
<button type="button" aria-controls="filters results">Show filters and results</button>Valid: remove when not needed
<a href="#">Toggle details</a>Minimal complete document with proper usage
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aria-controls Example</title>
</head>
<body>
<button type="button" aria-controls="info" aria-expanded="false">Toggle info</button>
<div id="info" hidden>
Extra information.
</div>
<script>
const btn = document.querySelector('button');
const panel = document.getElementById(btn.getAttribute('aria-controls'));
btn.addEventListener('click', () => {
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', String(!expanded));
panel.hidden = expanded;
});
</script>
</body>
</html>Tips:
- Use aria-controls for functional relationships (control affects content), not just visual proximity.
- Combine with aria-expanded when toggling visibility to convey state.
- Verify that every id in aria-controls exists and is unique; avoid dynamic mismatches created by templating or component reuse.
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.