HTML validation issues

A “charset” attribute on a “meta” element found after the first 1024 bytes.

charset
meta

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:

W3C: document metadata

A document must not include both a “meta” element with an “http-equiv” attribute whose value is “content-type”, and a “meta” element with a “charset” attribute.

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

A document must not include more than one “meta” element with a “charset” attribute.

meta
charset

A document must not include more than one visible “main” element.

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:

MDN: Aria Main role HTML Spec: the main element

A “link” element must not appear as a descendant of a “body” element unless the “link” element has an “itemprop” attribute or has a “rel” attribute whose value contains “dns-prefetch”, “modulepreload”, “pingback”, “preconnect”, “prefetch”, “preload”, “prerender”, or “stylesheet”.

link

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:

* HTML Spec: the link element

A “link” element with a “rel” attribute that contains the value “preload” must have an “as” attribute.

Almost standards mode doctype. Expected “<!DOCTYPE html>”.

A “meta” element with an “http-equiv” attribute whose value is “X-UA-Compatible” must have a “content” attribute with the value “IE=edge”.

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.

An element with “role=tab” must be contained in, or owned by, an element with “role=tablist”.

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:

* MDN: ARIA tab role

An element with the attribute “role=button” must not appear as a descendant of the “a” element.

An element with the attribute “tabindex” must not appear as a descendant of the “a” element.

tabindex
a

An element with the attribute “tabindex” must not appear as a descendant of the “button” element.

An ID must not contain whitespace

An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

alt
img

<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" />

A numeric character reference expanded to carriage return.

Any “select” descendant of a “label” element with a “for” attribute must have an ID value that matches that “for” attribute.

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:

HTML Living Standard: the label element HTML Living Standard: the select element

Article lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all articles.

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>

A “script” element with a “src” attribute must not have a “type” attribute whose value is anything other than the empty string, a JavaScript MIME type, or “module”.

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:

A slash was not immediately followed by “>”.

slash

A table row was X columns wide and exceeded the column count established by the first row (Y).

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: * MDN: HTML table basics

A table row was X columns wide, which is less than the column count established by the first row (Y).

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:

MDN: The table element HTML Spec: The table element

Attribute “aria-required” is unnecessary for elements that have attribute “required”.

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:

MDN: using the aria-required attribute W3C: aria-required

Attribute “autocomplete” is only allowed when the input type is “color”, “date”, “datetime-local”, “email”, “hidden”, “month”, “number”, “password”, “range”, “search”, “tel”, “text”, “time”, “url”, or “week”.

autocomplete

Attribute “charset” not allowed on element “meta” at this point.

meta
charset

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:

* HTML Spec: the meta element

Attribute “controlslist” not allowed on element “video” at this point.

Attribute “currency” not allowed on element “span” at this point.

Attribute “displaytext” not allowed on element “span” at this point.

Attribute “height” not allowed on element “table” at this point.

Attribute “http-equiv” not allowed on element “meta” at this point.

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

Attribute “isolang” not allowed on element “html” at this point.

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">

Wikipedia: list of ISO 639-1 codes

Attribute “labelledby” not allowed on element “svg” at this point.

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>

Attribute “maxlength” is only allowed when the input type is “email”, “password”, “search”, “tel”, “text”, or “url”.

Attribute “minlength” is only allowed when the input type is “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:

MDN: minlength attribute

Attribute “name” not allowed on element “meta” at this point.

meta
name

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:

* HTML Spec: the meta element

Attribute “<” not allowed on element “X” at this point.

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" />

Attribute “ontouchstart” not allowed on element “div” at this point.

Attribute “pattern” is only allowed when the input type is “email”, “password”, “search”, “tel”, “text”, or “url”.

Attribute “placeholder” is only allowed when the input type is “email”, “number”, “password”, “search”, “tel”, “text”, or “url”.

placeholder

Attribute “required” is only allowed when the input type is “checkbox”, “date”, “datetime-local”, “email”, “file”, “month”, “number”, “password”, “radio”, “search”, “tel”, “text”, “time”, “url”, or “week”.

Attribute “seamless” not allowed on element “iframe” at this point.

Attribute “st_title” not allowed on element “span” at this point.

Attribute “st_url” not allowed on element “span” at this point.

Attribute “type” not allowed on element “textarea” at this point.

