HTML Guide
The error message is indicating that the width attribute of the <video> element has an invalid value. According to the HTML specification, the width attribute expects a non-negative integer value, representing the pixel width of the video.
The value "auto" is not valid for the width attribute. Instead, specify a full number that indicates the pixel width of the video. If you want the video to be responsive without specifying a fixed width, you can use CSS to achieve that.
Here are two ways to resolve this:
-
Specify a valid pixel value for width:
<video width="640" height="360" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> -
Use CSS for a responsive video player:
Instead of using the width attribute, use CSS to set the width of the video element. This allows the video to adjust its size according to the container or viewport.
<style> .responsive-video { width: 100%; height: auto; } </style> <video class="responsive-video" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
In the second example, the video will scale based on its containing element, maintaining its aspect ratio due to the height: auto; CSS rule. This approach offers more flexibility for responsive design.
The itemscope attribute is a boolean attribute in HTML5, which means it does not take any values. Adding any value (such as true or false) will cause an error. When using boolean attributes, they should either be present or absent. If an attribute like itemscope is present, it is considered true.
Here’s how to correct the error:
Incorrect Usage:
<div itemscope="true">Correct Usage:
<div itemscope>Explanation:
- Simply including the itemscope attribute without any value is the correct way to use it.
- If you don’t want to use the itemscope attribute, just remove it from the tag.
An element like <h1>, <h2>, etc., used to define a heading, does not accept the button role.
The following HTML code is invalid because the <h2> element can’t have role="button"
<h2 role="button">Some heading</h2>Instead, you can nest the <h2> inside a <div> with that role. In this case however, browsers automatically apply role presentation to all descendant elements of any button element as it is a role that does not support semantic children.
<div role="button">
<h2>Some heading</h2>
</div>A <li> element, used to define a list item, does not accept the button role.
This HTML code is invalid because the <li> elements can’t have role="button":
<ul>
<li role="button">One</li>
<li role="button">Two</li>
</ul>The value “Cache-Control” is not valid for the http-equiv attribute in a meta tag.
The http-equiv attribute in the meta tag is used to define HTTP header equivalents, and it has specific valid values, such as “content-type”, “expires”, “refresh”, and “content-security-policy”. Most commonly used values are defined in the HTML specifications.
To resolve this issue, you must remove or correct the http-equiv attribute value. If controlling cache behavior is necessary, it should be handled via server configuration rather than within the HTML document using a meta tag.
Example
Incorrect usage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Cache-Control" content="no-cache">
</head>
<body>
<p>Sample text on the page.</p>
</body>
</html>Corrected version (removing the invalid meta tag):
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Cache-Control should be configured on the server-side -->
</head>
<body>
<p>Sample text on the page.</p>
</body>
</html>You might configure caching on your web server (e.g., Apache, Nginx) to handle Cache-Control instead of using an invalid meta tag in your HTML.
Spaces are not permitted in the href value for phone links; the phone number must be a continuous string without spaces or slashes.
The href attribute of an anchor (<a>) element defines the link’s destination. For phone numbers, the proper URI scheme is tel:, not callto:. According to the HTML standard and the WHATWG Living Standard, the phone number should contain only digits and may use plus (+) or hyphen (-) characters for formatting, but it should not include spaces or slashes.
Incorrect HTML:
<a href="callto:07142/ 12 34 5">Call us</a>Correct HTML:
<a href="tel:0714212345">Call us</a>With country code and optional formatting:
<a href="tel:+49714212345">Call us</a>For best compatibility and validation, always use the tel: scheme and ensure the phone number string contains only allowed characters.
The value cleartype is not valid for the property http-equiv on a meta tag.
The role attribute value combobox is not valid on an input element according to the W3C HTML standard.
The role="combobox" is valid only when applied to an element that acts as a container for the combo box widget, usually a div or similar element, and not directly to a native HTML input. Native input elements of type "text" or "search" already have implicit roles and accessibility semantics. To create an accessible combobox, wrap the input inside a container element with role="combobox" and use appropriate ARIA attributes.
Incorrect Implementation:
<input type="text" role="combobox" aria-autocomplete="list">Correct Implementation:
<div role="combobox" aria-haspopup="listbox" aria-owns="suggestions" aria-expanded="false">
<input type="text" aria-autocomplete="list" aria-controls="suggestions">
</div>
<ul id="suggestions" role="listbox">
<li role="option" id="option1">Option 1</li>
<li role="option" id="option2">Option 2</li>
</ul>Explanation of attributes:
- role="combobox": Applied to the container (<div>) to define the accessible widget.
- aria-haspopup="listbox": Indicates the presence of a list of suggestions.
- aria-owns / aria-controls: Connects the input and suggestion list.
- aria-expanded: Denotes whether the suggestion list is visible.
- aria-autocomplete: Defines the autocomplete behavior.
This markup ensures better accessibility and passes W3C validation.
The value company is not a valid option for the autocomplete attribute on an <input> element. You may use the organization value instead, as it can be used for “company name corresponding to the person, address, or contact information in the other fields associated with this field”.
The issue arises because “complimentary” is not a valid value for the role attribute on the <aside> element. In HTML, the role attribute is used to provide assistive technologies with extra information about the purpose of the element. The role values are defined by the WAI-ARIA specification.
The correct role for an <aside> element, if explicitly needed, would be complementary (note the spelling with an “e” instead of an “i”). However, the <aside> element has an implicit ARIA role of complementary, and thus it is typically unnecessary to explicitly specify this role unless you are using advanced ARIA techniques.
Correct Example:
<aside>
<h2>Related Information</h2>
<p>Here you can find additional resources and links.</p>
</aside>If you want to explicitly define the role:
<aside role="complementary">
<h2>Related Information</h2>
<p>Here you can find additional resources and links.</p>
</aside>Make sure to always use correct ARIA attributes and values to maintain accessibility for users relying on assistive technologies. For a comprehensive list of roles available for usage, refer to the WAI-ARIA specifications.
The value contact is not a valid option for the autocomplete attribute on an <input> element.
The value Content-Script-Type is not valid for the property http-equiv on a meta tag.
The W3C HTML Validator issue you’re encountering indicates that the value specified for the http-equiv attribute in a <meta> tag is not valid. This often happens due to incorrect formatting, spelling errors, or extraneous characters in the attribute value.
To resolve this issue, ensure that the http-equiv attribute is spelled correctly and that it contains valid values. For a basic Content Security Policy (CSP), the correct way to specify it in the <meta> tag is as follows:
Correct Usage of <meta> with http-equiv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
<title>Document Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Fixes to Apply:
- Ensure Correct Spelling: The attribute value must be spelled exactly as “Content-Security-Policy” (case-sensitive).
- Check for Extraneous Characters: Make sure there are no extra quotes or spaces within the attribute value.
Example of a Bad Value:
If your original <meta> tag looks something like this:
<meta http-equiv=""Content-Security-Policy"" content="default-src 'self';">You should change it to:
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">The value Content-Style-Type is not valid for the property http-equiv on a meta tag.
type="datetime" is obsolete; it was removed from HTML and is not valid in modern browsers or validators.
Explanation
The input element’s type attribute accepts specific keywords defined by the HTML Living Standard. The keyword datetime was dropped; use either:
- type="datetime-local" for a local date and time without timezone.
- type="date" or type="time" when collecting them separately.
- type="text" with a pattern or a JS widget when timezone-aware datetime is required.
Relevant attributes that still apply include name, value, min, max, and step (e.g., seconds for datetime-local).
HTML examples
Example reproducing the error
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invalid input type</title>
</head>
<body>
<form>
<label>
Meeting:
<input type="datetime" name="meeting">
</label>
</form>
</body>
</html>Valid fix with datetime-local
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid input type</title>
</head>
<body>
<form>
<label>
Meeting:
<input type="datetime-local" name="meeting" step="60">
</label>
</form>
</body>
</html>The dialog element does not require or permit a role="dialog" attribute according to HTML standards.
The <dialog> element has an implicit ARIA role of dialog, so adding role="dialog" is redundant and not valid per the specification. Instead, simply use the <dialog> element without an explicit role attribute.
Details:
According to the WHATWG HTML standard and ARIA specification, native <dialog> elements automatically have the correct role. Adding role="dialog" can cause HTML validation errors, as the validator interprets this as a misuse or redundancy.
Correct usage:
<dialog>
<p>This is a dialog box.</p>
<button>Close</button>
</dialog>Incorrect usage (causes validation error):
<dialog role="dialog">
<p>This is a dialog box.</p>
<button>Close</button>
</dialog>Removing the role="dialog" attribute resolves the W3C validation issue while maintaining accessibility.
The type dob is not valid for an input. If you want to build a date picker field, you can use the native HTML input elements with type date, datetime-local, or a generic text input decorated with JavaScript and CSS.
In HTML, the type attribute for the <input> element specifies the type of input control that is to be displayed. The type attribute can have values like text, password, email, date, etc. Using an unsupported or invalid value like dob (which presumably stands for “date of birth”) will cause this validation error.
Here’s an example of how you can correct this issue by using a supported type attribute value for the date of birth input:
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">In this corrected example, we’ve used the type="date" attribute value for the date of birth input. This is a valid type for handling dates in HTML forms. Replace the input type with a supported type according to the specific data you need to capture.
Alternatively you can use a JavaScript library to build a date picker on a generic text input. For example, the popular bootstrap-datepicker library will generate a date picker around a text input.
The value en-EN is not a valid language tag for the hreflang attribute on a link element.
The hreflang attribute specifies the language (and optionally, the region) of the linked resource to help search engines and browsers deliver the correct localized version. Language tags should follow BCP 47 standards, with primary language subtags (like en) and optional region subtags (like US). A correct region subtag for English would be en-US (English as used in the United States) or en-GB (United Kingdom). Double language subtags like en-EN are invalid because the region subtag must be a valid country code, not a repeat of the language code.
Correct usage:
<link rel="alternate" href="https://example.com/en/" hreflang="en">
<link rel="alternate" href="https://example.com/en-gb/" hreflang="en-GB">
<link rel="alternate" href="https://example.com/en-us/" hreflang="en-US">Incorrect usage:
<link rel="alternate" href="https://example.com/en-en/" hreflang="en-EN">Use en, en-US, or en-GB as appropriate for English-language content, but never en-EN.
Expires is not a valid value for the http-equiv attribute in HTML5.
The http-equiv attribute is used with the <meta> tag to configure the HTTP headers of the web page. In HTML5, the allowed values for http-equiv include content-type, default-style, refresh, and security-related headers like Content-Security-Policy. The Expires header is an HTTP header typically set in server configurations or via server-side scripting, not through HTML. To control page caching, consider using server-side headers for Expires or use the cache-control setting if supported by your server.
Here’s how you might correct an HTML document using valid http-equiv values and manage caching through server-side configurations:
Example of Valid HTML <meta> Tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>Example of Setting Expires at Server Level:
If you’re using Apache, you might set Expires in a .htaccess file:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 week"
</IfModule>For Nginx, such settings would be in the server’s configuration file:
location ~* \.html$ {
expires 7d;
}Using these methods, you ensure compliance with HTML5 standards by handling HTTP headers correctly.
All HTML elements may have the hidden boolean attribute set. When specified on an element, it indicates that the element is not yet, or is no longer, relevant, so browsers won’t render it.
Boolean attributes don’t accept values, its presence represents the true value and its absence represents the false value.
<!-- This is invalid because the hidden attribute should not have a value set -->
<div hidden="false"></div>
<!-- The correct way to hide a div is like this -->
<div hidden>This will be hidden</div>
<!-- And to show the element, we just don't hide it -->
<div>This won't be hidden</div>The type attribute value for the <link> element must be a valid MIME type, such as image/png, not favicon.
The type attribute in a <link rel="icon"> specifies the MIME type of the linked resource. MIME types must follow the standard format, such as image/png for PNG images or image/x-icon for .ico files. Using favicon is incorrect because it is not a registered MIME type, leading to validation errors.
Correct usage for linking a PNG favicon:
<link rel="icon" href="img/favicon.png" type="image/png">Correct usage for linking an ICO favicon:
<link rel="icon" href="img/favicon.ico" type="image/x-icon">The type attribute is optional when the server sends the correct Content-Type HTTP header, but it can be included for explicitness and clarity.
The action attribute on a <form> element is not a required attribute, but if specified, must be a valid, non-empty URL. For example:
<form action="register.php">
</form>The issue here is related to the encoding of URLs. In HTML and URLs, special characters that have specific meanings need to be encoded to ensure that the URL is interpreted correctly. This process converts characters to their percent-encoded form, where a character is replaced by % followed by two hexadecimal digits representing the ASCII code of the character.
Explanation:
- The action attribute of a <form> element specifies where to send the form-data when a form is submitted.
- If the URL contains special characters (e.g., spaces, <, >, #, %, etc.), they need to be percent-encoded. For instance, a space character is encoded as %20.
- In this case, the validator is complaining about a % sign that is not correctly followed by two hexadecimal digits, which typically happens if the URL was not properly encoded.
How to Fix:
- Check the URL: Look for any raw special characters that need encoding.
- Correctly Encode the URL: Use online tools or libraries that provide URL encoding support to ensure that the URL is correctly percent-encoded.
Example:
Suppose you have the following incorrect form tag:
<form action="submit%data.html">
<!-- form elements here -->
</form>The % in submit%data.html should be followed by two hexadecimal digits. If %data was intended to be a part of the URL, it should be encoded properly. Here is how to correct it:
<form action="submit%25data.html">
<!-- form elements here -->
</form>If % should represent data, replace % with %25, which is the percent-encoded form of %. Always verify each special character is correctly encoded. Using this approach ensures that the URL in the action attribute is valid according to HTML standards.
The aria-activedescendant attribute on the input element must reference a non-empty, valid ID of an existing element.
The aria-activedescendant attribute is used in accessible widgets to indicate which element is currently active or selected within a composite widget, such as a listbox or autocomplete dropdown. Its value should be the id of an element within the DOM.
The attribute value must not be an empty string and must match the id of an existing element. Using an empty string ("") is invalid and triggers the W3C validator error.
Correct usage:
- Reference a valid, non-empty element id as the value.
- Remove the attribute if no element is currently active.
Example: Incorrect usage (invalid)
<input type="text" aria-activedescendant="" />Example: Correct usage with a referenced ID
<ul id="suggestions">
<li id="option1">Option 1</li>
<li id="option2">Option 2</li>
</ul>
<input type="text" aria-activedescendant="option1" />To eliminate errors, do not set aria-activedescendant to an empty string. Only include the attribute when it references a valid element’s id.
Empty aria-controls attribute values are invalid; the attribute must reference the id of one or more elements.
The aria-controls attribute is used to indicate that the element controls the referenced element(s) by their id. According to the ARIA specification and W3C HTML standard, the attribute must contain at least one valid id value, and cannot be an empty string. Leaving aria-controls="" triggers a validation error.
Correct Usage:
- Assign an id to the element being controlled.
- Set the aria-controls attribute to match that id.
- Remove aria-controls entirely if not necessary.
Incorrect Example:
<a href="#" aria-controls="">Toggle</a>Corrected Example:
<div id="details">Some details...</div>
<a href="#" aria-controls="details">Toggle</a>If no element is being controlled:
<a href="#">Toggle</a>