HTML Guide
The xmlns:v attribute is not valid on the html element in HTML5.
HTML5 does not support custom XML namespaces like xmlns:v, which was used in old versions of Internet Explorer for VML (Vector Markup Language). The xmlns:v attribute is unnecessary and should be removed to make your HTML valid.
Example before (invalid HTML):
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML Example</title>
</head>
<body>
<!-- content -->
</body>
</html>Example after (valid HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>VML Example</title>
</head>
<body>
<!-- content -->
</body>
</html>For vector graphics in modern HTML, use the svg element instead of legacy VML.
The xmlns:w attribute is not allowed on the html element in HTML5.
HTML5 only permits the xmlns attribute for declaring the default XML namespace on the root element in XML documents, such as XHTML—not in HTML. Custom XML namespaces like xmlns:w are not valid in HTML and will cause errors in validators. This attribute is typically used in Microsoft Office-generated HTML for Word-specific XML elements, which are not part of standard HTML and should be removed for web compatibility.
If you are writing standard HTML, simply remove the xmlns:w attribute from your html tag.
Incorrect example (causes the error):
<!DOCTYPE html>
<html lang="en" xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
<title>Invalid HTML Example</title>
</head>
<body>
<!-- Content here -->
</body>
</html>Correct example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid HTML Example</title>
</head>
<body>
<!-- Content here -->
</body>
</html>To ensure W3C compliance, do not include custom XML namespace declarations in HTML5 documents.
The < and > characters are reserved for HTML tags, so if you need to use them as content, they should be escaped as < and > respectively.
For example, to illustrate the mathematical truth that 1 < 2 in HTML, we can write it this way:
<p>1 < 2</p>There is an iframe tag inside a noscript tag that is itself inside the head section of the HTML document. This is not allowed because an iframe cannot be nested inside the head section.
To fix this issue, you may move the noscript section that contains the iframe tag outside of the head section, and ensure that it is placed within the body section of the HTML document.
For example, this is invalid HTML because the head section cannot contain iframe elements:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My webpage</title>
<noscript>
<p>Please enable JavaScript to view this website</p>
<iframe src="https://example.com/"></iframe>
</noscript>
<!-- Other meta tags and styles go here -->
</head>
<body>
<!-- Rest of your webpage content goes here -->
</body>
</html>Moving the noscript inside the body section fixes the issue, as that’s where iframe elements belong:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My webpage</title>
<!-- Other meta tags and styles go here -->
</head>
<body>
<noscript>
<p>Please enable JavaScript to view this website</p>
<iframe src="https://example.com/"></iframe>
</noscript>
<!-- Rest of your webpage content goes here -->
</body>
</html>A start tag for <img> has been found inside a <noscript> section within the <head>, where it’s not allowed. Consider moving it to the <body> section.
The HTML <noscript> element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
When JavaScript is disabled, the content inside <noscript> will be used instead, so this content must fit within its parent section. As an <img> tag is not allowed inside <head>, this will raise an issue. Instead, consider moving the <noscript> part to the <body> section.
This issue is often related to 3rd party tracking pixels like the Facebook or LinkedIn conversion tracking pixels. For example, the Facebook pixel instructions tell you to insert it like this:
<html>
<head>
<script>
...some script...
</script>
<noscript>
<img src="..." />
</noscript>
</head>
<body>
...
</body>
</html>Instead, consider moving the <noscript> part inside the <body>, where the <img> makes sense to be inserted:
<html>
<head>
<script>
...some script...
</script>
</head>
<body>
...
<noscript>
<img src="..." />
</noscript>
</body>
</html>According to the ARIA specification, the attribute aria-rowspan is expected to have a positive integer value. A positive integer is a whole number greater than zero.
Explanation
- aria-rowspan: This attribute is used in ARIA-enabled tables to indicate how many rows a cell should span within its row group. It is often used in elements like gridcell or rowheader within roles that imply grid-like structures, such as grid or treegrid.
Example of Incorrect Usage
<div role="gridcell" aria-rowspan="0">Content</div>In this example, aria-rowspan is set to "0", which is not a valid positive integer.
Correct Usage
To resolve the issue, you should specify a positive integer. For example, if the cell should span one row, you can write:
<div role="gridcell" aria-rowspan="1">Content</div>If the cell should span multiple rows, adjust the number accordingly:
<div role="gridcell" aria-rowspan="2">Content</div>Considerations
- Make sure the role attribute is correctly associated with an element that can logically have a row and grid structure, such as gridcell.
- Ensure that the aria-rowspan value aligns with the structure of your grid or table, representing the actual number of rows that the element is spanning.
The step attribute is a number that specifies the granularity that the value must adhere to.
It sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types.
When used, it must be greater than zero.
Example:
<form>
<!-- Valid values include 1.3, 3.3, 5.3, 7.3, 9.3, 11.3, and so on -->
<input id="myNumber" name="myNumber" type="number" step="2" min="1.3" />
</form>Due to an issue in the W3C validator, this is identified as an error but it’s not. This issue has been notified, and we’ll update our validator as soon as there’s a fix.
According to the WAI-ARIA 1.2 spec:
The aria-setsize property defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
Authors MUST set the value of aria-setsize to an integer equal to the number of items in the set. If the total number of items is unknown, authors SHOULD set the value of aria-setsize to -1.
The W3C HTML Validator issue you encountered indicates that the value of the height attribute for an <img> element is set to “100%”, which is not allowed in HTML. The height attribute must be a specific digit that represents the height in pixels (e.g., “150”), rather than a percentage or any other unit.
How to Fix the Issue
To resolve this issue, you need to specify a numeric value for the height attribute instead. If you want the image to occupy a certain percentage of the container, use CSS instead of the height attribute.
Example of Incorrect HTML
Here is an example that causes the validation issue:
<img src="image.jpg" height="100%" alt="Example Image">Corrected HTML Using Pixel Values
To correct the issue, replace the percentage with a pixel value:
<img src="image.jpg" height="200" alt="Example Image">Alternative: Using CSS for Responsive Design
If you want the image to scale responsively and occupy 100% of the width of its container, consider using CSS:
<style>
.responsive-img {
width: 100%;
height: auto; /* Maintains aspect ratio */
}
</style>
<img src="image.jpg" class="responsive-img" alt="Example Image">Summary
- Do not use percentage values for the height attribute of <img> tags.
- Use pixel values for fixed dimensions.
- For responsive design, use CSS to set the dimensions instead.
The alert role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. The element <ul> doesn’t accept this kind of role, consider using other element like <p> or <div>.
The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. The alert role is most useful for information that requires the user’s immediate attention.
The aria-expanded attribute can only be true, false, or undefined.
This attribute indicates whether a grouping element is expanded or collapsed.
Using role="article" on a <section> element is invalid because article is not a permitted value for the role attribute.
The role attribute in HTML is used to define ARIA roles that describe the purpose of an element for assistive technologies. Only specific, predefined ARIA roles are valid per the WAI-ARIA specification. article is not a recognized ARIA role—use document or other appropriate roles instead, or omit the role attribute entirely. The <article> and <section> elements already have implicit roles, so manual role assignment is rarely necessary or useful for these elements.
Valid uses:
- Use <article> without a role attribute for content that is self-contained and intended to be independently distributable or reusable.
- Use <section> for grouping related content and omit the role attribute unless a specific ARIA landmark role is needed (such as region).
Example: use <article> for standalone content
<article>
<h2>News headline</h2>
<p>News content goes here.</p>
</article>Example: use <section> without a role attribute for generic grouping
<section>
<h2>Introduction</h2>
<p>Section content.</p>
</section>The height attribute on the <video> element must be a non-negative integer representing the height in CSS pixels. The value “auto” is not a valid value for this attribute. To resolve the issue, set the height attribute to a specific numeric value or adjust the height using CSS instead.
Example with a numeric height value:
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Alternatively, control the height using CSS:
<video width="640" controls style="height: auto;">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>In the CSS approach, “auto” can be used, but it should not be part of the HTML attributes.
The width and height attributes on <img> elements expect a digit to specify the dimension in pixels. It should not contain units, letters or percent signs.
You can achieve this using CSS instead, for example:
<!-- Invalid syntax, the height attribute expects only digits -->
<img src="photo.jpg" alt="cat" height="auto" />
<!-- Valid syntax using CSS -->
<img src="photo.jpg" alt="cat" style="height: auto" />The sizes attribute specifies the size of the image when it is displayed on different devices.
The error message is saying that the value auto is not a valid value for the sizes attribute.
To fix this issue, you need to replace the value auto with a valid size. You can use a width descriptor or a media query to specify the size for different device widths.
Here’s an example of using a width descriptor:
<img src="example.jpg" sizes="(max-width: 600px) 100vw, 50vw" />This example sets the size of the image to 100% of the viewport width when the device width is less than or equal to 600px, and 50% of the viewport width for larger device widths.
Alternatively, you can remove the sizes attribute altogether and let the browser decide the best size for the image based on the viewport size.
<img src="example.jpg" />If you do this, the browser will use the default sizes value of 100vw and will scale the image accordingly.
The width attribute on the img element must be a positive integer representing the number of pixels.
The HTML img element’s width and height attributes are expected to specify image dimensions in pixels. According to the HTML Living Standard, these attributes accept only non-negative integers. These integers define the rendered dimension of the image, overriding the actual image size based on its native resolution. The value “auto” is not a valid integer, which leads to the validation error you’ve encountered.
Here is a correct usage example of the img element:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Image Width</title>
</head>
<body>
<img src="example.jpg" alt="Example image" width="200" height="100">
</body>
</html>In the example above, the width is set to 200, and the height is set to 100. Both values are non-negative integers representing pixel dimensions. If you intend to maintain the image’s aspect ratio while adjusting another dimension, you can omit one of the attributes, and modern browsers will automatically adjust the aspect ratio based on the given dimension.
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.
The value cleartype is not valid for the property http-equiv on a meta tag.
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.