HTML Guide
sidebar is not a valid value for the role attribute according to the ARIA (Accessible Rich Internet Applications) specification.
The role attribute is used to define the purpose of an element for assistive technologies. Only certain predefined values are valid, such as navigation, complementary, main, banner, contentinfo, and others. There is no sidebar role in the ARIA or HTML specification. If you wish to indicate a sidebar, you should use the complementary role, which is intended for content that is tangentially related to the main content, such as a sidebar.
Incorrect Example:
<div role="sidebar">
<!-- Sidebar content -->
</div>Correct Example:
<div role="complementary">
<!-- Sidebar content -->
</div>Alternatively, you can use the aside element, which conveys the same meaning and does not require an explicit role attribute:
<aside>
<!-- Sidebar content -->
</aside>Using either the role="complementary" on a generic container or the semantic <aside> element ensures your HTML is valid and accessible.
sidebar is not a valid value for the role attribute according to the ARIA (Accessible Rich Internet Applications) specification.
The role attribute is used to define the purpose of an element for assistive technologies. Only certain predefined values are valid, such as navigation, complementary, main, banner, contentinfo, and others. There is no sidebar role in the ARIA or HTML specification. If you wish to indicate a sidebar, you should use the complementary role, which is intended for content that is tangentially related to the main content, such as a sidebar.
Incorrect Example:
<div role="sidebar">
<!-- Sidebar content -->
</div>Correct Example:
<div role="complementary">
<!-- Sidebar content -->
</div>Alternatively, you can use the aside element, which conveys the same meaning and does not require an explicit role attribute:
<aside>
<!-- Sidebar content -->
</aside>Using either the role="complementary" on a generic container or the semantic <aside> element ensures your HTML is valid and accessible.
The value street-address cannot be used for attribute autocomplete on an <input> element. As this kind of autofill is oriented for multi-line inputs (as in the expected format for addresses), consider using a <textarea> element instead, like in this example:
<textarea name="address" autocomplete="street-address"></textarea>The role="tabpanel" attribute is not permitted on the article element according to W3C and WHATWG HTML specifications.
The role attribute helps describe the purpose of an element for assistive technologies. The value tabpanel indicates a section of a tab interface and should be used only with elements suited to that role—typically generic containers like div or section, not article. The article element has its own landmark meaning and should not be used for widgets such as tab panels.
Correct usage:
- Use role="tabpanel" on a div or section element.
- Use role="tablist" on the container of the tabs.
- Use role="tab" on each tab.
Incorrect:
<article role="tabpanel" id="panel1">
Tab panel content here.
</article>Correct:
<div role="tabpanel" id="panel1">
Tab panel content here.
</div>Full example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tabpanel Example</title>
</head>
<body>
<div role="tablist">
<button role="tab" aria-controls="panel1" aria-selected="true">Tab 1</button>
<button role="tab" aria-controls="panel2" aria-selected="false">Tab 2</button>
</div>
<div role="tabpanel" id="panel1">
Tab panel content here.
</div>
<div role="tabpanel" id="panel2" hidden>
Tab panel 2 content here.
</div>
</body>
</html>Replace the article element with a div or section when assigning the tabpanel role to ensure your markup is valid and accessible.
The role attribute in HTML is used to define the accessibility role of an element, which helps assistive technologies understand the purpose or type of the element. The value tabpanel is not appropriate for a <ul> element, which is used for unordered lists.
The role of tabpanel is intended to be used with elements that represent a tab panel, which is part of a tabbed interface. A tabbed interface consists of elements with roles like tablist, tab, and tabpanel. Typically, tabpanel is used with containers that house the content associated with a tab, such as a <div>.
To fix this error, ensure that the tabpanel role is applied to the correct element. Here’s a simple example of how a tab interface can be structured correctly:
<div role="tablist" aria-label="Sample Tabs">
<button role="tab" aria-controls="panel-1" id="tab-1">Tab 1</button>
<button role="tab" aria-controls="panel-2" id="tab-2">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1" hidden>
<p>Content for Tab 1.</p>
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
<p>Content for Tab 2.</p>
</div>In this example:
- The role tablist is applied to the container element that directly contains the tab elements.
- Each button serving as a tab has the role of tab.
- Each tab panel, which contains the content for a tab, has the role of tabpanel.
Avoid using tabpanel on non-semantic or incorrectly associated elements like <ul>. Instead, use elements like <div> or <section> for tab panels, ensuring the roles align with the intended roles in a tabbed interface.
The value tel-national cannot be used on the attribute autocomplete of an <input> element of type tel. Either change to type="text", or use autocomplete="tel". Examples:
<!-- Using autocomplete "tel-national" on type "tel" is invalid -->
<input name="phone1" type="tel" autocomplete="tel-national" />
<!--Using autocomplete "tel-national" on type "text" is valid -->
<input name="phone2" type="text" autocomplete="tel-national" />
<!--Using autocomplete "tel" on type "tel" is valid -->
<input name="phone3" type="tel" autocomplete="tel" />The href attribute on an <a> link contains an invalid character. If you’re trying to link to a phone URL, review the href attribute to remove unallowed characters, as in this example:
<!-- Invalid as it contains a space character -->
<a href="tel: +123456789">call me</a>
<!-- Valid -->
<a href="tel:+123456789">call me</a>A <meta> tag has been found in the document stating that the charset is windows-1251, but it actually is utf-8. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">A <meta> tag has been found in the document stating that the charset is windows-1252, but it actually is utf-8. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">A textbox role is not valid for a li (list item) element. If the intention is to create a textual input area, a different approach, such as using the input element or the textarea element, is recommended.
The textbox role is used to identify an element that allows the input of free-form text. Whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input.
Here’s an example of how to use the textbox role on a <div> element:
<!-- Simple text input field -->
<div id="txtboxLabel">Enter your five-digit zipcode</div>
<div
role="textbox"
contenteditable="true"
aria-placeholder="5-digit zipcode"
aria-labelledby="txtboxLabel"></div>The allowfullscreen attribute is used to allow an iframe to activate fullscreen mode. As a boolean attribute, it should only be declared without any value.
Here is an example of correct usage:
<iframe src="https://example.com" allowfullscreen></iframe>However, this is now a legacy attribute, and has been redefined as allow="fullscreen", as part of the more general Permissions Policy:
<iframe src="https://example.com" allow="fullscreen"></iframe>The attribute aria-hidden must have a value of "true" (without extra quotes) or "false", not "\"true\"" (with double quotes inside the value).
The aria-hidden attribute is used to indicate whether an element and its children should be accessible to assistive technologies (like screen readers). Valid values are the strings "true" or "false" (without embedded quotation marks). Using extra quotation marks causes the validator to flag a bad value because the attribute’s value is interpreted literally.
Incorrect Example:
<div aria-hidden='"true"'>This is hidden from assistive tech</div>Correct Example:
<div aria-hidden="true">This is hidden from assistive tech</div>or
<div aria-hidden="false">This is visible to assistive tech</div>Remove any extra quotation marks around your attribute value to resolve the error.
Use the boolean attribute disabled without any value or with the attribute name as the value; "true" is invalid.
Detailed explanation
The HTML boolean attribute disabled indicates that the element is not editable, focusable, or submittable. For boolean attributes (per the WHATWG HTML standard and MDN), the presence of the attribute means “on/true,” and its absence means “off/false.” Valid syntaxes are:
- disabled
- disabled=""
- disabled="disabled"
Invalid values include arbitrary strings like "true" or "false". Using disabled="true" triggers the validator error because boolean attributes must not use non-empty values other than the attribute name itself.
Relevant elements that support disabled include input, button, select, textarea, optgroup, option, fieldset, and form (partial behavior). For dynamic enabling/disabling, set or remove the attribute via JavaScript rather than assigning string values.
HTML examples
Reproduce the validator error (invalid)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invalid Disabled Example</title>
</head>
<body>
<form>
<input type="text" disabled="true">
<button type="submit" disabled="false">Submit</button>
</form>
</body>
</html>Fix (valid boolean attribute usage)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Disabled Example</title>
</head>
<body>
<form>
<!-- Presence means disabled -->
<input type="text" disabled>
<!-- Also valid: disabled="disabled" or disabled="" -->
<button type="submit" disabled="disabled">Submit</button>
</form>
</body>
</html>The multiple attribute is used to indicate that multiple options can be selected in a <select> element. As a boolean attribute, it should only be declared without any value.
Instead of:
<select multiple="true">You should use:
<select multiple>Here is an example of the correct usage of the multiple attribute:
<label for="colors">Select your favorite colors:</label>
<select id="colors" name="colors" multiple>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>The selected attribute on option elements is boolean, so it should not have any value associated.
To fix this issue, simply remove the value assigned to the selected attribute.
Instead of this:
<select>
<option selected="true">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Use this:
<select>
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>In the example above, we’ve removed the value assigned to the selected attribute on the first option element. This will specify that “Option 1” is the default option to be selected in the dropdown list.
Invalid value “virtual” was used for the wrap attribute on a textarea.
The wrap attribute controls how the browser wraps text when submitting a form. It accepts only two keyword values:
- soft (default): Lines are not hard-wrapped on submission; the server receives unwrapped lines.
- hard: The browser inserts CRLFs at wrap boundaries on submission; you must also set cols for hard to be valid.
virtual was a non-standard value used by some legacy browsers and is not allowed by the HTML Standard or the W3C validator. Remove wrap entirely to get soft wrapping, or set it to soft/hard as needed. If you choose hard, include a sensible cols value. You can also control visual wrapping with CSS like white-space if needed.
HTML Examples
Example: Reproduces the validator error
<!doctype html>
<html lang="en">
<head>
<title>Textarea Wrap Error</title>
</head>
<body>
<form>
<label for="msg">Message</label>
<textarea id="msg" name="msg" wrap="virtual"></textarea>
</form>
</body>
</html>Example: Valid fixes
<!doctype html>
<html lang="en">
<head>
<title>Textarea Wrap Fix</title>
</head>
<body>
<form>
<label for="msg-soft">Message (soft)</label>
<textarea id="msg-soft" name="msg" wrap="soft"></textarea>
<label for="msg-hard">Message (hard)</label>
<textarea id="msg-hard" name="msg" wrap="hard" cols="40" rows="5"></textarea>
</form>
</body>
</html>The value of the maxlength attribute contains invalid characters because it is incorrectly combined with another attribute.
In HTML, the maxlength attribute for an input element should contain only a non-negative integer value, which specifies the maximum number of characters allowed in the input. The aria-required attribute must be a separate attribute in the tag.
Correct usage separates each attribute and assigns the appropriate value using quotation marks for each. For example, maxlength="200" and aria-required="true" must be distinct and not combined.
Incorrect:
<input type="text" name="nome" id="nome" maxlength="200 aria-required="true">Correct:
<input type="text" name="nome" id="nome" maxlength="200" aria-required="true">This valid example uses maxlength="200" for character limit and adds aria-required="true" to improve accessibility for assistive technologies.
To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">The accept attribute may be specified to provide browsers with a hint of what file types will be accepted on an <input> element. It expects a comma-separated list of allowed file types. Refer to the list of media types to check the accepted tokens. In this example, the first line is invalid while the second is valid:
<input name='file' type='file' accept='doc, docx, pdf' />
<input name='file' type='file' accept='text/doc, text/docx, application/pdf' />The only accepted values for the aria-current property are page, step, location, date, time, true and false.
A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.
When you have a group of related elements, such as several links in a breadcrumb or steps in a multi-step flow, with one element in the group styled differently from the others to indicate to the sighted user that this is the current element within its group, the aria-current should be used to inform the assistive technology user what has been indicated via styling.
In its simplest form, you only need to add aria-current="true" to the element that you wish to mark as the current element of a group, for example:
<nav>
<ol>
<li>
<a href="/page1">Page 1</a>
</li>
<li>
<a href="/page2" aria-current="true">Page 2</a>
</li>
<li>
<a href="/page3">Page 3</a>
</li>
</ol>
</nav>If you can, use the values page, step, location, date or time instead of true to indicate the nature of the current element:
- page
- Represents the current page within a set of pages such as the link to the current document in a breadcrumb.
- step
- Represents the current step within a process such as the current step in an enumerated multi step checkout flow.
- location
- Represents the current location within an environment or context such as the image that is visually highlighted as the current component of a flow chart.
- date
- Represents the current date within a collection of dates such as the current date within a calendar.
- time
- Represents the current time within a set of times such as the current time within a timetable.
For example, here we use page instead of true.
<nav>
<ol>
<li>
<a href="/page1">Page 1</a>
</li>
<li>
<a href="/page2" aria-current="page">Page 2</a>
</li>
<li>
<a href="/page3">Page 3</a>
</li>
</ol>
</nav>If you want to indicate that an element is not the current element, you can use the false value or just skip the aria-current property entirely on the element.
Using a blank string is not a valid value for this property, so instead of this:
<a href="/page3" aria-current="">Page 3</a>you can use false:
<a href="/page3" aria-current="false">Page 3</a>or, better yet, skip the property entirely:
<a href="/page3">Page 3</a>The only accepted value for the aria-required property is true.
The aria-required attribute indicates that user input is required on the element before a form may be submitted.
When a semantic HTML <input>, <select>, or <textarea> must have a value, it should have the required attribute applied to it. When form controls are created using non-semantic elements, such as a <div> with a role of checkbox, the aria-required attribute should be included, with a value of true, to indicate to assistive technologies that user input is required on the element for the form to be submittable.
Example:
<div id="email_label">Email Address *</div>
<div
role="textbox"
contenteditable
aria-labelledby="email_label"
aria-required="true"
id="email"></div>The async attribute is boolean: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. As a boolean attribute, it does not need to be passed any value such as true or 1 to activate the async property.
For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
For module scripts, if the async attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will get fetched in parallel to parsing and evaluated as soon as they are available.
<script async src="app.js"></script>
<script async type="module">
/* JavaScript module code here */
</script>checked is a boolean attribute and should not have a value; it must be written as just checked.
The checked attribute is used with <input> elements of type checkbox or radio. As a boolean attribute, it is either present (interpreted as true) or omitted (false). Adding any value, like checked="true", is not valid and causes a validation error. The correct usage is simply checked.
Incorrect example:
<input type="checkbox" checked="true">Correct example:
<input type="checkbox" checked>Example in context:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkbox Example</title>
</head>
<body>
<label>
<input type="checkbox" checked>
Subscribe to newsletter
</label>
</body>
</html>The value used in the datetime attribute is not in a valid format.
The <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.