HTML Guide for a
The type attribute on <a> elements, when present, gives a hint on the MIME type of the linked resource, for example:
<a href="application/pdf" src="book.pdf">Read our book</a>
<a href="image/jpeg" src="photo.jpeg">See a photo</a>That is, we’re talking about the type of the linked resource, not the type of the <a> element, as it’s sometimes misunderstood. The following example is invalid because button is not a valid MIME type.
<a href="/order.php" type="button">Submit</a>The <a> element requires either a href attribute, or a role attribute.
An </a> end tag has been found to violate nesting rules. <a> tags can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:
<a href="one.html">Page 1
<a href="two.html">Page 2</a>An <a> tag can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:
<a href="one.html">Page 1
<a href="two.html">Page 2</a>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>When you encounter the issue where the <a> element is nested inside an element with role="button", it’s important to understand that this can lead to accessibility conflicts. The role="button" indicates that the element is interactive, similar to a button. Nesting an <a> (which is also an interactive element) inside it can confuse assistive technologies.
How to Fix This Issue
You should either change the structure so that the <a> is not inside the button or change the role of the button to avoid this violation. Here are two common approaches to resolve the issue:
Option 1: Remove the <a> Tag
Replace the <a> tag with an appropriate action directly inside the element with role="button".
Example Before:
<div role="button">
<a href="#link">Click here</a>
</div>Example After:
<div role="button" tabindex="0" onclick="location.href='#link';">
Click here
</div>Here, we use JavaScript to navigate to the link when the div is clicked.
Option 2: Remove the role="button"
If the <a> tag is sufficient by itself, you can remove the role="button" from the surrounding element.
Example Before:
<div role="button">
<a href="#link">Click here</a>
</div>Example After:
<a href="#link">Click here</a>This maintains the desired navigation without creating a conflict between the button and link semantics.
An <a> element (anchor) cannot be nested inside another <a> element.
Nesting anchor elements is invalid HTML according to the W3C and WHATWG specifications. Only phrasing content (such as text, images, or spans) is allowed inside an <a>. Placing an <a> inside another <a> can confuse assistive technology and browsers, leading to unpredictable behavior and accessibility issues.
Incorrect example:
<a href="https://example.com">
Visit <a href="https://another.com">Another Site</a>
</a>Correct usage: Separate the anchor elements so they do not overlap.
<p>
Visit <a href="https://example.com">Example Site</a>
and
<a href="https://another.com">Another Site</a>
</p>Full minimal HTML example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>No Nested Anchors</title>
</head>
<body>
<p>
Check <a href="https://site1.com">Site 1</a> or
<a href="https://site2.com">Site 2</a> for more information.
</p>
</body>
</html>Always ensure anchor tags are not placed inside other anchor tags to maintain valid and accessible HTML.
An a element is not allowed to be nested inside a <button> element, or an element with the role=button attribute.
A button element, or an element with the role=button attribute, is not allowed to be nested inside an <a> element.
The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.
As the iframe is a container that holds an embedded HTML page, it cannot be nested inside an a tag.
An <input> tag can’t be used inside an <a> tag.
A <label> tag can’t be used inside an <a> tag. Consider using other tags like <span>.
A <textarea> tag can’t be used inside an <a> tag.
An a element with an href attribute provides a link to a resource, so adding the link role to it is redundant.
When not using semantic HTML for its intended purpose, interactive features must be re-implemented. For example, when role="link" is added to an element, the tab key should enable giving focus to the link and the enter key should execute the link when focused.
The issue you’re encountering comes from using the longdesc attribute on an iframe element. The longdesc attribute was historically used to provide a URL to a long description of the content. However, it is now considered obsolete and should not be used. Instead, you should use a regular a (anchor) element to provide a link to the description.
Here’s a short guide on how to fix this issue:
Original Code with longdesc
<iframe src="video.html" longdesc="description.html" title="Video"></iframe>Updated Code with Regular a Element
The recommended approach is to use a regular a element to provide a link to the description, like in the following example:
<iframe src="video.html" title="Video"></iframe>
<p>
<a href="description.html">Long description of the video content</a>
</p>Explanation
- Original Code: The longdesc attribute is used on the iframe element, which is now obsolete.
- Updated Code: We remove the longdesc attribute and provide an external link using the a element to guide users to the description.
Links created with the <a> element no longer accept a shape attribute. In order to define image maps, use the <area> element instead.