Verificação HTML: The element “textarea” must not appear as a descendant of the “a” element.

Sobre este problema HTML

The <a> element is classified as interactive content, and the HTML spec explicitly states that interactive content must not be nested inside other interactive content. A <textarea> is a form control that accepts user input—clicking, focusing, typing, and selecting text within it. When it’s wrapped in a link, the browser faces a conflict: should a click focus the textarea or follow the link? Different browsers may resolve this differently, leading to inconsistent behavior.

Beyond browser inconsistency, this nesting creates serious accessibility problems. Screen readers and other assistive technologies rely on a clear, predictable document structure. When a form control is buried inside a link, the roles and interaction models overlap, making it confusing or even impossible for users relying on keyboard navigation or screen readers to interact with either element properly.

The fix depends on what you’re trying to achieve. If the <textarea> and the link are logically separate, simply move them to be siblings rather than nesting one inside the other. If you need them to appear visually grouped, use a wrapper <div> or another non-interactive container element instead.

Examples

❌ Invalid: `<textarea>` inside an `<a>` element

<a href="/comments">
  <textarea name="comment" rows="4" cols="40"></textarea>
</a>

This triggers the validation error because the <textarea> is a descendant of the <a> element.

✅ Valid: `<textarea>` and `<a>` as siblings

<div>
  <textarea name="comment" rows="4" cols="40"></textarea>
  <a href="/comments">View all comments</a>
</div>

Here, both elements live side by side inside a neutral <div>, avoiding any nesting conflict.

✅ Valid: `<textarea>` inside a `<form>` with a separate link

<form action="/submit-comment" method="post">
  <label for="comment">Your comment:</label>
  <textarea id="comment" name="comment" rows="4" cols="40"></textarea>
  <button type="submit">Submit</button>
</form>
<a href="/comments">View all comments</a>

This is the most semantically correct approach when the textarea is part of a form—keep the form controls in a <form> and place any navigation links outside of it.

Other interactive elements to watch for

The same rule applies to other interactive content inside <a> elements. You also cannot nest <button>, <input>, <select>, <details>, or another <a> inside a link. If the validator reports a similar error for any of these elements, the fix follows the same principle: move the interactive element out of the anchor.