Attribute “validate” not allowed on element “form” at this point.

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:

* HTML Spec: novalidate

Attribute value missing.

missing value

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>

Attribute with the local name “xmlns:(fb|og)” is not serializable as XML 1.0

Attribute “X” is not serializable as XML 1.0.

Attribute “xmlns:fb” not allowed here.

Attribute “xmlns:og” not allowed here.

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:

* W3C: @xmlns deprecation

* Open Graph Protocol

Attribute “X” not allowed on element “Y” at this point.

Bad character “X” after “<”. Probable cause: Unescaped “<”. Try escaping it as “<”.

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 &lt; 2</p>

Bad start tag in “img” in “noscript” in “head”.

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:

MDN: noscript HTML Living Standard: the noscript element

Bad value “-1” for attribute “aria-setsize” on element “li”: Expected a digit but saw “-” instead.

Bad value “alert” for attribute “role” on element “ul”.

Bad value “aria-expanded” for attribute “aria-expanded” on element “button”.

Bad value “auto” for attribute “height | weight” on element “img”: Expected a digit but saw “a” instead.

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:

MDN: the img element

Bad value “button” for attribute “role” on element “li”.

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:

* MDN: ARIA button role

Bad value “cache-control” for attribute “http-equiv” on element “meta”.

Bad value “company” for attribute “autocomplete” on element “input”: The string “company” is not a valid autofill field name.

Bad value “contact” for attribute “autocomplete” on element “input”: The string “contact” is not a valid autofill field name.

Bad value “Content-Script-Type” for attribute “http-equiv” on element “meta”.

Bad value “Content-Style-Type” for attribute “http-equiv” on element “meta”.

Bad value “false” for attribute “hidden” on element X.

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>

form
action

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>

Bad value for attribute “href” on element “a”: Illegal character in fragment: “#” is not allowed.

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:

Wikipedia: URI fragment

Bad value (.*) for attribute “href” on element “a”: Illegal character in path segment

Bad value “” for attribute “href” on element “link”: Must be non-empty.

Bad value “” for attribute “id” on element “select”: An ID must not be the empty string.

id
empty

Bad value “” for attribute “id” on element X: An ID must not be the empty string.

Bad value “” for attribute “max” on element “input”: The empty string is not a valid floating point number.

max
input

Bad value “” for attribute “src” on element “iframe”: Must be non-empty.

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:

HTML Living Standard: src attribute on iframe

Bad value for attribute “src” on element “img”: Illegal character in scheme data: “<” is not allowed.

Bad value “” for attribute “src” on element “img”: Must be non-empty.

Bad value “” for attribute “target” on element “a”: Browsing context name must be at least one character long.

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:

HTML Living Standard: Browsing context names

Bad value “” for attribute “(width|height)” on element “img”: The empty string is not a valid non-negative integer.

Bad value “http://” for attribute “href” on element “a”: Invalid host: empty host.

Bad value “https://www.w3.org/1999/xlink” for the attribute “xmlns:link” (only “http://www.w3.org/1999/xlink” permitted here).

Bad value “https://www.w3.org/2000/svg” for the attribute “xmlns” (only “http://www.w3.org/2000/svg” permitted here).

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:

* MDN: Namespaces crash course

Bad value “mailto: X” for attribute “href” on element “a”: Illegal character in scheme data: space is not allowed.

<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>

Bad value “nope” for attribute “autocomplete” on element “form”.

The correct way to disable autocomplete is using the value off.

Example:

<form autocomplete="off">

Learn more:

HTML Spec: autocomplete

Bad value “nope” for attribute “autocomplete” on element “input”: The string “nope” is not a valid autofill field name.

The correct way to disable autocomplete is using the value off.

Example:

<input type="text" name="firstName" id="firstName" required autocomplete="off" />

Learn more:

HTML Spec: autocomplete

Bad value “”og:type”” for attribute “property” on element “meta”: The string “”og:type”” is not an absolute URL.

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" />

Bad value “rocketlazyloadscript” for attribute “type” on element “script”: Subtype missing.

Bad value “screen,projection” for attribute “media” on element “link”: The media “projection” has been deprecated

Bad value “search” for attribute “role” on element “input”.

<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:

MDN: input type search MDN: ARIA search role

Bad value “street-address” for attribute “autocomplete” on element “input”: The autofill field name “street-address” is not allowed in this context.

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.

Bad value “tel-national” for attribute “autocomplete” on element “input”: The autofill field name “tel-national” is not allowed in this context.

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.

Bad value “tel: X” for attribute “href” on element “a”: Illegal character in scheme data: space is not allowed.

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:

IETF: tel URI for Telephone Numbers

Bad value “text/html; charset=windows-1251” for attribute “content” on element “meta”: “charset=” must be followed by “utf-8”.

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">

Bad value “text/html; charset=windows-1252” for attribute “content” on element “meta”: “charset=” must be followed by “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">

Bad value “X1,Y1,X2,Y2” for attribute “coords” on element “area”: A circle must have three comma-separated integers. The first integer must be less than the third. A polyline must have at least six comma-separated integers.

Bad value “X” for attribute “accept” on element “input”: Expected a token character or “/” but saw “,” instead.

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' />

Bad value X for attribute “datetime” on element “time”: The literal did not satisfy the time-datetime format.

Bad value “X” for attribute “for” on element “label”: An ID must not contain whitespace.

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:

Bad value X for attribute “height” on element “iframe”: Expected a digit but saw “%” instead.

Bad value X for attribute “href” on element “a”: Illegal character in fragment: space is not allowed.

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>

Bad value X for attribute “href” on element “a”: Illegal character in query

Bad value “X” for attribute “href” on element “a”: Illegal character in query: space is not allowed.

Bad value X for attribute “href” on element “a”: Invalid host: Illegal character in domain: tab is not allowed.

Bad value X for attribute “href” on element “a”: Percentage ("%") is not followed by two hexadecimal digits.

url encoding

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:

HTML Spec: link types

Bad value X for attribute “(width | height)” on element “img”: Expected a digit but saw “.” instead.

Bad value X for attribute “width” on element “iframe”: Expected a digit but saw “%” instead.

iframe
width

Bad value “X%” for attribute “width” on element “img”: Expected a digit but saw “%” instead.

img
width

<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%;">

Bad value “Xpx” for attribute “width | height” on element “img | iframe”: Expected a digit but saw “p” instead.

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" />

Bad value “zip” for attribute “type” on element “input”.

Character reference was not terminated by a semicolon.

Consider adding a “lang” attribute to the “html” start tag to declare the language of this document.

lang

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:

W3C: Declaring language in HTML

Consider avoiding viewport values that prevent users from resizing documents.

Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).

h1
headings

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:

W3C: Headings and sections

Content-Security-Policy HTTP header: Bad content security policy

CSS: “background-image”: Parse Error.

CSS: “display”: X is not a “display” value.

css
display

CSS: “filter”: "X" is not a “filter” value.

css
filter

CSS: “font-display”: Property “font-display” doesn't exist.

CSS: “font-size”: “revert” is not a “font-size” value.

CSS: @import are not allowed after any valid statement other than @charset and @import.

css
import

CSS: “max-width”: “auto” is not a “max-width” value.

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:

MDN: CSS max-width

CSS: “min-height”: Too many values or values are not recognized.

CSS: “mso-X”: Property “mso-X” doesn't exist.

CSS: “padding-top”: “-X” negative values are not allowed.

CSS: Parse Error.

CSS: The value “break-word” is deprecated

CSS: Unknown pseudo-element or pseudo-class “::file-selector-button”.

CSS: “width”: Too many values or values are not recognized.

css
width

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:

MDN: CSS width

CSS: “X”: Cannot invoke "org.w3c.css.values.CssValue.getType()" because "Y" is null.

CSS: “X”: Parse Error.

CSS: “X”: Property “X” doesn't exist.

css
property

Document uses the Unicode Private Use Area(s), which should not be used in publicly exchanged documents.

Duplicate attribute “X”.

duplicate attribute

Duplicate ID “X”.

id

Element “a” is missing one or more of the following attributes: “href”, “role”.

Element “div” is missing a required instance of child element “dd | dt”.

dl
dd
dt
div

Element “div” not allowed as child of element “ul” in this context. (Suppressing further errors from this subtree.)

Element “dl” is missing a required child element.

dl

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:

HTML Spec: the dl element The riddles of Bilbo and Gollum

Element “head” is missing a required instance of child element “title”.

head
title

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>

Element “img” is missing required attribute “src”.

Element “meta” is missing one or more of the following attributes: “content”, “itemprop”, “property”.

Element “meta” is missing one or more of the following attributes: “content”, “property”.

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" />

Element “meta” is missing one or more of the following attributes: “itemprop”, “property”.

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:

HTML Living Spec: Microdata MDN: Microdata

Element name “X” cannot be represented as XML 1.0.

Element “option” without attribute “label” must not be empty.

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>

Element “script” must not have attribute “async” unless attribute “src” is also specified or unless attribute “type” is specified with value “module”.

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:

MDN: JavaScript Modules

Element “script” must not have attribute “charset” unless attribute “src” is also specified.

Element “script” must not have attribute “defer” unless attribute “src” is also specified.

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:

* MDN: HTMLScriptElement

Element “title” must not be empty.

The <title> element, used to define the document’s title, is required and must not be empty.

Example:

<html>
  <head>
    <title>Automated Website Validator</title>
  </head>
  <body>
    <p>...</p>
  </body>
</html>

Element X is missing one or more of the following attributes: “role”.

role
aria

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.

Element X is missing required attribute Y.

required attribute

Element “X” not allowed as child of element “Y” in this context. (Suppressing further errors from this subtree.)

nesting

Empty heading.

heading

End tag “a” violates nesting rules.

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>

End tag “br”.

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>

End tag “code” violates nesting rules.

End tag for “body” seen, but there were unclosed elements.

body
end tag

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>

End tag “li” seen, but there were open elements.

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>

End tag “strong” violates nesting rules.

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>

End tag X did not match the name of the current open element Y.

End tag “X” implied, but there were open elements.

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>

End tag X seen, but there were open elements.

unexpected end tag

Forbidden code point X

Internal encoding declaration “windows-1251” disagrees with the actual encoding of the document (“utf-8”).

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">

“label” element with multiple labelable descendants.

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:

* HTML Living Standard: the label element

Legacy encoding “windows-1252” used. Documents must use UTF-8.

Malformed byte sequence:

“meta” element between “head” and “body”.

No “p” element in scope but a “p” end tag seen.

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>

No space between attributes.

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>

No “X” element in scope but a “X” end tag seen.

unexpected end tag

Obsolete doctype. Expected “<!DOCTYPE html>”.

Only “0” can be a “unit”. You must put a unit after your number

css
units

Possible misuse of “aria-label”. (If you disagree with this warning, file an issue report or send e-mail to www-validator@w3.org.)

Quote “"” in attribute name. Probable cause: Matching quote missing somewhere earlier.

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>

Read timed out

timeout

Row X of a row group established by a “tbody” element has no cells beginning on it.

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>.

Saw an end tag after “body” had been closed.

end tag
body

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>

Saw “<” when expecting an attribute name. Probable cause: Missing “>” immediately before.

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" />

Saw “<?”. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.)

Saw “"” when expecting an attribute name. Probable cause: “=” missing immediately before.

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>

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

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>

Self-closing syntax (“/>”) used on a non-void HTML element. Ignoring the slash and treating as a start tag.

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>

Start tag “a” seen but an element of the same type was already open.

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>

Start tag “a” seen in “table”.

table
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>

Start tag “body” seen but an element of the same type was already open.

body

Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.

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>

Stray doctype.

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>

Stray end tag “X”.

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>

Stray start tag “head”.

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>

Stray start tag “html”.

Stray start tag “script”.

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:

* MDN: script element

Stray start tag “style”.

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:

* MDN: style element

Table columns in range X…Y established by element “td” have no cells beginning in them.

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:

MDN: The table element HTML Spec: The table element

Text not allowed in element “iframe” in this context.

<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>

Text not allowed in element “ul” in this context.

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>
   &nbsp;
   <li>Second item</li>
  &nbsp;
   <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:

HTML Living Standard: the ul element HTML Living Standard: the li element

Text run is not in Unicode Normalization Form C.

The “acronym” element is obsolete. Use the “abbr” element instead.

The “align” attribute on the “td” element is obsolete. Use CSS instead.

The “aria-controls” attribute must point to an element in the same document.

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:

* W3C WAI ARIA 1.2 aria-controls

The “aria-describedby” attribute must point to an element in the same document.

The “aria-hidden” attribute must not be specified on an “input” element whose “type” attribute has the value “hidden”.

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 must point to an element in the same document.

aria-labelledby

The “article” role is unnecessary for element “article”.

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:

* MDN: ARIA article role

The “banner” role is unnecessary for element “header”.

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” element is obsolete. Use CSS instead.

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:

W3C: obsolete features

The “border” attribute is obsolete. Consider specifying “img { border: 0; }” in CSS instead.

The “button” role is unnecessary for element “button”.

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:

MDN: ARIA button role

The “button” role is unnecessary for element “summary”.

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:

* MDN: summary element

* MDN: ARIA button role

The “center” element is obsolete. Use CSS instead.

center
css

The “charset” attribute on the “script” element is obsolete.

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:

HTML Spec: obsolete but conforming features

The “complementary” role is unnecessary for element “aside”.

The “contentinfo” role is unnecessary for element “footer”.

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:

MDN: ARIA contentinfo role MDN: footer * HTML Spec: the footer element

The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment.

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 , 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 --->

The element “button” must not appear as a descendant of the “a” element.

button
a

The element “footer” must not appear as a descendant of the “footer” element.

footer

The element “input” must not appear as a descendant of an element with the attribute “role=button”.

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:

HTML Spec: the button element MDN: ARIA button role

The element “label” must not appear as a descendant of the “a” element.

The element “label” must not appear as a descendant of the “button” element.

The element “label” must not appear as a descendant of the “label” element.

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 element “table” must not appear as a descendant of the “caption” element.

The first child “option” element of a “select” element with a “required” attribute, and without a “multiple” attribute, and without a “size” attribute whose value is greater than “1”, must have either an empty “value” attribute, or must have no text content. Consider either adding a placeholder option label, or adding a “size” attribute with a value equal to the number of “option” elements.

<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>

The first occurrence of ID “X” was here.

id

The “font” element is obsolete. Use CSS instead.

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:

MDN: CSS font

The “form” role is unnecessary for element “form”.

form
role

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 is unnecessary for element “h1” to "h6".

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:

MDN: ARIA heading role

The “img” role is unnecessary for element “img”.

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:

* MDN: ARIA img role

The “inputmode” attribute is not supported in all browsers. Please be sure to test, and consider using a polyfill.

inputmode

The “itemprop” attribute was specified, but the element is not a property of any item.

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>

Learn more about microdata.

The “label” element may contain at most one “button”, “input”, “meter”, “output”, “progress”, “select”, or “textarea” descendant.

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:

* HTML Living Standard: the label element

The “language” attribute on the “script” element is obsolete. You can safely omit it.

The “listitem” role is unnecessary for element “li”.

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:

* MDN: Listitem role

The “main” role is unnecessary for element “main”.

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>

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>

The “type” attribute is unnecessary for JavaScript resources.

The “valign” attribute on the “td” element is obsolete. Use CSS instead.

The value of attribute X on element Y from namespace “http://www.w3.org/1999/xhtml” is not in Unicode Normalization Form C.

The value of the “for” attribute of the “label” element must be the ID of a non-hidden form control.

<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" />

The “version” attribute on the “html” element is obsolete. You can safely omit it.

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:

W3C: deprecation notice of version attribute in html root element

The “width” attribute on the table (or td) element is obsolete. Use CSS instead.

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>

The “X” attribute on the “Y” element is obsolete. Use CSS instead.

css

This document appears to be written in Arabic. Consider adding “dir="rtl"” to the “html” start tag.

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">

This document appears to be written in English but the “html” start tag has an empty “lang” attribute. Consider using “lang="en"” (or variant) instead.

lang

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:

W3C: Declaring language in HTML

This document appears to be written in English but the “html” start tag has X

lang

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:

W3C: Declaring language in HTML

This document appears to be written in X but the “html” start tag has “lang=Y”.

lang

“th” start tag in table body.

th
table

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:

MDN: The Table Header element HTML Spec: the th element

Unclosed element “span”.

Unclosed element “X”.

unclosed tag

When the attribute “xml:lang” in no namespace is specified, the element must also have the attribute “lang” present with the same value.

When the “srcset” attribute has any image candidate string with a width descriptor, the “sizes” attribute must also be present.

“X” in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.

unquoted

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>

HTML Checking for Large Sites

HTML issues checked by Rocket Validator.