HTML Guide
The button role is used to make an element appear as a button control to a screen reader and can be applied to otherwise non-interactive elements like <div>. If you’re already using a <button> element, then it’s redundant to apply it the role button, as that’s implicit.
<!-- Instead of this -->
<button role="button">Buy</button>
<!-- Do this -->
<button>Buy</button>The button role is used to make an element appear as a button control to a screen reader and can be applied to otherwise non-interactive elements like <div>. If you’re already using an <input> element whose type is submit, then it’s redundant to apply it the role button, as that’s implicit.
<!-- Instead of this -->
<input type="submit" role="button">Buy</button>
<!-- Do this -->
<input type="submit">Buy</button>The <summary> HTML element specifies a clickable summary, caption, or legend for a <details> element’s disclosure box. As the <summary> element has an implicit button role, it’s not needed to include it explicitly.
Here’s an example, clicking the <summary> element toggles the state of the parent <details> element open and closed.
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
A keyboard.
</details>The <center> tag is no longer valid in HTML, you should use CSS instead, for example:
<p style="text-align:center">this text will be centered</p>The W3C Validator is indicating that the charset attribute on the link element is obsolete. According to modern HTML standards, the charset attribute should not be used on the <link> element, and instead, the character encoding should be specified via an HTTP Content-Type header on the server response of the resource.
Here’s how you can address and fix the issue:
1. Remove the charset attribute from the <link> element:
You should simply remove the charset attribute from the <link> element in your HTML file.
Before:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" charset="UTF-8">
<title>Example Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>After:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Example Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>2. Set the charset using HTTP Headers:
To ensure that the correct character encoding is used, you should configure your web server to send the appropriate Content-Type header with the CSS file.
-
For Apache: You can modify the .htaccess file or the server configuration file.
<FilesMatch "\.css$"> AddCharset UTF-8 .css </FilesMatch> -
For Nginx: You can add the following directive to your server block or location block:
location ~* \.css$ { charset utf-8; } -
For Express.js (Node.js): You can set headers in your response:
app.get('/styles.css', function(req, res) { res.setHeader('Content-Type', 'text/css; charset=UTF-8'); res.sendFile(__dirname + '/styles.css'); });
A <script> element has been found that is using the now obsolete charset attribute. You can safely remove this attribute.
For example, this is using both type and charset attributes, with their default values. Both can be removed:
<script src="app.js" type="text/javascript" charset="UTF-8"></script>and just use this:
<script src="app.js"></script>Using the <aside> element will automatically communicate a section has a role of complementary, so specifying the role="complementary" is redundant.
The <footer> element represents a footer for its nearest sectioning content, and has an implicit role of contentinfo, so specifying this role is redundant.
The following example marks a <div> as a footer specifying its role:
<div role="contentinfo">
<h2>Footer</h2>
<!-- footer content -->
</div>Using the <footer> element instead is recommended:
<footer>
<h2>Footer</h2>
<!-- footer content -->
</footer>Malformed comment syntax has been found, check out the affected comment.
HTML comments are helpful to leave notes about the code right next to it. To create a comment, it must start with <!-- and end with -->, as in this example:
<!-- Good comment -->
<!--
Comments can
be multi-line
-->A common cause for a malformed comment is using too many hyphens (-) as in this example:
<!-- 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 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>
<th><h1>Revenue</h1></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.
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><h2>Revenue</h2></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>
<th><h3>Revenue</h3></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>
<th><h4>Revenue</h4></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>
<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.