HTML Guide
The autocomplete attribute on an input, textarea, select or form element lets web developers specify how autocompleting should be handled.
The value none is not valid, instead the value off should be used to disable autocompletion.
Here is an example of how you can adjust your HTML code:
Incorrect usage:
<input type="text" name="username" autocomplete="none">Correct usage: If you want to disable autofill for an input field, you can use the value off instead of none:
<input type="text" name="username" autocomplete="off">The attribute value is either the keyword off or on, or a space-separated token list that describes the meaning of the autocompletion value, for example name, email, postal-code and others. Refer to the linked guide to see the full list of accepted values for the autcomplete property.
The attribute font-weight can be used on SVG text elements like text but not on g container elements, and none is not a valid value.
The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.
This attribute can be used with the SVG elements text, textPath, tref and tspan, but on on g elements.
Its allowed values are normal, bold, bolder, lighter, or a number. The value none is not valid for this attribute.
Here’s an example:
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
<text y="20" font-weight="normal">Normal text</text>
<text x="100" y="20" font-weight="bold">Bold text</text>
</svg>Alternatively, SVG text elements can also be stilyzed using CSS, like so:
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
<text y="20" style="font-weight:normal">Normal text</text>
<text x="100" y="20" style="font-weight:bold">Bold text</text>
</svg>The text-anchor attribute is used within SVG elements like text or textPath to specify the alignment of text relative to a given point, but it’s not allowed on g container elements.
Here’s an example of how you can correctly use the text-anchor attribute on a <text> element in SVG:
<svg width="200" height="200">
<text x="100" y="100" text-anchor="middle">Centered text</text>
</svg>In this example:
- The text-anchor="middle" attribute is applied directly to the <text> element.
- It aligns the text in the middle horizontally around the specified x-coordinate.
You can use the text-anchor element with the SVG elements text, textPath, tref or tspan.
The allowed values for the text-anchor attribute are start, middle or end. The value none is not valid for this attribute.
The correct way to disable autocomplete is using the value off.
Example:
<form autocomplete="off">The correct way to disable autocomplete is using the value off.
Example:
<input type="text" name="firstName" id="firstName" required autocomplete="off" />The correct way to disable autocomplete is using the value off.
Example:
<input type="text" name="firstName" id="firstName" required autocomplete="off" />The input element does not support a type attribute value of numeric; the correct attribute value is number.
HTML input elements have a type attribute that specifies the kind of data that the input is expected to contain. When creating a form field for numeric input, you should use type="number", which provides an input control with features like increment/decrement controls, depending on the browser. This allows browsers to render the appropriate interface for numeric inputs and also provides built-in client-side validation to ensure that the entered data is a numerical value.
Here’s an example of how to correctly define an input for numeric values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Input Example</title>
</head>
<body>
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">
<input type="submit" value="Submit">
</form>
</body>
</html>In this example, the input element has a type of number, allowing users to input or select a numeric value within the specified range of 1 to 10. Using type="number" instead of any incorrect value, like numeric, ensures that your HTML is compliant with W3C standards.
A <meta> element has an invalid value for the property attribute, probably caused by invalid double quotes. Check out the double quotes, ” should be ".
The correct markup for this meta tag should be like:
<meta property="og:type" content="website" />There’s no role in ARIA named presentational, you probably mean presentation.
The presentation role and its synonym none remove an element’s implicit ARIA semantics from being exposed to the accessibility tree.
The content of the element will still be available to assistive technologies; it is only the semantics of the container — and in some instance, required associated descendants — which will no longer expose their mappings to the accessibility API.
The value rocketlazyloadscript used in a <script> tag is not a valid one according to the HTML specification. It is introduced by the WP Rocket Wordpress extension.
An element with role="rowgroup" is a group of rows within a tabular structure. A rowgroup contains one or more rows of cells, grid cells, column headers, or row headers within a grid, table or treegrid, as in this example:
<div
role="table"
aria-label="Populations"
aria-describedby="country_population_desc">
<div id="country_population_desc">World Populations by Country</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="descending">Country</span>
<span role="columnheader" aria-sort="none">Population</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="cell">Finland</span>
<span role="cell">5.5 million</span>
</div>
<div role="row">
<span role="cell">France</span>
<span role="cell">67 million</span>
</div>
</div>
</div>The projection media type was deprecated in Media Queries 4.
Media types describe the general category of a device, for example screen, print and speech.
CSS 2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn’t be used.
<input> elements can’t have a search role. Instead, try with <input type="search">.
<input> elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently depending on the user agent.
The search role is a landmark. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. The search role is added to the container element that encompasses the items and objects that, as a whole, combine to create search functionality. When a <form> is a search form, use the search role on the form.
Example of a search form:
<form role="search">
<label for="search-input">Search this site</label>
<input type="search" id="search-input" name="search">
<input value="Submit" type="submit">
</form>Using role="section" on a <section> element is unnecessary and not recommended.
The <section> element is a semantic HTML5 element that is used to define sections within a document. A <section> inherently carries the semantics of a structural region, so you don’t need to explicitly declare a role attribute for it. The role attribute in HTML is mainly used to enhance accessibility by explicitly defining the purpose of an element when the element’s native HTML semantics are missing or insufficient. However, in this case, since <section> is already semantically meaningful, assigning a role="section" results in redundancy and can cause validation warnings or errors.
HTML5 and ARIA (Accessible Rich Internet Applications) guidelines suggest only using roles when absolutely necessary. Misusing roles can lead to confusion for assistive technologies, potentially impacting user accessibility.
Here’s a correct use of the <section> element without the role attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document Title</title>
</head>
<body>
<header>
<h1>Website Header</h1>
</header>
<section>
<h2>Section Heading</h2>
<p>This is a paragraph within the section.</p>
</section>
<footer>
<p>Website Footer</p>
</footer>
</body>
</html>By removing role="section", you leverage the semantic meaning that the <section> element already provides, ensuring cleaner, more accessible, and standards-compliant HTML.
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 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>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, not checked="true" or checked="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 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.