HTML Guide
The ::file-selector-button has not been recognized by the W3C Validator. This seems to be a bug in the W3C Validator, which has already been reported.
The ::ng-deep CSS selector is often used in an Angular Component’s CSS to override the styles of a third-party component or a child component’s styles.
This CSS selector is now deprecated.
The @container CSS at-rule is a conditional group rule that applies styles to a containment context. The @container at-rule is a recent addition to CSS which isn’t officially a standard rule instead, although widely supported by major browsers.
Check the linked guides to learn more about browser compatibility for this rule.
The @tailwind at-rule defined by the Tailwind CSS framework isn’t officialy supported by the W3C Validator.
Tailwind directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects.
Although they’re valid directives for Tailwind, they’re not valid from the W3C Validator perspective. You can consider muting this issue in your Rocket Validator Pro reports.
The value none is not a valid value for the vertical-align CSS property.
The vertical-align property in CSS is used to specify the vertical alignment of an inline or table-cell element. This property affects the alignment of elements that are placed next to each other in a line. Valid values for vertical-align include keywords like baseline, sub, super, text-top, text-bottom, middle, top, bottom, as well as length values (such as px, em) and percentage values. The value none is not recognized as a valid option for vertical-align, which is why the validator reports an issue.
Below are examples using valid values for the vertical-align property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Vertical Align</title>
<style>
.aligned-text {
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<td style="vertical-align: top;">Top</td>
<td class="aligned-text">Middle</td>
<td style="vertical-align: bottom;">Bottom</td>
</tr>
</table>
</body>
</html>In the above example, each table cell is using a valid vertical-align value (top, middle, and bottom) to control vertical alignment. If you replace vertical-align: none; with one of these values according to your design requirements, your code will validate correctly.
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 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.
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" />.
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.