The element “input” must not appear as a descendant of the “a” element.

The HTML living standard defines a content model for the <a> element that explicitly excludes interactive content from appearing as descendants. Interactive content includes elements like <button>, <input>, <select>, <textarea>, and other <a> elements. When you nest an <input> inside a link, browsers face an ambiguous situation: should a click activate the link or interact with the input? Different browsers may handle this differently, leading to inconsistent behavior.

This restriction also matters for accessibility. Screen readers and other assistive technologies rely on a clear, predictable DOM structure. Nesting interactive elements creates confusion for users navigating with keyboards or screen readers, as the focus order and interaction model become unclear. A user tabbing through the page might not understand that an input lives inside a link, or they might be unable to interact with one of the two elements.

Common scenarios where this issue arises include wrapping a search input in a link to make the entire area clickable, or placing a checkbox inside a link to combine selection with navigation. In all cases, the solution is to separate the interactive elements.

Examples

❌ Incorrect: <input> inside an <a> element

<a href="/search">
  <input type="text" placeholder="Search...">
</a>

This triggers the validation error because <input> is interactive content nested inside <a>.

✅ Correct: Separate the elements

<form action="/search">
  <input type="text" placeholder="Search...">
  <button type="submit">Search</button>
</form>

If the goal is to navigate to a search page, use a <form> with an action attribute instead of wrapping the input in a link.

❌ Incorrect: Checkbox inside a link

<a href="/settings">
  <input type="checkbox" id="notify"> Enable notifications
</a>

✅ Correct: Place the link and input as siblings

<label>
  <input type="checkbox" id="notify"> Enable notifications
</label>
<a href="/settings">Go to settings</a>

✅ Correct: Use styling to achieve a clickable area

If you want a visually combined area where clicking navigates somewhere, avoid using an <input> altogether and style the link instead:

<a href="/search" class="search-link">
  <span>Search...</span>
</a>

Alternatively, if you need both a link and an input near each other, use CSS layout to position them visually together while keeping them as separate elements in the markup:

<div class="search-bar">
  <input type="text" placeholder="Search...">
  <a href="/search">Go</a>
</div>

❌ Incorrect: Hidden input inside a link

Even hidden or non-visible inputs trigger this error:

<a href="/page">
  <input type="hidden" name="ref" value="home">
  Click here
</a>

✅ Correct: Move the hidden input outside the link

<input type="hidden" name="ref" value="home">
<a href="/page">Click here</a>

If the hidden input is meant to pass data during navigation, consider using query parameters in the link’s href instead:

<a href="/page?ref=home">Click here</a>

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing