HTML Checking for Large Sites
Rocket Validator automatically checks your pages on the W3C Validator.
HTML issues checked by Rocket Validator.
The <meta charset>
is expected to appear at the beginning of the document, within the first 1024 bytes. Move it to the beginning of the <head>
section, as in this example:
<head>
<meta charset="utf-8">
...
</head>
A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified. For HTML documents, the standard way to declare a document character encoding is by including a <meta>
tag with a charset
attribute, typically <meta charset="utf-8">
.
According to the W3C standard:
The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.
Source:
In order to define the charset encoding of an HTML document, both of these options are valid, but only one of them must appear in the document:
<!-- This is the preferred way -->
<meta charset="UTF-8">
<!-- This is the older way, also valid -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Read about specifying the character encoding
The <meta charset>
tag, used to define the character encoding, must appear only once in a document, within the <head>
section.
Learn more:
There can only be one visible <main>
element in a document. If more are needed (for example for switching between them with JavaScript), only one can be visible, the others should be hidden toggling the hidden
attribute.
Example of 2 main
elements, where only one is visible:
<main>
<h1>Active main element</h1>
<!-- content -->
</main>
<main hidden>
<h1>Hidden main element</h1>
<!-- content -->
</main>
Learn more:
A <link>
element has been found in an invalid body context. Check the attributes of the <link>
element and ensure it’s not within the <body>
section.
If the element is within the <head>
section, it may have been interpreted as a body
context depending on previous elements. For example, while this <link>
element is valid per se and is in the <head>
section, it is deemed invalid because the previous <img>
element made the validator consider it a body
context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<img src="photo.jpg" alt="A smiling cat" />
<link rel="canonical" href="https://example.com/" />
</head>
<body>
<p>Some content</p>
</body>
</html>
If we fix that document and move the <img>
tag within the body, the issue raised about <meta>
disappears because it’s now in a valid context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<link rel="canonical" href="https://example.com/" />
</head>
<body>
<p>Some content</p>
<img src="photo.jpg" alt="A smiling cat" />
</body>
</html>
Learn more:
A <link>
element that is using the preload
value in the rel
attribute is missing the as
attribute, used to indicate the type of the resource.
The preload
value of the <link>
element’s rel
attribute lets you declare fetch requests in the HTML’s <head>
, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page’s render, improving performance.
The as
attribute specifies the type of content being loaded by the <link>
, which is necessary for request matching, application of correct content security policy, and setting of correct Accept
request header.
Learn more:
Rocket Validator checks HTML on your sites using the latest version of W3C Validator Nu HTML Checker, which is intended for HTML5 documents.
The page scanned is using an “almost standards mode” doctype, instead of the expected <!DOCTYPE html>
. While the almost standards mode was used in the transition to HTML5, you should consider moving to the HTML5 standard.
Learn more about the “Almost standards mode”:
The only value admitted for the attribute content
in a <meta http-equiv="X-UA-Compatible">
is currently IE=edge
. You’re probably seeing this issue because the page being validated includes the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
As the Google Chrome Frame plugin was discontinued on February 25, 2014, this is longer supported so you should change that meta tag to:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
According to this article in Wikipedia:
Google Chrome Frame was a plug-in designed for Internet Explorer based on the open-source Chromium project, first announced on September 22, 2009. It went stable in September 2010, on the first birthday of the project. It was discontinued on February 25, 2014 and is no longer supported.
The plug-in worked with Internet Explorer 6, 7, 8 and 9. It allowed suitably coded web pages to be displayed in Internet Explorer by Google Chrome’s versions of the WebKit layout engine and V8 JavaScript engine.
You can read the official post about retiring Google Chrome Frame that was posted in June 2013.
Elements with the role tab
must either be a child of an element with the tablist
role, or have their id
part of the aria-owns
property of a tablist
.
An element with the tab role controls the visibility of an associated element with the tabpanel role. The common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs.
Example:
<div class="tabs">
<div role="tablist" aria-label="Sample Tabs">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
</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>
Learn more at:
A button
element, or an element with the role=button
attribute, is not allowed to be nested inside an <a>
element.
An <a>
element cannot contain a descendant element with the attribute tabindex
.
Learn more:
A button
element cannot contain a descendant element with the attribute tabindex
.
The id
attribute of an HTML element, used to identify the element when linking, scripting or styling, must be unique in the whole document and must not contain whitespace.
Technically, in HTML5, the value for an id attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits,
_
, and-
should be used and the value for anid
attribute should start with a letter.
Learn more:
<img>
tags, used to include images on a document, require an alt
attribute to describe the contents of the image. This is essential for users that cannot see the image (like screen reader users), or as an alternate text when the image cannot be displayed. Example:
<img src="photo.jpg" alt="Person holding a cat" />
When an img
element has an empty alt
attribute, its role is implicitly decorative, so it must not specify a role
attribute.
Learn more:
According to the HTML specification, text must not contain control characters other than space characters.
In particular, the control character 
escapes the Unicode control character “CARRIAGE RETURN” are not allowed.
An alternative is using the character reference
which escapes the Unicode control character “LINE FEED” that is defined to be a space character, so it’s allowed in HTML text.
Learn more:
When nesting a select
element inside a label
that has a for
attribute, the id
attribute of the select
is required to match it.
The label
element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for
attribute, or by putting the form control inside the label
element itself.
When the select is inside the label
, there’s no need to specify a for
attribute as there can only be one select
, as in this example:
<label>
Age
<select>
<option>young</option>
<option>old</option>
</select>
</label>
However, if the for
attribute is specified, then it must match the id
of the select
like this:
<label for="age">
Age
<select id="age">
<option>young</option>
<option>old</option>
</select>
</label>
Learn more:
The <article>
element can be used to define complete, self-contained compositions of a document, for example blog posts. Consider using a heading element (any of <h2>
to </h6>
) to present each article.
Example:
<h1>Our blog</h1>
<article>
<h2>How to validate accessibility</h2>
<p>Use Rocket Validator for a in-depth scan</p>
</article>
<article>
<h2>How to monitor sites for accessibility</h2>
<p>Define schedules in Rocket Validator</p>
</article>
The <script>
tag allows authors to include dynamic scripts and data blocks in their documents. When the src
is present, this tag accepts a type
attribute which must be either:
- an empty string
-
text/javascript
(that’s the default, so it can be omitted) -
module
Examples:
<!-- This is valid, without a type it defaults to JavaScript -->
<script src="app.js"></script>
<!-- This is valid, but will warn that it can be omitted -->
<script type="text/javascript" src="app.js"></script>
<!-- An empty attribute is valid, but will warn that it can be omitted -->
<script type="" src="app.js"></script>
<!-- The module keyword is also valid as a type -->
<script type="module" src="app.js"></script>
<!-- Any other type is invalid -->
<script type="wrong" src="app.js"></script>
<script type="text/html" src="app.js"></script>
<script type="image/jpeg" src="app.js"></script>
Learn more:
An HTML tag could not be parsed, most probably because of a typo.
Table rows on the same <table>
element must have the same number of columns, which comes determined by the first tr
row.
For example, this table is wrong as the first row defines 2 columns, while the second row tries to use 4 columns:
<table>
<tr>
<td>Liza</td>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</table>
Learn more:
A <table>
contains a <tr>
row that has less <td>
columns than the column count established by the first row. Check the table to ensure all rows have the same number of columns.
For example, in the following table, the first <tr>
row defines that it’s 2 columns wide, but the second <tr>
row tries to use only 1 column:
<table>
<!-- This first row sets the table as 2 columns wide -->
<tr>
<td>First</td>
<td>Second</td>
</tr>
<!-- This second row has only 1 column -->
<tr>
<td>Wrong</td>
</tr>
</table>
Learn more:
The aria-required
attribute is used to indicate to screen reader users that a form input is required. As there is now in HTML a general required
attribute which works with most user agents, it’s unnecessary to use both at the same time. In general, you can rely solely on the required
attribute, unless you want to provide backwards compatibility on old screen reader software versions.
Example:
<form action="order.">
<!-- This will raise a warning on unnecesary attributes -->
<input id="city" name="city" aria-required="true" required />
<!-- You can use this instead -->
<input id="city" name="city" required />
</form>
Learn more:
The autocomplete
attribute is not valid on input types that do not return numeric or text data, being valid for all input types except checkbox
, radio
, file
, or any of the button
types.
Learn more:
A <meta>
tag has been found that is either malformed, or in a bad place within the document. Check its attributes and context.
For example, the following HTML contains a valid <meta>
tag that is raising an issue because of bad context, caused by an <img>
tag that shouldn’t be there:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<img src="photo.jpg" alt="A smiling cat" />
<meta charset="utf-8" />
</head>
<body>
<p>Some content</p>
</body>
</html>
If we fix that document and move the <img>
tag within the body, the issue raised about <meta>
disappears because it’s now in a valid context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<meta charset="utf-8" />
</head>
<body>
<p>Some content</p>
<img src="photo.jpg" alt="A smiling cat" />
</body>
</html>
Learn more:
The controlslist
attribute on the <video>
element is experimental, and not yet valid in the current HTML5 standard, so you should use it with caution as it may not be supported by all browsers.
Learn more:
The <span>
element does not have a currency
attribute. Consider using custom data attributes instead, like data-currency
.
Learn more:
The attribute displayText
is not allowed on <span>
elements.
This issue is commonly caused by an old integration of ShareThis via Drupal or other CMS - the old code used invalid attributes like displayText
, st_url
and st_title
which were later changed to HTML5 custom data attributes.
Learn more:
- [ShareThis: how to migrate legacy buttons(https://sharethis.com/support/installation/migrate-from-sharethis-legacy-buttons-to-inline-buttons/)
- Drupal: W3C validator issues on st_url
- MDN: using data attributes
The <table>
element does not accept a height
attribute. Use CSS instead.
A <meta>
element using the http-equiv
attribute has been found in an unexpected place of the document. It should appear inside the <head>
section, like in this example:
<!DOCTYPE html>
<html lang="">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<p>Content of the page</p>
</body>
</html>
The http-equiv
attribute is used in web pages to simulate an HTTP response header. While HTTP response headers can be set from the server, not everyone has access to the server configuration, so an alternative is using <meta http-equiv>
to define settings that would otherwise require setting an HTTP response header.
The most popular use of http-equiv
are defining the content-type
of the document as in the example above, although in HTML5 it’s preferred to use this instead:
<meta charset="UTF-8">
Another popular use of the http-equiv
is setting an automatic reload of the web page, for example this will have the browser reload the page every 60 seconds:
<meta http-equiv="refresh" content="60">
However, refreshing a page automatically is a bad practice regarding accessibility, as users do not expect a page to do that, and doing so will move focus back to the top of the page, which may create a frustrating or confusing experience.
Other values that can be used with the http-equiv attribute include:
- content-security-policy
- content-length.
- content-encoding
- default-style
- window-target
Instead of using the isolang
attribute to define the language of the document, you can use lang
with an ISO 639-1 two character code.
For example, for Portuguese:
<html lang="pt">
labelledby
is not a valid attribute for the <svg>
element. Perhaps you meant aria-labelledby
?
The aria-labelledby
attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
Example:
<div id="myBillingId">Billing</div>
<div>
<div id="myNameId">Name</div>
<input type="text" aria-labelledby="myBillingId myNameId"/>
</div>
<div>
<div id="myAddressId">Address</div>
<input type="text" aria-labelledby="myBillingId myAddressId"/>
</div>
Read more:
The maxlength
attribute can be used on an input
element to define a client-side validation for the maximum length allowed on an input without resorting to JavaScript.
This attribute is only allowed on elements of type email
, password
, search
, tel
, text
, or url
.
The minlength
attribute can be used on an input
element to define a client-side validation for the maximum length allowed on an input without resorting to JavaScript.
This attribute is only allowed on elements of type email
, password
, search
, tel
, text
, or url
.
The minlength attribute defines the minimum number of characters (as UTF-16 code units) the user can enter into an <input>
or <textarea>
. This must be an integer value 0 or higher. If no minlength is specified, or an invalid value is specified, the input has no minimum length. This value must be less than or equal to the value of maxlength, otherwise the value will never be valid, as it is impossible to meet both criteria.
Here’s an example:
<label for="name">Enter your name (max 25 characters)</label>
<input type="text" minlength="25" id="name">
Learn more:
A <meta>
tag has been found that is either malformed, or in a bad place within the document. Check its attributes and context.
For example, the following HTML contains a valid <meta>
tag that is raising an issue because of bad context, caused by an <img>
tag that shouldn’t be there:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<img src="photo.jpg" alt="A smiling cat" />
<meta name="description" content="Description of this page" />
</head>
<body>
<p>Some content</p>
</body>
</html>
If we fix that document and move the <img>
tag within the body, the issue raised about <meta>
disappears because it’s now in a valid context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<meta name="description" content="Description of this page" />
</head>
<body>
<p>Some content</p>
<img src="photo.jpg" alt="A smiling cat" />
</body>
</html>
Learn more:
Check the syntax of the affected tag, it’s probably malformed and a <
character inside has been interpreted as an attribute.
For example, this code might cause this issue:
<!-- Malformed img tag -->
<img src="photo.jpg" alt="smiling cat" < />
<!-- Fixed img tag -->
<img src="photo.jpg" alt="smiling cat" />
The ontouchstart
attribute, used in devices with a touch screen, and not supported by all browsers, is not a valid attribute in the current HTML5 standard.
You can consider replacing it with the more generic onclick
attribute, or still use it if you’re OK with its limitations.
The pattern
attribute is only allowed on input whose type
is email
, password
, search
, tel
, text
or url
. Check the type
used, and consider changing to one of the allowed types to enable pattern client-side validation.
The pattern
attribute is a handy way of adding client-side validation on HTML forms without resorting to JavaScript. Check out this article to learn more about Input Pattern.
The placeholder
attribute is used on <input>
elements as text that appears in the form control when it has no value set. Only inputs of type email
, number
, password
, search
, tel
, text
, or url
accept this attribute.
For example, an input of type hidden
doesn’t accept a placeholder
attribute as it makes no sense to specify text to appear when the input is empty, if that input is hidden.
Learn more:
The boolean required
attribute can only be used with certain types of inputs. Check the input type is one of the allowed.
The required
attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.
Learn more:
The seamless
attribute was proposed to be included in the HTML5 spec, but it wasn’t finally accepted, so it’s not a valid attribute for <iframe>
.
The attribute st_title
is not allowed on <span>
elements.
This issue is commonly caused by an old integration of ShareThis via Drupal or other CMS - the old code used invalid attributes like displayText
, st_url
and st_title
which were later changed to HTML5 custom data attributes.
Learn more:
- [ShareThis: how to migrate legacy buttons(https://sharethis.com/support/installation/migrate-from-sharethis-legacy-buttons-to-inline-buttons/)
- Drupal: W3C validator issues on st_url
- MDN: using data attributes
The attribute st_url
is not allowed on <span>
elements.
This issue is commonly caused by an old integration of ShareThis via Drupal or other CMS - the old code used invalid attributes like displayText
, st_url
and st_title
which were later changed to HTML5 custom data attributes.
Learn more:
- [ShareThis: how to migrate legacy buttons(https://sharethis.com/support/installation/migrate-from-sharethis-legacy-buttons-to-inline-buttons/)
- Drupal: W3C validator issues on st_url
- MDN: using data attributes
The <textarea>
element does not have a type
attribute.
The HTML <textarea>
element represents a multi-line plain-text editing control, and is useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
Learn more:
There is no attribute validate
on the <form>
element. Perhaps you meant novalidate
?
If the novalidate
attribute is present on a <form>
, indicates that the form is not to be validated during submission.
For example, while this form has a required
attribute on its input, it won’t be enforced because form validation has been disabled using novalidate
:
<form novalidate>
<label>City: <input required name="city"></label>
<input type="submit" />
</form>
Read more:
An attribute has been found in an element, where the intended value is missing. A common cause is including the equal sign, but not passing anything after it.
For example:
<!-- This is missing the value for the style attribute, so it's invalid -->
<p style=></p>
<!-- This is explicitly passing a blank string as the value, so it's valid -->
<p style=""></p>
Both xmlns:fb
and xmlns:og
attributes have been deprecated. If you’re using Facebook / Open Graph Protocol proprietary tags in you document, you can update the markup to the new syntax.
Learn more:
An attribute could not be parsed from the HTML input, probably due to a typo. Check this guide for a related HTML issue.
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 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>
Learn more:
An invalid attribute has been found on an element. Check the affected tag to ensure attributes are well-formed, and if they are you can consider using custom data attributes.
Learn more
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>
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>
Learn more:
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 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.
Learn more about the alert
ARIA role:
The aria-expanded
attribute can only be true
, false
, or undefined
.
This attribute indicates whether a grouping element is expanded or collapsed.
Learn more:
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" />
Learn more:
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>
Learn more:
The value cache-control
is no longer a valid pragma directive. A better alternative is defining cache-control as an HTTP header.
Learn more:
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”.
Learn more:
The value contact
is not a valid option for the autocomplete
attribute on an <input>
element.
Learn more:
According to W3C, http-equiv
value content-script-type
attribute is unknown for HTML5 meta markup.
Learn more:
According to W3C, http-equiv
value content-style-type
attribute is unknown for HTML5 meta markup.
Learn more:
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>
Read more:
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>
An <a>
element has been found with an invalid href
attribute, containing more than one #
adjacent character.
The #
is used to separate the fragment part of an URI (typically used to indicate a section within a document). For example, this is a valid link to a URI containing a fragment:
<a href="https://example.com/faqs#pricing">pricing</a>
The next example is invalid because it contains two adjacent #
characters, so that the fragment part would be #pricing
instead of pricing
:
<a href="https://example.com/faqs##pricing">pricing</a>
Learn more:
The href
attribute of an <a>
element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
Learn more:
The href
attribute on the link
element must not be empty.
The id
attribute is used to identify a single element within a document, it’s not required, but if used it must be unique, and must not be an empty string.
IDs for HTML elements can’t be blank.
The max
attribute on an <input>
element does not accept an empty string.
The max
attribute defines the maximum value that is acceptable and valid for the input containing the attribute.
Learn more:
The name
attribute is required for all input
elements.
An <iframe>
element allows to embed an HTML document inside another HTML document, and its src
attribute is indicated the source URL of the embedded web page. The src
attribute is a required attribute, so it cannot be blank.
Example:
<iframe src="https://example.com/map.html"></iframe>
Learn more:
The src
attribute on an <img>
element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
Learn more:
The src
attribute for <img>
tags is required, to define the source of the image, like in this example:
<img src="photo.jpg" alt="wombat" />
The sizes
attribute is used to complement the srcset
attribute on an <img>
tag for responsive images. When this attribute is present, all image candidates must specify its width.
Learn more:
The target
attribute on <a>
elements can’t be blank.
This attribute defines the browsing context for links, that is, where should the linked documents be opened. This was used extensively on the now deprecated <frame>
element, so you could give the name of the frame to open the document in, but is now more used to force links to open in a separate tab or window using target="_blank"
. Another option is using a name, so the new browsing context can be referred to on subsequent clicks on links with the same target
.
For example, this will force the links to open on a new tab:
<a href="https://example.com" target="_blank">will open a blank tab</a>
Learn more:
The attributes width
and height
of <img>
elements expect a non-negative integer, so an empty string is not allowed. Either define the correct dimension, or remove this attribute.
Learn more:
The href
attribute on an a
tag expects a valid URL, but only http://
was found.
The only permitted value for the xmlns:link
attribute is http://www.w3.org/1999/xlink
.
Although using https
in the URL looks like it’s going to be more secure, in fact this URL is not used to connect it to, only to declare the namespace.
Learn more:
The only permitted value for the xmlns
attribute is http://www.w3.org/2000/svg
.
The namespace declaration for an <svg>
element is provided by the xmlns
attribute like this:
<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tags here -->
</svg>
Although using https
in the URL looks like it’s going to be more secure, in fact this URL is not used to connect it to, only to declare the namespace.
Learn more:
<a>
tags can be used to link to an email address using the mailto
protocol in the href
attribute. Ensure that there is no space in the email address.
<a href="mailto: liza@example.com">This is wrong as it contains an space</a>
<a href="mailto:liza@example.com">This is OK</a>
The correct way to disable autocomplete
is using the value off
.
Example:
<form autocomplete="off">
Learn more:
The correct way to disable autocomplete
is using the value off
.
Example:
<input type="text" name="firstName" id="firstName" required autocomplete="off" />
Learn more:
The correct way to disable autocomplete
is using the value off
.
Example:
<input type="text" name="firstName" id="firstName" required autocomplete="off" />
A <meta>
element has an invalid value for the property
attribute, probably caused by invalid double quotes. Check out the double quotes, ”
should be "
.
The correct markup for this meta tag should be like:
<meta property="og:type" content="website" />
The value rocketlazyloadscript
used in a <script>
tag is not a valid one according to the HTML specification. It is introduced by the WP Rocket Wordpress extension.
Learn more:
The projection
media type was deprecated in Media Queries 4.
Media types describe the general category of a device, for example screen
, print
and speech
.
CSS 2.1 and Media Queries 3 defined several additional media types (tty
, tv
, projection
, handheld
, braille
, embossed
, and aural
), but they were deprecated in Media Queries 4 and shouldn’t be used.
<input>
elements can’t have a search
role. Instead, try with <input type="search">
.
<input>
elements of type search
are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently depending on the user agent.
The search
role is a landmark. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. The search role is added to the container element that encompasses the items and objects that, as a whole, combine to create search functionality. When a <form>
is a search form, use the search
role on the form
.
Example of a search form:
<form role="search">
<label for="search-input">Search this site</label>
<input type="search" id="search-input" name="search">
<input value="Submit" type="submit">
</form>
Learn more:
The value street-address
cannot be used for attribute autocomplete
on an <input>
element. As this kind of autofill is oriented for multi-line inputs (as in the expected format for addresses), consider using a <textarea>
element instead, like in this example:
<textarea name="address" autocomplete="street-address"></textarea>
Read more about the autocomplete attribute.
The value tel-national
cannot be used on the attribute autocomplete
of an <input>
element of type tel
. Either change to type="text"
, or use autocomplete="tel"
. Examples:
<!-- Using autocomplete "tel-national" on type "tel" is invalid -->
<input name="phone1" type="tel" autocomplete="tel-national" />
<!--Using autocomplete "tel-national" on type "text" is valid -->
<input name="phone2" type="text" autocomplete="tel-national" />
<!--Using autocomplete "tel" on type "tel" is valid -->
<input name="phone3" type="tel" autocomplete="tel" />
Read more about the autocomplete attribute.
The href
attribute on an <a>
link contains a space character, which is not allowed. If you’re trying to link to a phone URL, review the href
attribute to remove unallowed characters, as in this example:
<!-- Invalid as it contains a space character -->
<a href="tel: +123456789">call me</a>
<!-- Valid -->
<a href="tel:+123456789">call me</a>
Source:
A <meta>
tag has been found in the document stating that the charset is windows-1251
, but it actually is utf-8
. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
A <meta>
tag has been found in the document stating that the charset is windows-1252
, but it actually is utf-8
. You should update the tag to reflect the actual encoding of the document, for example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
The coordinates specified for an <area>
element using the coords
attribute are not in a valid format.
-
For a rectangle (
shape="rect"
), the formatX1,Y1,X2,Y2
is expected, where the top-left corner is specified byX1, Y1
and the bottom-right corner is specified byX2, Y2
, thereforeX1
must be lower thanX2
, andY1
must be lower thanY2
because the coordinates0, 0
start at the top-left.
-
For a polygon (
shape="poly"
), the formatX1,Y1,X2,Y2,...,Xn,Yn
is expected to contain a list of coordinate pairs (at least 3, for a triangle). -
For a circle (
shape="circle"
), the formatX,Y,R
is expected whereX, Y
represents the coordinates of the center of the circle (from the top-left corner), andR
is the radius.
Read more about the <area>
element:
The accept
attribute may be specified to provide browsers with a hint of what file types will be accepted on an <input>
element. It expects a comma-separated list of allowed file types. Refer to the list of media types to check the accepted tokens. In this example, the first line is invalid while the second is valid:
<input name='file' type='file' accept='doc, docx, pdf' />
<input name='file' type='file' accept='text/doc, text/docx, application/pdf' />
The value used in the datetime
attribute is not in a valid format.
The <time>
HTML element represents a specific period in time. It may include the datetime
attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
Learn more:
The <label>
element represents a caption in a document, and it can be associated with a form input using the for
attribute, which must be an ID. Document IDs cannot contain whitespace.
Example:
<form>
<label for="user_name">Name</label>
<input type="text" id="user_name" />
</form>
Learn more:
The <iframe>
element, used to embed another document inside the current document, accepts both attributes width
and height
which must be valid non-negative integers. Percentages are not allowed for these attributes.
Check the iframe spec.
Space characters are not allowed in href
attributes. Instead, they should be converted to %20
. In this example, the first line is invalid and the second is valid:
<a href="https://example.com#some term">invalid</a>
<a href="https://example.com#some%20term">valid</a>
The href
attribute on an element <a>
contains a character that is not allowed, and should be encoded.
Some typical examples include the pipe character |
that should be replaced by its encoded alternative %7C
, and the left square bracket [
that needs to be encoded as %5B
.
The href
attribute on an <a>
tag contains an space, which is not allowed. Consider replacing space characters with “%20”.
An href
attribute on an a
element contains an invalid URL that has space characters in the domain.
The domain in a URL cannot contain space characters, for example the following are invalid:
<a href="http://my domain.com">link</a>
<a href="http://my%20domain.com">link</a>
A tab character has been found in the domain part for an href
attribute, which is not allowed.
URLs need to be encoded so that special characters area escaped, for example space characters need to be converted to “%20”. All special characters will therefore be converted to a percent sign followed by two hexadecimal characters, to be later decoded. In case a percentage sign (%
) is found without being followed by two hexadecimal digits, a decoding error will be raised.
The most probable cause is an URL that contains a %
that has not been properly encoded to %25
which is the code for the percent sign. For example:
<!-- This is invalid as the percentage sign has not been properly encoded -->
<a href="https://example.com?width=48%">link</a>
<!-- This is valid as the percentage sign has been encoded as %25 -->
<a href="https://example.com?width=48%25">link</a>
Read more about the URI spec
The at symbol (@
) should be percent-encoded as %40
in order to include it at an href
attribute.
The href
attribute on an element <link>
contains a character that is not allowed, and should be encoded.
Some typical examples include the pipe character |
that should be replaced by its encoded alternative %7C
, and the left square bracket [
that needs to be encoded as %5B
.
A <pattern>
element has been found with an invalid ID. Check the format of the ID and ensure it does not start with a digit, full stop (.) or hyphen (-).
The <pattern>
element is used within <svg>
elements, which use XML 1.0 syntax. That syntax specifies that valid IDs only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.
Learn more:
The specified language code in the lang
attribute of the <html>
tag is not a valid ISO code.
Learn more:
The media
attribute on a <link>
element has not been recognized.
This attribute specified what media the linked resource is optimized for. As an example, the following will link a general stylesheet, and a specific one for printing:
<head>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Valid values for this attribute include:
-
all
. Default, used for all media. -
print
. Used for printers and print previews. -
screen
. Used for computer, tablets or smartphone screens.
Learn more:
An <iframe>
element allows to embed an HTML document inside another HTML document, and its src
attribute is indicated the source URL of the embedded web page. The query part of that URL contains one or more space characters, which are not allowed, for example:
<iframe src="https://maps.google.it/maps?q=2700 6th Avenue"></iframe>
You should properly escape all space characters as %20
like this:
<iframe src="https://maps.google.it/maps?q=2700%206th%20Avenue"></iframe>
Learn more:
The src
attribute on an element <img>
contains a {
curly bracket character, which is not allowed unless properly encoded.
Space characters are not allowed in src
attributes. Instead, they should be converted to %20
. In this example, the first line is invalid and the second is valid:
<img src="https://example.com/?s=some term" alt="description" />
<img src="https://example.com/?s=some%20term" alt="description" />
The src
attribute on an element <img>
contains a character that is not allowed, and should be encoded.
Some typical examples include the pipe character |
that should be replaced by its encoded alternative %7C
, and the left square bracket [
that needs to be encoded as %5B
.
The src
attribute on an <img>
tag is not allowed to contain space characters. You should replace them with “%20
“.
URLs need to be encoded so that special characters area escaped, for example space characters need to be converted to “%20”. All special characters will therefore be converted to a percent sign followed by two hexadecimal characters, to be later decoded. In case a percentage sign (%
) is found without being followed by two hexadecimal digits, a decoding error will be raised.
The most probable cause is an URL that contains a %
that has not been properly encoded to %25
which is the code for the percent sign. For example:
<!-- This is invalid as the percentage sign has not been properly encoded -->
<img alt="" src="https://example.com/img.jpg?width=48%" />
<!-- This is valid as the percentage sign has been encoded as %25 -->
<img alt="" src="https://example.com/img.jpg?width=48%25" />
Read more about the URI spec
URLs need to be encoded so that special characters area escaped, for example space characters need to be converted to “%20”. All special characters will therefore be converted to a percent sign followed by two hexadecimal characters, to be later decoded. In case a percentage sign (%
) is found without being followed by two hexadecimal digits, a decoding error will be raised.
The most probable cause is an URL that contains a %
that has not been properly encoded to %25
which is the code for the percent sign. For example:
<!-- This is invalid as the percentage sign has not been properly encoded -->
<img alt="" src="https://example.com/img.jpg?width=48%" />
<!-- This is valid as the percentage sign has been encoded as %25 -->
<img alt="" src="https://example.com/img.jpg?width=48%25" />
Read more about the URI spec
The sizes
attribute is used to complement the srcset
attribute on an <img>
tag for responsive images. When this attribute is present, all image candidates must specify its width.
Learn more:
The value used in the target
property of an <a>
element has been identified as a keyword because it starts with an underscore _
, but it’s not a valid keyword.
Values starting with an underscore for the target
property are used for reserved keywords like _blank
, _self
, _parent
or _top
.
Learn more:
The value provided on the type
attribute of an a
element is not a valid MIME type.
The type
attribute expects a MIME type that hints at the linked URL’s format.
Read more:
The type
attribute on <a>
elements, when present, gives a hint on the MIME type of the linked resource, for example:
<a href="application/pdf" src="book.pdf">Read our book</a>
<a href="image/jpeg" src="photo.jpeg">See a photo</a>
That is, we’re talking about the type of the linked resource, not the type of the <a>
element, as it’s sometimes misunderstood. The following example is invalid because button
is not a valid MIME type.
<a href="/order.php" type="button">Submit</a>
Learn more:
The value used to define the type
of a link
is not valid. You’re probably using a URL instead of a valid type.
Example of a valid type
:
<link rel="icon" type="image/png" href="favicon.png">
Read more:
The specified type
for an script
element is not a valid MIME type as it’s missing a subtype.
A MIME type most-commonly consists of just two parts: a type and a subtype, separated by a slash (/) — with no whitespace between, for example:
text/javascript
Learn more:
The attributes width
and height
on <img>
elements define the dimensions of the image in CSS pixels, and expect a non-negative integer.
Learn more:
The <iframe>
element, used to embed another document inside the current document, accepts both attributes width
and height
which must be valid non-negative integers. Percentages are not allowed for these attributes.
Check the iframe spec.
<img>
elements accept a width
attribute to specify the size in pixels. This value can only be an integer, it should not contain units or %
. If you need to specify a percentage width, you can do that with CSS:
<img src="photo.jpg" alt="red car" style="width:100%;">
The width
and height
attributes on <img>
and <iframe>
elements expect a digit to indicate the number of pixels. Ensure that this attribute contains only digits.
For example:
<!-- This is invalid because width is not a digit -->
<img width="225px" height="100px" alt="cat" src="cat.jpg" />
<!-- This is valid -->
<img width="225" height="100" alt="cat" src="cat.jpg" />
input
elements can be of different types but zip
is not one of the allowed. Consider using a generic type like text
instead.
Character references must always start with an ampersand (&
) and end with a semicolon (;
), for example the <
character can be referenced as <
.
Learn more:
Always use a language attribute on the <html>
tag to declare the default language of the text in the page, using the lang
property.
Example:
<html lang="fr">
Learn more:
A <meta name="viewport">
element has been found where the allowed values for the viewport prevent users from zooming and scaling the document.
The user-scalable="no"
parameter disables browser zoom on a web page. The maximum-scale
parameter limits the amount the user can zoom. Both are problematic for users with low vision who rely on browser zoom to see the contents of a web page. Consider relaxing these values in order to allow users to resize the documents.
Learn more:
The HTML <h1>
to <h6>
elements represent headings for the different sections of a document, where <h1>
is the highest section and <h6>
is the lowest. Headings are specially important on screen readers as they give a quick overview of the contents of the different sections in the web page, so although it’s technically correct (not an error) to use a <h1>
in this way:
<section class="about">
<article>
<h1>Article heading</h1>
<p>Lorem</p>
</article>
</section>
this will raise a warning as it would be preferrable for example to leave the <h1>
for the heading of the <section>
, and <h2>
for the heading of the article, like this:
<section class="about">
<h1>About heading</h1>
<article>
<h2>Article heading</h2>
<p>Lorem</p>
</article>
</section>
Learn more:
The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks.
Learn more:
A CSS definition for background-image
could not be understood by the parser. Check its definition to ensure that it’s well formed and that it contains an appropriate value.
The value on the display
property is not valid.
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
Learn more:
The specified CSS filter is not a standard one, and may only work in some browsers.
Check out the Filter Effects W3C Working Draft
font-display
isn’t a CSS property, it’s a descriptor for use with the @font-face
at-rule.
Learn more:
This issue is a false positive by the W3C validator, fixed in the latest versions of Nu Validator.
The value revert
is indeed a valid value for the CSS property font-size
.
Learn more:
The @import
CSS rule can be used to import a style sheet into another style sheet. It must appear at the top of the document, and after any @charset
declaration.
Learn more:
The max-width
CSS property sets the maximum width of an element. It prevents the used value of the width
property from becoming larger than the value specified by max-width
.
This property can express a value in different units like px
, em
, %
or ch
, and keyword values, but auto
is not an allowed value.
Some examples of valid values for max-width
:
/* <length> value */
max-width: 3.5em;
/* <percentage> value */
max-width: 75%;
/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);
/* Global values */
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: unset;
Learn more:
An invalid CSS property is being used. Properties starting with mso-
are commonly defined by Microsoft products like Office and Outlook.
These properties, like mso-spacerun
, mso-fareast-font-family
, mso-bidi-font-weight
, mso-margin-bottom-alt
, mso-margin-top-alt
and others starting with mso-
are not standard CSS properties.
Padding properties, unline margin properties, don’t accept negative values. Read more about the CSS box model
CSS styles could not be parsed, check the indicated line to find what caused the parser to fail. Common causes are unclosed curly brackets or comments, missing semicolons or unexpected or empty properties.
Read more about CSS: Cascading Style Sheets syntax
The value break-word
for the property word-break
is deprecated, you should replace it with a valid value.
According to the CSS Text Module Level 3 spec:
For compatibility with legacy content, the word-break property also supports a deprecated
break-word
keyword. When specified, this has the same effect asword-break: normal
andoverflow-wrap: anywhere
, regardless of the actual value of theoverflow-wrap
property.
Learn more:
The value specified for the transform
CSS attribute is not valid.
The transform
CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Learn more:
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.
Learn more:
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;
Learn more:
CSS can’t be properly processed because a computed style is missing a value it depends on.
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.
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).
Read more:
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.
The <a>
element requires either a href
attribute, or a role
attribute.
Learn more:
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.
Learn more:
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>
Learn more:
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 <meta>
element without a content
, itemprop
or property
attributes has been found in an unexpected place.
Check its attributes and context - depending on the section of the document (<head>
or <body>
), the <meta>
element allows different attributes.
Learn more:
A <meta>
tag has been found that is missing its required content
. Example of a valid meta
tag:
<meta name="description" content="Description of the page" />
A <meta>
element without a itemprop
or property
attributes has been found in an unexpected place.
While the <meta>
element is commonly used within the <head>
section of the document, it can also be used within the <body>
section, for example in the context of defining microdata, as in this example:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: $<span itemprop="price">1.00</span>
<meta itemprop="priceCurrency" content="USD" />
</div>
When used within the <body>
section, the <meta>
element is required to have a itemprop
or property
, and a content
attribute, and it can’t have a http-equiv
or charset
attribute.
A common cause for this issue is including a <meta>
element that was intended for the <head>
section (for example one containing a http-equiv
attribute in the <body>
, for example:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<form>
...
</form>
Learn more:
An HTML tag could not be parsed, most probably because of a typo.
Drop-down lists can be defined in HTML by using the <select>
tag, containing the different <option>
s. Each <option>
must have a name, which can be either contained between <option>
and </option>
, or alternatively using the label
attribute.
Example:
<select name="size">
<option value="s">small</option>
<option value="m" label="medium"></option>
</select>
The async
and defer
boolean attributes of the <script>
element control how an external script should be executed once it has been downloaded. The async
attribute makes sense when an external script (defined with the src
attribute) is loaded, or when defining a script of type module
:
<script async src="app.js"></script>
<script type="module">
/* JavaScript module code here */
</script>
Learn more:
The charset
attribute on a <script>
element can be used to specify the character encoding of an external script, whose URL should be specified on the src
attribute.
If the script is not external, then the charset
attribute should not be used, as the character encoding of the HTML document will be used.
Learn more:
The defer
and async
boolean attributes of the <script>
element control how an external script should be executed once it has been downloaded. These attributes only make sense when referring to external scripts, so a src
attribute must also be present to specify the location of the script.
Example:
<script defer src="app.js"></script>
If your script is not external, and is inlined within the HTML document, then you should remove the defer
attribute, like in this example:
<script>
console.log("hello");
</script>
Learn more:
An element is using ARIA attributes, but its role
has not been defined. ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Examples:
<!-- This div uses ARIA but its role is not clear, so it's invalid. -->
<div aria-expanded="true">...</div>
<!-- This div defines clearly its role, so it's valid. -->
<div role="navigation" aria-expanded="true">...</div>
<!-- Nav elements have an implicit navigation role so we don't need the role attribute. -->
<nav aria-expanded="true">...</nav>
Read about Using ARIA: Roles, states and properties.
The element X requires an attribute Y, but it’s not present. Check that element and add the required attribute, like in <X Y="value" />
.
The element X is not allowed as a child element of Y. For example, a <ul>
element cannot have a <div>
child element.
The <h1>
through <h6>
elements are headings for the sections with which they are associated. They should not be empty, for example <h1></h1>
is invalid.
An </a>
end tag has been found to violate nesting rules. <a>
tags can’t include other <a>
tags inside. Most probable cause is an unclosed <a>
tag, like in this example:
<a href="one.html">Page 1
<a href="two.html">Page 2</a>
The <br>
tag inserts a line break, and it’s self-closing so you can use either <br>
or <br />
but </br>
is invalid.
First line<br>
Second line<br />
Third line is invalid</br>
An end tag </code>
has been found violating nesting rules. Check other errors in the same document related to the <code>
element, and fix the unallowed nested elements.
A closing </body>
tag has been found, but there are unclosed elements before it. For example this has an unclosed <section>
element:
<body>
<section>
</body>
A closing tag </li>
has been found, but there were open elements nested inside the <li>
. You need to close the nested elements before you close the <li>
.
A closing tag </li>
has been found, but there were open elements nested inside the <li>
. You need to close the nested elements before you close the <li>
.
For example:
<li>
<span>example
</li>
The above is invalid because you need to close the <span>
tag before you close the <li>
.
This would be valid:
<li>
<span>example</span>
</li>
An end tag </strong>
has been found in an incorrect place within the document, violating nesting rules. A common case is closing it before closing other nested tags, for example:
<!-- This line is incorrect as the <strong> tag was closed before the nested <a> tag -->
<strong><a href="#">link</strong></a>
<!--- This line is OK as every end tag respects the nesting rules -->
<strong><a href="#">link</a></strong>
And end tag has been found that does not match the current open element. Check the context to fix the start and end tags.
An end tag has been implied from the context, but there were open elements. Check other issues in the same document for open tags that need to be closed.
For example, the following will raise a “end tag li implied” issue, because the span
element inside the li
has not been properly closed.
<ul>
<li><span>text<li>
</ul>
Instead, this is correct:
<ul>
<li><span>text</span><li>
</ul>
Your HTML markup contains an end tag for X, but there are nested open elements that need to be closed first. For example, <li><span>example</li>
is invalid because you need to close the <span>
tag before you close the <li>
. This would be valid: <li><span>example</span></li>
.
A character has been found in the document that is not allowed in the charset encoding being used.
The document has been declared to use a windows-1251
charset but the actual contents seems to be utf-8
. You should update the charset to that like in this example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
The label
element may only contain one labelable descendant.
For example:
<label for="age">
Age
<select id="age">
<option>young</option>
<option>old</option>
</select>
</label>
Learn more:
In HTML5 you’re encouraged to use Unicode (UTF-8) character encoding rather than a legacy character encoding such as Latin1 (Windows-1252 or ISO 8859-1).
In short, it can be just a matter of using <meta charset="utf-8"/>
in your document, but you should also ensure that your pages are also saved and served as UTF-8.
The document could not be properly parsed due to malformed characters. Check the document encoding.
<meta>
tags, used for defining metadata about HTML documents, must appear within the <head>...</head>
section, but it has been found out of place. Check the document structure to ensure there are no <meta>
tags outside the head section.
A common cause of this issue is having a duplicated, out of place <head>...</head>
section. Ensure that this section appears in its proper place and is the only container for <meta>
tags.
An end tag </p>
has been found that cannot be matched for an opening tag <p>
. Most of the times this is due to closing the same tag twice, for example:
<p>some text</p></p>
Attributes in HTML elements need to be separated by space, in this example the first line is invalid and the second one is valid:
<a href="page.php"class="big">link</a>
<a href="page.php" class="big">link</a>
And end tag for element X has been found with no corresponding opening tag for it. Most of the times this is due to closing the same tag twice.
Rocket Validator checks HTML on your sites using the latest version of W3C Validator Nu HTML Checker, which is intended for HTML5 documents.
The page scanned is using an obsolete doctype, instead of the expected <!DOCTYPE html>
.
Learn more:
When specifying a numeric value for a CSS property, remember to always include the units, like 3px
or 3em
. Only the 0
value can go without units, and instead of 0px
you can just use 0
.
Learn more:
The aria-label
attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. This attribute does not work consistently with all HTML elements, so the W3C validator is warning about a possible misuse.
Learn more:
Quote characters used for attributes can use either single quotes ('
) or double quotes ("
), and they must be properly matched, for example:
<p class="news">...</p>
A common cause for this issue is forgetting to use the equal sign (=
), so the HTML parser wrongly believes the quote forms part of the attribute name, for example:
<p class "news">this is wrong</p>
The web page could not be validated because it took too long for the remote server to respond.
A table row tr
has been found, containing no td
cells. Check the table and remove empty rows.
Table contents is organized in rows using the <tr>
element, which must contain cells using the <td>
element, as in this example:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Liza</td>
<td>12</td>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</tbody>
</table>
A tr
with no td
cells on it will raise an issue, as in this example:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</tbody>
</table>
Note that self-closing <tr/>
elements also count as empty rows as are like <tr></tr>
.
An end tag has been found after the closing </body>
tag, which breaks the expected HTML document structure.
Check out the document structure, a basic example follows:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
A <
character has been found when an attribute was expected instead. Check the syntax of the affected tag, it’s probably malformed and a <
character inside has been interpreted as an attribute.
For example, this code might cause this issue:
<!-- Malformed img tag -->
<img src="photo.jpg" alt="smiling cat" < />
<!-- Fixed img tag -->
<img src="photo.jpg" alt="smiling cat" />
A tag starting with <?
has been found within the document, but it’s not supported. Probable causes can be:
-
Copy-pasting the contents of an SVG file. If you do that, you should only paste the
<svg>...</svg>
part, but not the first line with<?xml...>
. -
Unprocessed
<?...>
tags on server scripting languages like PHP, like<?php>
Learn more:
- [freeCodeCamp: How to Use SVG Images in CSS and HTML]https://www.freecodecamp.org/news/use-svg-images-in-css-html/)
Attributes for HTML elements must be defined like name="value"
. A common issue is missing the =
, or repeating the "
like in these examples:
<!-- Missing equal sign -->
<p name "value"></p>
<!-- Repeated quotes -->
<p name="value""></p>
The <section>
element can be used to define sections of a document, like chapters, tabbed content, etc. Consider using a heading element (any of <h2>
to </h6>
) to present each section. Example:
<h1>All about guitars</h1>
<section>
<h2>Guitar types</h2>
<p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
<h2>Amplifiers</h2>
<p>Analog, digital, portable...</p>
</section>
A slash character (/
), normally used for self-closing tags, has been found in an unexpected place for a tag, and the validator has decided to ignore it and treat is as a start tag instead.
HTML tags can go in pairs (start tag, end tag) or be self-closing, for example:
<p>This is a paragraph with a start and end p tag</p>
<img src="image.jpg" alt="This is an image with a self-closing tag" />
In HTML5, the ending slash and the preceding space is optional for self-closing tags so all of these are valid:
<img src="image.jpg" alt="This is an image with a self-closing tag" />
<img src="image.jpg" alt="This is an image with a self-closing tag"/>
<img src="image.jpg" alt="This is an image with a self-closing tag">
A common mistake is including a slash tag on a start tag, as in the following example. If the Nu HTML checker encounters that, it will ignore the slash and just treat the tag as a start tag.
<select />
<option value="1">one</option>
</select>
An <a>
tag can’t include other <a>
tags inside. Most probable cause is an unclosed <a>
tag, like in this example:
<a href="one.html">Page 1
<a href="two.html">Page 2</a>
An <a>
element has been found in an invalid place within a <table>
element.
For example, the following code would cause this issue:
<table>
<tr>
<a href="#">link</a>
</tr>
</table>
Instead, the <a>
element should be inside a <td>
element, as a <tr>
can’t hold content directly:
<table>
<tr>
<td>
<a href="#">link</a>
</td>
</tr>
</table>
An opening <body>
tag has been found in an incorrect place. Check that it appears only once in the document, right after the closing </head>
tag, and that the whole document content is contained within <body>
and </body>
tags.
HTML documents are expected to start with a first line containing the Document Type Declaration, that defines the HTML version used. Since HTML5, it’s just <!DOCTYPE html>
, which must appear before the start <html>
tag.
Here’s an example of a minimal HTML5 document:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
All HTML documents must start with a <!DOCTYPE>
(Document Type Declaration), that informs browsers about the type and version of HTML used to build the document. In HTML5, this is simply <!DOCTYPE html>
and must appear at the start of the document.
Here is an example of a minimal HTML document, including the Document Type Declaration at its start:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
An end tag for X has been found that does not correspond to a previous open tag. This usually happens when you close the same tag twice, for example:
<ul>
<li>item</li>
</ul>
</ul>
A <head>
start tag has been found in an unexpected place in the document structure. Check that the <head>
section appears before the <body>
section, and that is not duplicated.
The <head>
section of an HTML document is the container of metadata about the document, and must appear before the <body>
section. A common cause of this issue is duplicated <head>
sections.
Here is an example of a minimal HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
A stray start tag <html>
has been found in the document. As this tag defines the start of the whole HTML document, it should appear only once.
A <script>
start tag has been found in an unexpected place in the document structure. Check that the <script>
section appears within the <head>
or <body>
sections.
Here’s an example of a script inserted in the head of the document:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
console.log("Hello from the head");
</script>
</head>
<body>
<p></p>
</body>
</html>
Learn more:
A <style>
start tag has been found in an unexpected place in the document structure. Check that the <style>
section appears within the <head>
section.
Although in general it’s better to put your styles in external stylesheets and apply them using <link>
elements, CSS styles can also be included inside a document using the <style>
tag. In this case, it should be placed within the <head>
section, like in this example:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
p {
color: #26b72b;
}
</style>
</head>
<body>
<p>This text will be green.</p>
</body>
</html>
Learn more:
A <table>
contains an incoherent number of columns on one of its rows. Check the structure of the table to find the invalid row.
For example, in the following table, the first <tr>
row defines that it’s 2 columns wide, but the second <tr>
row tries to use 5 columns by means of a colspan
attribute:
<table>
<!-- This first row sets the table as 2 columns wide -->
<tr>
<td>First</td>
<td>Second</td>
</tr>
<!-- This second row tries to use 5 columns -->
<tr>
<td colspan="5">Wrong</td>
</tr>
</table>
Learn more:
<iframe>
tags are used to embed another document within the current document. To indicate the contents of that nested document, you can either use the src
attribute with an URL, or directly provide the contents with the srcdoc
attribute. Examples:
<!-- This will embed a document by its URL -->
<iframe src="https://example.com"></iframe>
<!-- This will embed the contents provided in the srcdoc attribute -->
<iframe srcdoc="<p>some content</p>"></iframe>
<!-- This is invalid -->
<iframe><p>some content</p></iframe>
The <ul>
element is used to define unordered lists, where each element must be contained within a <li>
element, like in this example:
<ul>
<li>first element</li>
<li>second element</li>
<li>third element</li>
</ul>
Ensure that there’s no content inside the <ul>
element that is not contained within a <li>
element.
Sometimes this error comes when trying to give a title to the list, for example:
<ul>
Fruits
<li>Apple</li>
<li>Orange</li>
</ul>
Instead, that title text should be outside the list, like:
<span>Fruits</span>
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
Other times, this can come as the concatenation of <li>
elements which results in something like:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Note how in this case that
used to join the <li>
is causing the problem, as it’s content that is not contained by a <li>
element, as required by the <ul>
element.
Learn more:
Read about Normalization in HTML and CSS.
The old <acronym>
element in previous versions is now obsolete, in HTML5 you must use <abbr>
instead.
Learn more:
<td>
elements no longer accept an align
attribute. This can be achieved using CSS like this:
<td style="text-align:center;">content</td>
The aria-controls
attribute identifies an element or elements in the same document whose contents or presence are controlled by the current element. It must point to existing elements by their ID. Check that the IDs contained in that property exist within the same document.
ARIA can express semantic relationships between elements that extend the standard parent/child connection, such as a custom scrollbar that controls a specific region, for example:
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
Learn more:
The aria-describedby
attribute is used to indicate the IDs of the elements that describe the object. It should reference an existing ID on the same document, but that id
was not found.
The aria-hidden
attribute is redundat on an input of type hidden
, so it should be removed.
Example:
<!-- Instead of this... -->
<input type="hidden" aria-hidden="true" id="month" value="10" />
<!-- You can just use this -->
<input type="hidden" id="month" value="10" />
The aria-labelledby
attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs. It should reference an existing ID on the same document, but that id
was not found.
Learn more:
The article
role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website, is implicit when using the <article>
tag.
This role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page. It can be added to generic elements like <div>
to convey this role, for example:
<div role="article">
<h2>Heading</h2>
<p>Content...</p>
</div>
Instead of using this role, it’s preferrable to use the native <article>
element like this:
<article>
<h2>Heading</h2>
<p>Content...</p>
</article>
Learn more:
The <header>
HTML element represents introductory content, typically a group of introductory or navigational aids, and has an implicit role of banner
, so specifying this role is redundant.
The following example represents a banner using the role
attribute:
<div role="banner">
<img src="companylogo.svg" alt="my company name" />
<h1>Title</h1>
<p>Subtitle</p>
</div>
By default, the HTML5 <header>
element has an identical meaning to the banner landmark, unless it is a descendant of <aside>
, <article>
, <main>
, <nav>
, or <section>
, at which point <header>
is the heading for that section and not the equivalent of the site-wide banner.
This example uses the <header>
element instead of the banner
role:
<header>
<img src="companylogo.svg" alt="my company name" />
<h1>Title</h1>
<p>Subtitle</p>
</header>
The <big>
tag is now obsolete. It was used to increase the size of text, you can do that using CSS instead. For example:
<p>Now this is <span style="font-size: larger;">big</span></p>
Read more:
<img>
tags no longer accept a border
attribute. This can be defined using CSS instead, for example:
<img src="..." alt="..." style="border:0;" />
The button
role is used to make an element appear as a button control to a screen reader and can be applied to otherwise non-interactive elements like <div>
. If you’re already using a <button>
element, then it’s redundant to apply it the role button
, as that’s implicit.
<!-- Instead of this -->
<button role="button">Buy</button>
<!-- Do this -->
<button>Buy</button>
Learn more:
The <summary>
HTML element specifies a clickable summary, caption, or legend for a <details>
element’s disclosure box. As the <summary>
element has an implicit button
role, it’s not needed to include it explicitly.
Here’s an example, clicking the <summary> element toggles the state of the parent <details> element open and closed.
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
A keyboard.
</details>
Learn more:
The <center>
tag is no longer valid in HTML, you should use CSS instead, for example:
<p style="text-align:center">this text will be centered</p>
A <script>
element has been found that is using the now obsolete charset
attribute. You can safely remove this attribute.
For example, this is using both type
and charset
attributes, with their default values. Both can be removed:
<script src="app.js" type="text/javascript" charset="UTF-8"></script>
and just use this:
<script src="app.js"></script>
Learn more:
Using the <aside>
element will automatically communicate a section has a role of complementary
, so specifying the role="complementary"
is redundant.
The <footer>
element represents a footer for its nearest sectioning content, and has an implicit role of contentinfo
, so specifying this role is redundant.
The following example marks a <div>
as a footer specifying its role:
<div role="contentinfo">
<h2>Footer</h2>
<!-- footer content -->
</div>
Using the <footer>
element instead is recommended:
<footer>
<h2>Footer</h2>
<!-- footer content -->
</footer>
Lear more:
Malformed comment syntax has been found, check out the affected comment.
HTML comments are helpful to leave notes about the code right next to it. To create a comment, it must start with <!--
and end with -->
, as in this example:
<!-- Good comment -->
<!--
Comments can
be multi-line
-->
A common cause for a malformed comment is using too many hyphens (-
) as in this example:
<!-- Wrong comment --->
A button
element, or an element with the role=button
attribute, is not allowed to be nested inside an <a>
element.
A <footer>
can’t include other <footer>
s inside.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
An element with role=button
can’t have an input
element as descendant.
The ARIA role button
can be added to an element to make it behave like a <button>
– just like a <button>
is not allowed to contain other <input>
elements as descendants, any element with this role is not allowed to contain them either.
All these examples in the following code will raise a similar issue:
<div role="button">
<input type="checkbox" />
</div>
<button>
<input type="checkbox" />
</button>
<a>
<input type="checkbox" />
</a>
Learn more:
A <label>
tag can’t be used inside an <a>
tag. Consider using other tags like <span>
.
A label
element is not allowed as a descendant of a button
element.
The label
element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for
attribute, or by putting the form control inside the label element itself.
Learn more:
A <label>
element cannot contain other <label>
as a descendant. Check for nested elements or closing tags that may have been misinterpreted, for example:
<label>name</label></label>
The <caption>
element specifies the caption (or title) of a table. It’s not allowed for a <caption>
to contain another table.
<select>
elements that are required
and are not multiple
need a placeholder option that has no value
, for example:
<select required>
<option value="">choose size</option>
<option value="s">small</option>
<option value="l">large</option>
</select>
Element IDs in an HTML document must be unique. The HTML validator is indicating the first occurrence of an ID that is repeated. Check the details for that issue to see web pages affected, and the elements within them, to fix that ID repetition.
The <font>
element, used to define the font face, size and color in previous versions of HTML, is no longer valid in HTML5. Instead, you should rely on CSS styles.
For example, you can define a font size of 12px, bold text with inline styles like this:
<p style="font-size: 12px; font-weight: bold;">some text</p>
Learn more about CSS fonts:
A <form>
element has already a form
role, so specifying role="form"
in it is redundant.
Instead of:
<form role="form">
You can simply write:
<form>
The heading
role defines this element as a heading to a page or section, and is implicit in tags <h1>
to <h6>
.
The heading
role indicates to assistive technologies that this element should be treated like a heading. Screen readers would read the text and indicate that it is formatted like a heading.
This ARIA role is only needed to add that role to a generic element like <div>
, for example:
<div role="heading" aria-level="1">This is a main page heading</div>
This defines the text in the <div>
to be the main heading of the page, indicated by being level 1 via the aria-level
attribute. Opt for using the <h1>
(thru <h6>
) element instead:
<h1>This is a main page heading</h1>
Learn more:
A single <img>
element is used to embed an image, so adding the img
role to it is redundant.
The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner, for example:
<div role="img" aria-label="Description of the overall image">
<img src="graphic1.png" alt="">
<img src="graphic2.png">
</div>
Learn more:
The inputmode
attribute specifies what kind of input mechanism would be most helpful for users entering content into the form control. This attribute is not supported in all browsers, so it’s advised to use with caution and consider alternatives for older browsers.
An itemprop
attribute has been found in the document, but it cannot be associated to any item. Most probable cause is the lack of an itemscope
attribute defining an item.
Microdata allows nested groups of properties, which must be scoped to the item they belong to, as in this example:
<div itemscope>
<p>My name is <span itemprop="name">Liza</span> and I'm <span itemprop="age">48</span> years old.</p>
</div>
The label
element may contain only one labelable descendant.
For example:
<label for="age">
Age
<select id="age">
<option>young</option>
<option>old</option>
</select>
</label>
Learn more:
The <script>
tag allows authors to include dynamic scripts and data blocks in their documents. This tag accepts two optional attributes, type
(which is unnecessary if it’s JavaScript, as that’s the default), and src
to indicate the URL of the external script to use.
The language
attribute is now obsolete and should not be used.
Read more about:
A <li>
element is used to define an item of a list, so adding the listitem
role to it is redundant.
The ARIA listitem
role can be used to identify an item inside a list of items. It is normally used in conjunction with the list
role, which is used to identify a list container.
<section role="list">
<div role="listitem">List item 1</div>
<div role="listitem">List item 2</div>
<div role="listitem">List item 3</div>
</section>
When possible, you should use the appropriate semantic HTML elements to mark up a list and its list items — <ul>
or <ol>
, and <li>
. For example:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Read more:
The main
landmark role is used to indicate the primary content of a document. It can be added to an element by using role="main"
, but instead it’s preferable to just use the <main>
element. In that case, it’s unnecessary to make the main role explicit. Examples:
<div role="main">
<!-- this is a valid way to define a main role -->
</div>
<main>
<!-- but this is shorter and uses correct semantic HTML -->
</main>
Read more:
In the days before HTML5, named anchors were used as a way to provide a link to a specific section of a document, for example:
<h2>
<a name="section-5">Section 5</a>
</h2>
Now in HTML5, the name
attribute is obsolete for <a>
tags, and instead, you can use the id
attribute of any element (not just <a>
) as a way to navigate directly to it, for example:
<h2 id="section-5">Section 5</h2>
Read more about:
The <option>
element no longer accepts a name
attribute, which is now obsolete.
Example:
<select id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
</select>
Learn more:
The navigation
landmark role is used to identify major groups of links used for navigating through a website or page content. It can be added to an element that contains navigation links by using role="navigation"
, but instead it’s preferable to just use the <nav>
element. In that case, it’s unnecessary to make the navigation role explicit.
Examples:
<div role="navigation">
<!-- this is a valid way to define a navigation role -->
</div>
<nav>
<!-- but this is shorter and uses correct semantic HTML -->
</nav>
Read more about the nav element and the ARIA Navigation Role.
The <meta>
element no longer accepts a scheme
attribute, it’s now obsolete and should be removed.
For example, old documents adhering to old definitions in DCMI (Dublin Core Metadata Initiative) use this HTML tag to define a date:
<meta name="DC.Date.Created" scheme="W3CDTF" content="2009-11-30" />
As the scheme
attribute is now obsolete, it should now be removed. The following HTML code will pass current validations, but you should check the exact definition to use if you want to keep using the DCMI tags.
<meta name="DC.Date.Created" content="2009-11-30" />
Learn more:
Links created with the <a>
element no longer accept a shape
attribute. In order to define image maps, use the <area>
element instead.
Learn more:
The sizes
attribute is used to complement the srcset
attribute on an <img>
tag for responsive images, therefore it’s not valid if srcset
is missing. Check the HTMLImageElement.srcset guide to learn about the correct usage of the srcset
and sizes
attributes.
The textbox
role, used to identify an element that allows the input of free-form text, is unnecessary for an <input>
element of type text
when it doesn’t have a list
attribute.
Learn more:
The <tt>
tag, used in HTML4 to apply a monospaced (fixed width) font to the text, was deprecated in HTML5. Instead, you should use CSS to apply the desired font.
Example, instead of this deprecated code:
<tt>This is deprecated</tt>
You can define a monospaced text using font-family
:
<span style="font-family: monospace;">This is monospaced text</span>
Learn more:
The HTML <style>
element contains style information for a document, or part of a document, defined in CSS. This element does not need the type
attribute anymore, so it should be omitted.
For example, this style defines that <p>
elements should be in red color.
<style type="text/css">
p {
color: red;
}
</style>
<p>This text will be red.</p>
But, the type
attribute is not used anymore, so we can just use this:
<style>
p {
color: red;
}
</style>
<p>This text will be red.</p>
Read more:
The default type
for <script>
tags is JavaScript
, so you don’t need to include the type for JS resources.
<td>
elements no longer accept a valign
attribute. This can be achieved using CSS like this:
<td style="vertical-align:middle;">content</td>
Read about Normalization in HTML and CSS.
<label>
tags are used to label inputs in form, which need to be present and visible in the document, for example:
<label for="age">Age</label>
<input id="age" />
In HTML5, there’s no need to specify the version
attribute - it is now obsolete. Here’s an example minimal HTML document to start with:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>
Learn more:
Both <table>
and <td>
elements no longer accept a width
attribute. Instead, you should use CSS as in this example:
<table style="width:100%;">
<tr>
<td style="width:50px;">Name</td>
</tr>
</table>
You’re using an attribute X that is no longer valid for element Y, but you can use CSS to achieve the same effect.
Based on the content of the document, the W3C Validator has determined that it’s written in Arabic, and it suggests you specify the direction of text from right to left like this:
<html dir="rtl" lang="ar">
Based on the content of the document, the W3C validator thinks that it’s written in English. Consider explicitly specifying the language using the lang
property.
Example:
<html lang="en">
Learn more:
Based on the content of the document, the W3C validator thinks that it’s written in English, but the lang
property in the <html>
element specifies a different language. Check the language of the document, if it matches the lang
property you can safely ignore and mute this warning.
Example:
<html lang="fr">
Learn more:
Based on the content of the document, the W3C validator has determined that the main language doesn’t match the one specified in the lang
property of the <html>
tag. Check the language of the document, if it matches the lang
property you can safely ignore and mute this warning.
The <th>
HTML element defines a cell as a header of a group of table cells, and must appear within a <tr>
element.
In the following example for a simple table, the first <tr>
contains two <th>
header cells naming the values for each column:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Liza</td>
<td>49</td>
<tr>
<tr>
<td>Joe</td>
<td>47</td>
</tr>
</table>
Learn more:
A <span>
tag has not been closed. Example:
<p><span>I'm forgetting something</p>
<p>Life goes on</p>
An open tag has not been properly closed.
Elements that have the xml:lang
attribute also need a matching lang
attribute. In HTML5 documents, using just the lang
attribute is enough.
Check the HTMLImageElement.srcset guide to learn about the correct usage of the srcset
and sizes
attributes.
Attribute values for HTML elements must be enclosed within quotes. Check for attributes whose values are missing quotes.
Example:
<!-- These are invalid -->
<div class=important></div>
<div class=important"></div>
<!-- This is valid -->
<div class="important"></div>
Still checking your large sites one page at a time?
Save time using our automated web checker. Let our crawler check your web pages on the W3C Validator.