HTML Guide
Using the width attribute with an invalid value or on an element where it’s not allowed causes a “types are incompatible” error.
The width attribute must only be used on certain elements, like img, canvas, input (of type image), or video. Its value should be a valid integer, representing the number of CSS pixels, without units. Using CSS units like px or % directly in the attribute, or placing the attribute on unsupported elements, will trigger this validation message.
Correct usage:
<img src="photo.jpg" width="400" alt="Sample photo">Incorrect usage (with units):
<img src="photo.jpg" width="400px" alt="Sample photo">Incorrect usage (on unsupported element):
<div width="400">Content</div>To set width via CSS instead, use the style attribute or an external stylesheet:
<div style="width: 400px;">Content</div>For styling, always use CSS when possible; reserve the width attribute for the few HTML elements that specifically support it, and ensure the value is a simple number without units.
The value specified for a width attribute in CSS is not valid.
The width CSS property sets an element’s width. There are many allowed values for this attribute, for example:
/* <length> values */
width: 300px;
width: 25em;
/* <percentage> value */
width: 75%;
/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;
/* Global values */
width: inherit;
width: initial;
width: revert;
width: unset;CSS can’t be properly processed because a computed style is missing a value it depends on.
CSS properties need to be separated by semicolons. Check for the missing semicolon between properties.
In the example below, a forgotten semicolon before the content property makes the CSS parser unable to understand the properties:
<style>
nice {
z-index: auto
content: "";
display: block;
}
</style>Fix it by including the forgotten semicolon like this:
<style>
nice {
z-index: auto;
content: "";
display: block;
}
</style>A CSS property in your HTML includes a calculation or expression where a required numerical value is missing.
This usually happens with properties that use functions like calc(), or arithmetic within CSS, where one of the operands is missing or not a valid number. Common cases include missing units or entirely omitting a value around operators like +, -, *, /.
For example, the following is invalid:
<div style="width: calc(100% - );"></div>Here, the value after - is missing, so the validator cannot process a non-existent number. Every side of an operator in calc() must be a valid number with possible units.
Correct usage:
<div style="width: calc(100% - 50px);"></div>Double-check all inline style attributes and your CSS files for incomplete calc() expressions, arithmetic operations, or similar syntax issues, and make sure every operand around an operator is a valid number (with units if required).
A CSS definition for an X property could not be understood by the parser. Check it to ensure that it’s well formed and that it contains an appropriate value.
The specified CSS property is not valid.
A CSS validation error about “Too many values or values are not recognized” indicates that a CSS property in your HTML uses an invalid or unsupported value, or has more values than expected.
CSS properties have strict rules regarding which values and how many values they accept. Using an unsupported keyword, a typo, or an extra value will result in validation errors. For example, the color property only accepts valid color values (like red, #f00, rgb(255,0,0)), but not unrelated keywords. Similarly, margin can accept one to four length or percentage values, but adding a fifth value or invalid text will cause an error.
Example of INVALID CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invalid CSS Example</title>
<style>
p {
color: red blue; /* Too many values */
margin: 10px 20px 5px 0px 15px; /* Too many values */
display: blocky; /* Unrecognized value */
}
</style>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Example of VALID CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid CSS Example</title>
<style>
p {
color: red;
margin: 10px 20px 5px 0px;
display: block;
}
</style>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Check each CSS property for correct spelling, valid values, and valid value count.
The value specified in a custom CSS property has an unknown or unsupported dimension value.
This is a warning that a special character in the Unicode Private Use Area is being used at the document, which might cause it to not work the way you might expect in different browsers/environments.
If you’ve checked the document in different browsers and it’s working fine, you can safely ignore this warning.
What are private-use characters in Unicode?
Private-use characters are code points whose interpretation is not specified by a character encoding standard and whose use and interpretation may be determined by private agreement among cooperating users. Private-use characters are sometimes also referred to as user-defined characters (UDC) or vendor-defined characters (VDC).
Attributes in HTML elements must be unique. For example, <a id="one" id="two"> is invalid as the attribute id is repeated.
The id attribute is used to identify a single element within a document, and is required to be unique. Check the document for repeated IDs.
A <a> tag element is missing required attributes, depending on other present attributes.
Depending on the use of other HTML attributes, an <a> tag may require additional attributes. For example, when using aria-selected to build a tab list, this is an example of valid code using role, aria-selected, aria-controls and aria-labelledby:
<div class="tab-interface">
<div role="tablist" aria-label="Sample Tabs">
<span
role="tab"
aria-selected="true"
aria-controls="panel-1"
id="tab-1"
tabindex="0">
First Tab
</span>
<span
role="tab"
aria-selected="false"
aria-controls="panel-2"
id="tab-2"
tabindex="-1">
Second Tab
</span>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Content for the first panel</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
<p>Content for the second panel</p>
</div>
</div>
The <a> element requires either a href attribute, or a role attribute.
In HTML, the <button> element is used to create interactive buttons. The W3C HTML Validator message suggests that your <button> element might be missing certain attributes that are typically expected for accessibility or functionality.
Understanding the Required Attributes
-
type Attribute:
-
The type attribute specifies the behavior of the button. It can take one of the following values:
- submit: Submits the form data to the server.
- reset: Resets the form data to its initial values.
- button: A generic button with no default behavior.
- If omitted, the default value is submit when the button is within a form.
<button type="button">Click me</button> -
The type attribute specifies the behavior of the button. It can take one of the following values:
-
role and aria-checked Attributes:
- These attributes are related to ARIA (Accessible Rich Internet Applications) roles and states, which enhance accessibility by providing semantic meaning to assistive technologies.
- The role attribute defines the type of widget the button is supposed to represent, for example, role="switch" or role="checkbox".
- If using role="checkbox" or role="switch", the aria-checked attribute indicates whether the button is checked (true), unchecked (false), or if its state is indeterminate (mixed).
<!-- Example for a button acting as a checkbox --> <button type="button" role="checkbox" aria-checked="false">Toggle Option</button>
Recommendations
- Always define the type attribute to clearly specify the button’s intended behavior, especially within forms.
- If the button acts like a toggle control such as a checkbox or switch, include the appropriate role and use aria-checked to reflect its current state.
- Ensure alignment of ARIA attributes with the intended behavior and visual representation of the button for users, both with and without assistive technologies.
The <dl> element, used to create a definition lists that matches some terms with their definitions, has nesting issues related to <div> elements used with it.
Using aria-required on a div element requires more context about that element, by providing one of the attributes aria-expanded, aria-valuemax, aria-valuemin, aria-valuenow, role.
When possible, you should prefer semantic tags like input, select and textarea, and use the required attribute, but when form controls are created using non-semantic elements, such as a div element, 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. In that case, other attributes might be needed to make the element valid.
For example, we could build a radiogroup using a div like this:
<div aria-required="true">
<div data-value="One"></div> 1
<div data-value="Two"></div> 2
<div data-value="Three"></div> 3
</div>This HTML snippet would then be decorated using CSS and added functionality using JavaScript. However, the W3C validator will complain that the element div is missing one of the attributes aria-expanded, aria-valuemax, aria-valuemin, aria-valuenow, role.
We can fix that by adding the appropiate role to that div element, like this:
<div aria-required="true" role="radiogroup">
<div data-value="One"></div> 1
<div data-value="Two"></div> 2
<div data-value="Three"></div> 3
</div>Here is an example showing how to add the “role” attribute to the “div” element:
<div role="region">
<!-- Your content goes here -->
</div>In this example, the role attribute is added with the value radiogroup. You can choose the appropriate ARIA role based on the purpose or role of your div element.
Remember to also provide the necessary values for the specified attributes if you are adding aria-valuemax, aria-valuemin, or aria-valuenow to ensure proper accessibility and usability of your content.
A <div> tag has been found as a direct child of an <ul> tag, and this is not allowed. For example, <ul><div><li>item</li></div></ul> is not valid, but <ul><li><div>item</div></li></ul> is valid as the direct child of <ul> is <li>.
The <dl> element, used to create a definition lists that matches some terms with their definitions, is missing a required child element.
The following list will cause this issue, as it’s missing a <dt> to specify the term the given definition refers to:
<dl>
<dd>A box without hinges, key, or lid, yet golden treasure inside is hid.</dd>
</dl>Fixing the above example is as easy as including the missing <dt> with the term:
<dl>
<dt>Egg</dt>
<dd>A box without hinges, key, or lid, yet golden treasure inside is hid.</dd>
</dl>The <dl> element is used in HTML to represent a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
For example, the following is a description list with a single term and its definition:
<dl>
<dt>Rocket Validator</dt>
<dd>
The fastest site-wide HTML and Accessibility checker.
</dd>
</dl>Description lists also allow to specify different terms for the same definition, as in this example:
<dl>
<dt>Rocket Validator</dt>
<dt>Rocket</dt>
<dt>RV</dt>
<dd>
The fastest site-wide HTML and Accessibility checker.
</dd>
</dl>Or, we can have a single term with multiple definitions:
<dl>
<dt>Rocket Validator</dt>
<dd>
The fastest site-wide HTML and Accessibility checker.
</dd>
<dd>
The web site you're browsing right now.
</dd>
</dl>In all of these cases, a <dt> term always requires one (or more) <dd> definition elements, so the following is invalid because it’s incomplete, it has an undefined term:
<dl>
<dt>The Meaning of Life</dt>
</dl>The <head> section of an HTML document contains metadata about the document, and as a minimum it must include a <title> tag defining the document title.
Common causes for this issue are forgetting to define the <title>, or duplicated <head> sections where one of them does not include the title.
Here’s an example of a minimal HTML document including the title:
<!DOCTYPE html>
<html>
<head>
<title>Don't panic! This is the title</title>
</head>
<body>
<p></p>
</body>
</html><img> tags used to display images require the attribute src to indicate the source of the image, for example <img src="/img/photo.jpg" />.
A <link> element must include at least one of the attributes href, rel, itemprop, property, or resource.
The <link> element is used to define the relationship between the current document and an external resource, most commonly for linking stylesheets (rel="stylesheet") or providing metadata. According to the HTML specification, at least one of the attributes href, rel, itemprop, property, or resource must be present so the browser or validator knows the purpose of the link.
Correct usage with rel and href:
<link rel="stylesheet" href="styles.css">Correct usage with property:
<link property="og:image" href="image.png">link elements are used to link to external resources, such as stylesheets, scripts, and icons. Including relevant attributes in the link element helps provide additional information about the linked resource.
-
rel: The rel attribute specifies the relationship between the current document and the linked resource, and can also provide additional information about the type of linked resource. For example, using rel="stylesheet" for a linked CSS file or rel="icon" for a linked favicon.
-
itemprop: If the linked resource is an HTML document or a microdata vocabulary like Schema.org, use itemprop to specify properties the linked document or vocabulary defines.
-
property: If the linked resource is an RDF resource, use property to provide metadata about the relationship between the current document and the resource being linked.
Example with rel attribute:
<head>
<link rel="stylesheet" href="styles.css">
<!-- Other meta tags -->
</head>Example with itemprop and property attributes:
<head>
<link itemprop="mentions" href="https://example.com/">
<link property="schema:citation" href="https://example.com/article.html">
<!-- Other meta tags -->
</head>By adding itemprop, property, or rel as necessary, you can ensure your link elements provide appropriate context and semantic meaning to your HTML document.
There’s an incomplete or incorrectly formed <meta> tag. The <meta> tag in HTML is used to provide metadata about the HTML document. This metadata is typically specified using attributes like charset, content, http-equiv, itemprop, name, and property.
To fix this issue, you need to ensure that your <meta> tags include at least one of these attributes. Here are some examples of properly formed <meta> tags with each of these attributes:
-
Using the charset attribute:
<meta charset="UTF-8">This specifies the character encoding for the HTML document, which is crucial for displaying text correctly in different languages.
-
Using the content and name attributes:
<meta name="description" content="A brief description of the webpage content.">This provides a description of the webpage content, which can be used by search engines.
-
Using the http-equiv and content attributes:
<meta http-equiv="refresh" content="30">This specifies information to be passed to the browser, such as refreshing the page every 30 seconds.
-
Using the property and content attributes:
<meta property="og:title" content="Your Webpage Title">This is used for Open Graph meta tags, which improve the appearance of shared content on social media platforms.
Correct Usage Example
Here’s an example of an HTML document with a properly formed set of <meta> tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the webpage content.">
<meta http-equiv="refresh" content="30">
<meta property="og:title" content="Your Webpage Title">
<title>Document</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>