HTML Guide
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>
<th><h5>Revenue</h5></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>
<th><h6>Revenue</h6></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 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.
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.
A <textarea> tag can’t be used inside an <a> tag.
<select> elements that are required and are not multiple need a placeholder option that has no value, for example:
<select required>
<option value="">choose size</option>
<option value="s">small</option>
<option value="l">large</option>
</select>Element IDs in an HTML document must be unique. The HTML validator is indicating the first occurrence of an ID that is repeated. Check the details for that issue to see web pages affected, and the elements within them, to fix that ID repetition.
The <font> element, used to define the font face, size and color in previous versions of HTML, is no longer valid in HTML5. Instead, you should rely on CSS styles.
For example, you can define a font size of 12px, bold text with inline styles like this:
<p style="font-size: 12px; font-weight: bold;">some text</p>A <form> element has already a form role, so specifying role="form" in it is redundant.
Instead of:
<form role="form">You can simply write:
<form>This W3C HTML Validator issue indicates that you have assigned a role="group" attribute to a <fieldset> element. In HTML, the <fieldset> element already has an implicit role of group so it’s redundant and unnecessary to explicitly specify it.
To resolve this issue, you simply need to remove the role="group" attribute from the <fieldset> element.
Example of the Issue
Here is an example of problematic HTML:
<form>
<fieldset role="group">
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
</fieldset>
</form>Fixed HTML
To fix this issue, remove the role="group" attribute from the <fieldset> element:
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
</fieldset>
</form>The heading role defines this element as a heading to a page or section, and is implicit in tags <h1> to <h6>.
The heading role indicates to assistive technologies that this element should be treated like a heading. Screen readers would read the text and indicate that it is formatted like a heading.
This ARIA role is only needed to add that role to a generic element like <div>, for example:
<div role="heading" aria-level="1">This is a main page heading</div>This defines the text in the <div> to be the main heading of the page, indicated by being level 1 via the aria-level attribute. Opt for using the <h1> (thru <h6>) element instead:
<h1>This is a main page heading</h1>A single <img> element is used to embed an image, so adding the img role to it is redundant.
The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner, for example:
<div role="img" aria-label="Description of the overall image">
<img src="graphic1.png" alt="">
<img src="graphic2.png">
</div>The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the form control. This attribute is not supported in all browsers, so it’s advised to use with caution and consider alternatives for older browsers.
An itemprop attribute has been found in the document, but it cannot be associated to any item. Most probable cause is the lack of an itemscope attribute defining an item.
Microdata allows nested groups of properties, which must be scoped to the item they belong to, as in this example:
<div itemscope>
<p>My name is <span itemprop="name">Liza</span> and I'm <span itemprop="age">48</span> years old.</p>
</div>When the itemtype attribute is specified on an HTML element, the boolean attribute itemscope must also be present in that element.
Here’s an example of how to use the itemscope attribute with the itemtype attribute:
<div itemscope itemtype="http://schema.org/Person">
<p><span itemprop="name">Liza Jane</span></p>
<p><span itemprop="email">liza.jane@example.com</span></p>
</div>In this example, the itemscope attribute is used to indicate that the div element is a microdata item, and the itemtype attribute is used to specify that the type of this item is http://schema.org/Person.
If you don’t need to specify a type for the data represented by the HTML element, you can simply remove the itemtype attribute. For example:
<div itemscope>
<p><span itemprop="name">John Doe</span></p>
<p><span itemprop="email">john.doe@example.com</span></p>
</div>The label element may contain only one labelable descendant.
For example:
<label for="age">
Age
<select id="age">
<option>young</option>
<option>old</option>
</select>
</label>The <script> tag allows authors to include dynamic scripts and data blocks in their documents. This tag accepts two optional attributes, type (which is unnecessary if it’s JavaScript, as that’s the default), and src to indicate the URL of the external script to use.
The language attribute is now obsolete and should not be used.
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.
Remove the role="list" attribute from the ul element.
The ul (unordered list) element is inherently recognized as a list in HTML. As such, it is automatically associated with the semantic role of a list. Adding role="list" to a ul is redundant and can also confuse browsers and screen readers, potentially leading to inconsistent behavior or impaired accessibility. This attribute is unnecessary because the list role is implicitly defined for this element through HTML specifications, and W3C HTML validation flags it to ensure semantic clarity and best practices.
Example of Incorrect role Usage:
<ul role="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Corrected Example Without Unnecessary role:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>By excluding the role="list", the code adheres to semantic clarity and best practices, complying with W3C standards while maintaining accessibility.