HTML Guide
Malformed comment syntax has been found, check out the affected comment.
, as in this example: ```html <!-- Good comment --> <!-- Comments can be multi-line --> ``` A common cause for a malformed comment is using too many hyphens (-`) as in this example: html <!-- Wrong comment -->
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 is not allowed to contain other button elements, or other elements with role=button.
The button role identifies an element as a button to assistive technology such as screen readers. A button is a widget used to perform actions such as submitting a form, opening a dialog, canceling an action, or performing a command such as inserting a new record or displaying information. Adding role="button" tells assistive technology that the element is a button but provides no button functionality
A button element, or an element with the role=button attribute, is not allowed to be nested inside an <a> element.
A <footer> can’t include other <footer>s inside.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
A <header> section can’t include any <footer> section inside.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Footers don’t necessarily have to appear at the end of a section, though they usually do. In any case, they can’t go nested inside a <header> section.
To fix the W3C HTML Validator issue stating that a heading element like h1, h2, h3, h4, h5 or h6 must not appear as a descendant of the th element, you need to ensure that the HTML structure follows the specifications where a heading element (h1 to h6) is not placed within a table cell element like th.
Here’s an example of what might be causing the issue and how you can correct it:
Incorrect HTML:
<table>
<tr>
<th>Month</th>
<!-- Incorrect placement of h1 inside th -->
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>Corrected HTML:
<h1>Revenue per month</h1>
<table>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>In the corrected example, the issue is fixed by removing the h1 element from the th element. If you need to style the text inside the th element differently, you can achieve that via CSS without nesting heading elements inside table cell elements.
An h2 heading cannot be placed inside a dt element.
The dt (definition term) element is only allowed to contain phrasing content, such as text or inline elements (e.g., span, a). Heading elements like h2, which are flow content, are not permitted within dt. Description lists should structure terms and their descriptions with dt for each term and dd for each description. To include headings within the flow of a description list, place the heading outside the dt and dd elements or directly before the list.
Invalid Example:
<dl>
<dt>
<h2>Heading Inside Term</h2>
Term Title
</dt>
<dd>Description of the term.</dd>
</dl>Valid Example — Place Heading Before the List:
<h2>Terms and Definitions</h2>
<dl>
<dt>Term Title</dt>
<dd>Description of the term.</dd>
</dl>Valid Example — Place Heading Outside dt:
<dl>
<dt>Term Title</dt>
<dd>
<h2>Description</h2>
Description of the term.
</dd>
</dl>Always ensure that heading elements are not nested within dt elements to comply with HTML standards.
To fix the W3C HTML Validator issue stating that a heading element like h1, h2, h3, h4, h5 or h6 must not appear as a descendant of the th element, you need to ensure that the HTML structure follows the specifications where a heading element (h1 to h6) is not placed within a table cell element like th.
Here’s an example of what might be causing the issue and how you can correct it:
Incorrect HTML:
<table>
<tr>
<th>Month</th>
<!-- Incorrect placement of h2 inside th -->
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>Corrected HTML:
<h2>Revenue per month</h2>
<table>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>In the corrected example, the issue is fixed by removing the h2 element from the th element. If you need to style the text inside the th element differently, you can achieve that via CSS without nesting heading elements inside table cell elements.
To fix the W3C HTML Validator issue stating that a heading element like h1, h2, h3, h4, h5 or h6 must not appear as a descendant of the th element, you need to ensure that the HTML structure follows the specifications where a heading element (h1 to h6) is not placed within a table cell element like th.
Here’s an example of what might be causing the issue and how you can correct it:
Incorrect HTML:
<table>
<tr>
<th>Month</th>
<!-- Incorrect placement of h3 inside th -->
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>Corrected HTML:
<h4>Revenue per month</h4>
<table>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>In the corrected example, the issue is fixed by removing the h3 element from the th element. If you need to style the text inside the th element differently, you can achieve that via CSS without nesting heading elements inside table cell elements.
To fix the W3C HTML Validator issue stating that a heading element like h1, h2, h3, h4, h5 or h6 must not appear as a descendant of the th element, you need to ensure that the HTML structure follows the specifications where a heading element (h1 to h6) is not placed within a table cell element like th.
Here’s an example of what might be causing the issue and how you can correct it:
Incorrect HTML:
<table>
<tr>
<th>Month</th>
<!-- Incorrect placement of h4 inside th -->
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>Corrected HTML:
<h4>Revenue per month</h4>
<table>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>In the corrected example, the issue is fixed by removing the h4 element from the th element. If you need to style the text inside the th element differently, you can achieve that via CSS without nesting heading elements inside table cell elements.
To fix the W3C HTML Validator issue stating that a heading element like h1, h2, h3, h4, h5 or h6 must not appear as a descendant of the th element, you need to ensure that the HTML structure follows the specifications where a heading element (h1 to h6) is not placed within a table cell element like th.
Here’s an example of what might be causing the issue and how you can correct it:
Incorrect HTML:
<table>
<tr>
<th>Month</th>
<!-- Incorrect placement of h5 inside th -->
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>Corrected HTML:
<h5>Revenue per month</h5>
<table>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>In the corrected example, the issue is fixed by removing the h5 element from the th element. If you need to style the text inside the th element differently, you can achieve that via CSS without nesting heading elements inside table cell elements.
To fix the W3C HTML Validator issue stating that a heading element like h1, h2, h3, h4, h5 or h6 must not appear as a descendant of the th element, you need to ensure that the HTML structure follows the specifications where a heading element (h1 to h6) is not placed within a table cell element like th.
Here’s an example of what might be causing the issue and how you can correct it:
Incorrect HTML:
<table>
<tr>
<th>Month</th>
<!-- Incorrect placement of h6 inside th -->
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>Corrected HTML:
<h4>Revenue per month</h4>
<table>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>In the corrected example, the issue is fixed by removing the h6 element from the th element. If you need to style the text inside the th element differently, you can achieve that via CSS without nesting heading elements inside table cell elements.
A header element cannot be placed inside a footer element according to the HTML specification.
The header and footer elements are both considered “sectioning” content in HTML. The footer element represents the footer for its nearest section or the body, while the header element represents introductory content or navigation links for its nearest section or the body. The HTML specification prohibits nesting a header directly within a footer as it doesn’t make semantic sense—footers are for closing or supplementary content, not introductions.
Invalid HTML Example:
<footer>
<header>
<h2>Footer Header</h2>
</header>
<p>Some footer content here.</p>
</footer>Valid HTML Example: Move the header element outside of the footer element.
<header>
<h2>Site Header</h2>
</header>
<footer>
<p>Some footer content here.</p>
</footer>If you need a heading inside the footer: Instead of using a header inside footer, use heading elements (h2, h3, etc.) directly within the footer.
<footer>
<h2>Footer Section</h2>
<p>Some footer content here.</p>
</footer>A <header> element can’t include other <header> elements inside.
The header element represents a group of introductory or navigational aids, as in this example:
<body>
<header>
<h1>Welcome to our Shop</h1>
<nav>
<ul>
<li><a href="/toys">Toys</a>
<li><a href="/books">Books</a>
<li><a href="/shoes">Shoes</a>
</ul>
</nav>
</header>
<p>Main content...</p>
</body>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 element with role=button can’t have an input element as descendant.
The ARIA role button can be added to an element to make it behave like a <button> – just like a <button> is not allowed to contain other <input> elements as descendants, any element with this role is not allowed to contain them either.
All these examples in the following code will raise a similar issue:
<div role="button">
<input type="checkbox" />
</div>
<button>
<input type="checkbox" />
</button>
<a>
<input type="checkbox" />
</a>An <input> tag can’t be used inside an <a> tag.
An input element cannot be placed inside a button element because the HTML standard prohibits interactive content as descendants of a button.
According to the HTML specification, interactive content (like input, button, select, etc.) must not be nested inside button elements. This restriction exists to prevent invalid or unpredictable behavior in user interfaces. For accessible and valid markup, each form control should be a separate, direct child of its container, not nested inside another interactive element.
Example of invalid HTML
<button>
Submit
<input type="text" name="example">
</button>Correct HTML structure
<form>
<input type="text" name="example">
<button type="submit">Submit</button>
</form>Always ensure that form elements such as input and button are not nested within each other. Keep them as siblings within a form or appropriate container.
A <label> tag can’t be used inside an <a> tag. Consider using other tags like <span>.
A label element is not allowed as a descendant of a button element.
The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.
A <label> element cannot contain other <label> as a descendant. Check for nested elements or closing tags that may have been misinterpreted, for example:
<label>name</label></label>The <caption> element specifies the caption (or title) of a table. It’s not allowed for a <caption> to contain another table.