HTML Guide
The xmlns:dt attribute is not permitted on standard HTML elements according to the HTML specification.
HTML5 does not use XML namespaces like xmlns:dt, which are only valid in certain XML vocabularies such as XHTML or when embedding MathML or SVG. In typical HTML, attributes with xmlns or any custom XML namespace prefixes are invalid and cause validation errors.
To fix this issue, simply remove the xmlns:dt attribute from your HTML tags.
If you are using a data attribute or a custom attribute, you can use data-* attributes instead, which are allowed in HTML5.
Incorrect usage with xmlns:dt:
<div xmlns:dt="urn:schemas-microsoft-com:datatypes">
Content here
</div>Correct usage—attribute removed:
<div>
Content here
</div>If you need to store custom data, use data-* attributes:
<div data-dt="urn:schemas-microsoft-com:datatypes">
Content here
</div>Avoid using XML namespaces in HTML5 documents to ensure your code is standards-compliant.
FBML - Facebook Markup Language was used to embed Facebook-specific tags on web sites, was retired in 2011 but this still appears on <html> tags on some sites. You should consider removing this from your site and use alternative ways to do that.
The xmlns:m attribute is not permitted on the html element in HTML5 documents.
HTML5 allows only certain attributes on the html element, specifically lang and dir (and the standard xmlns in XHTML serialization contexts), but not custom XML namespaces like xmlns:m. The xmlns:m attribute is typically used in XML-based documents (such as MathML or Office markup) and is not valid in standard HTML5 syntax.
To resolve the error, remove the xmlns:m attribute from the html element. If you need to use namespace-prefixed elements or attributes (such as for Office documents or MathML), you should use XHTML serialization (served as application/xhtml+xml) or rework your markup to be fully compatible with HTML5 without custom namespaces.
Incorrect usage:
<!DOCTYPE html>
<html xmlns:m="http://schemas.microsoft.com/office/2004/12/omml">
<head>
<title>Invalid Namespace Example</title>
</head>
<body>
<!-- Content here -->
</body>
</html>Correct HTML5 usage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid HTML Example</title>
</head>
<body>
<!-- Content here -->
</body>
</html>If you require namespaces for specific elements (like MathML), use them directly without declaring a namespace on the html element, or switch to XHTML if your application truly requires namespace declarations. For most web applications, sticking to standard HTML5 elements and attributes ensures maximal compatibility and validator compliance.
The “xmlns:o” attribute is not allowed because it is not part of the standard HTML attributes and typically appears due to improperly embedded XML or Office-related HTML content.
In HTML documents, the “xmlns” attribute is used to declare a namespace and is generally valid for certain elements when dealing with XML documents or XHTML. However, the “xmlns:o” attribute specifically relates to XML namespaces typically used in Microsoft’s Office XML formats (for example, when copying and pasting styled content from Word to an HTML editor). Since HTML5 doesn’t natively support these namespaces as valid HTML attributes and strictly validates against them, any non-standard attributes like “xmlns:o” generate validation errors.
To fix this issue, you should remove the “xmlns:o” attribute unless you are sure that it’s necessary for the function of your document, and the document should be processed in a way that supports such namespaces. If the content is not meant to include Office-specific data elements, it’s likely this attribute was accidentally included and can be safely removed.
Example of Incorrect HTML with “xmlns:o”
<!DOCTYPE html>
<html>
<head>
<title>Sample Document</title>
</head>
<body xmlns:o="urn:schemas-microsoft-com:office:office">
<p>This is a paragraph within a body tag falsely including an xmlns:o attribute.</p>
</body>
</html>Corrected Example without “xmlns:o”
<!DOCTYPE html>
<html>
<head>
<title>Sample Document</title>
</head>
<body>
<p>This is a paragraph within a correctly structured HTML document.</p>
</body>
</html>By removing the “xmlns:o” attribute, the HTML document complies with the W3C standards, leading to successful validation. If you require namespaces for XML processing, it’s essential to handle them outside the context of standard HTML or within an XML or XHTML document structure where such namespaces are appropriate and valid.
The old way for using Open Graph Protocol tags in web pages is not valid HTML5, you should use the updated markup as specified in https://ogp.me
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
</head>
</html>The attribute xmlns:serif is not a valid namespace. This attribute is set by Affinity Designer on SVG exports.
The xmlns:svg attribute is not allowed on the <svg> element in HTML5 and causes validation errors.
The SVG specification only requires the xmlns (not xmlns:svg) attribute for embedding SVG in HTML, and custom namespace prefixes like xmlns:svg are not needed or permitted in HTML5. The sole required namespace declaration is xmlns="http://www.w3.org/2000/svg". The xmlns:svg form was only used in extremely outdated XML-based workflows and has no place in current HTML.
Incorrect HTML Example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<!-- SVG content here -->
</svg>Correct HTML Example:
<svg xmlns="http://www.w3.org/2000/svg">
<!-- SVG content here -->
</svg>In summary:
- Use only xmlns="http://www.w3.org/2000/svg" in inline SVG within HTML documents.
- Remove xmlns:svg and any other prefixed namespace attributes unless specifically required for XML workflows, not HTML.
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>A <p> element cannot be placed inside a <noscript> tag within the <head> section.
According to the HTML specification, the <head> element must only contain metadata, such as <title>, <meta>, <link>, <script>, and <style>. The <noscript> element is allowed in <head>, but it must only contain elements that are valid in head, not flow content like <p>. The <p> (paragraph) tag is flow content meant for the <body>. For fallback content in <head>, only metadata elements are allowed.
Incorrect example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<noscript>
<p>JavaScript is disabled.</p>
</noscript>
</head>
<body>
</body>
</html>Correct approaches:
-
Remove the <p> from <noscript> in <head>:
- If you must include fallback styles or links in case JavaScript is disabled, use only metadata tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<noscript>
<link rel="stylesheet" href="no-js.css">
</noscript>
</head>
<body>
</body>
</html>-
Place textual fallback content in the <body> instead:
- Moving the <noscript> block with flow content (such as <p>) to the body ensures validity.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<noscript>
<p>JavaScript is disabled.</p>
</noscript>
</body>
</html>Remember: Do not use <p> (or any flow content) in <noscript> inside <head>. Use such content only in the body.
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 value allow-storage-access-by-user-activation is not a valid keyword for the sandbox attribute of the iframe, as it’s still an experimental value.
The sandbox attribute enables an extra set of restrictions for the content in an iframe. You can add specific keywords to relax certain restrictions, such as allow-scripts, allow-forms, allow-popups, and others.
The experimental value allow-storage-access-by-user-activation is not yet a part of the official list of allowed keywords recognized by the W3C validator or the WHATWG HTML standard.
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.