HTML Guide · Rocket Validator

Bad value https://www.w3.org/1998/Math/MathML for the attribute xmlns (only http://www.w3.org/1998/Math/MathML permitted here).

Use the MathML namespace with http:// (not https://) in the xmlns value.

Explanation

The xmlns attribute defines an XML namespace. For MathML in HTML or XHTML, the only permitted namespace URI is:

http://www.w3.org/1998/Math/MathML

Using https:// is not equivalent and fails validation. In HTML5, embedded MathML typically doesn’t set xmlns on <math>; the parser assigns the MathML namespace automatically. In XHTML or XML contexts, xmlns="http://www.w3.org/1998/Math/MathML" is required on the <math> element (or inherited from an ancestor).

HTML examples

Reproducing the issue (invalid https:// namespace)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>MathML Invalid Namespace</title>
</head>
<body>
  <math xmlns="https://www.w3.org/1998/Math/MathML">
    <mi>x</mi><mo>+</mo><mn>1</mn>
  </math>
</body>
</html>

Fix in HTML5 (omit xmlns; let HTML set the namespace)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>MathML Correct in HTML</title>
</head>
<body>
  <math>
    <mi>x</mi><mo>+</mo><mn>1</mn>
  </math>
</body>
</html>

Fix in XHTML/XML (use the exact http:// URI)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>MathML Correct in XHTML/XML</title>
</head>
<body>
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>x</mi><mo>+</mo><mn>1</mn>
  </math>
</body>
</html>

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.

Bad value “icon” for attribute “role” on element “span”.

The icon value for attribute role is not a valid ARIA role.

ARIA Roles: Overview

ARIA roles are used to enhance accessibility by clearly defining the role and purpose of an element for assistive technologies. However, there are defined roles that you need to adhere to:

Standard roles include button, checkbox, alert, dialog, img, etc.
There is no ARIA role named icon.

Solution

To fix the issue, you need to use a valid ARIA role that accurately describes the purpose of the span element. If your intention is to convey that the span contains an icon, you might want to reconsider whether you need a role at all. Often, purely decorative elements should not have a role, or you might use an img role if it conveys a meaningful image.

Here’s how you can address this:

No ARIA role (if purely decorative): If the icon is purely decorative and does not add meaningful content to your page, you should remove the role attribute entirely.
```
<span class="icon"></span>
```
Using img role (if it represents an image): If the span represents an image or an icon that conveys meaningful information, you can use role="img" and provide a proper aria-label.
```
<span class="icon" role="img" aria-label="Icon Description"></span>
```
Using an appropriate role (if interactive): If the icon is part of an interactive element, you might need a different role. For instance, if the icon is inside a button:
```
<button>
   <span class="icon" aria-hidden="true"></span>
   Button text
</button>
```
Here, aria-hidden="true" is used to hide the decorative icon from screen readers as the text provides the necessary context.

Bad value “list” for attribute “role” on element “section”.

Use a valid landmark or list role: remove role="list" from the section, or replace the element with a proper list (ul/ol) or a container that supports role="list".

The role attribute must use values allowed by ARIA for the given context. A section element is a landmark and must not be given role="list". If you intend to mark up a list of items, use semantic list elements: ul/ol with li. If you truly need ARIA list semantics (e.g., for custom components), use a neutral container (div) with role="list" and child elements with role="listitem". Prefer native HTML lists over ARIA roles because they provide built-in semantics and better accessibility. Examples:

Native list: use ul + li.
ARIA list (only if native markup isn’t possible): div role="list" containing div role="listitem".

HTML Examples

Example showing the validation error

<section role="list">
  <div>Item A</div>
  <div>Item B</div>
</section>

Fixed using native list semantics (recommended)

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Fixed using ARIA roles on neutral elements (when custom UI prevents native lists)

<div role="list">
  <div role="listitem">Item A</div>
  <div role="listitem">Item B</div>
</div>

Bad value “listitem” for attribute “role” on element “article”.

Using the ARIA role value listitem on an article element is invalid.

The article element is a landmark with an implicit role of article, and ARIA requires roles to match the element’s semantics. The listitem role is only valid for elements that are direct children of a list-type container with role list or group, or native lists like ul/ol. If you want an article in a list, wrap each article in a proper list container and either rely on native semantics (ul/ol) or use a neutral container with an explicit role="list". Avoid overriding landmark elements with unrelated roles. Use the role attribute only when necessary, and prefer native HTML semantics.

HTML Examples

Invalid: article with role=”listitem”

<article role="listitem">
  <h2>News item</h2>
  <p>Details...</p>
</article>

Valid options

<!-- Option A: Use native list semantics -->

<ul>
  <li>
    <article>
      <h2>News item</h2>
      <p>Details...</p>
    </article>
  </li>
  <li>
    <article>
      <h2>Another item</h2>
      <p>More details...</p>
    </article>
  </li>
</ul>

<!-- Option B: ARIA list with neutral containers -->

<div role="list">
  <div role="listitem">
    <article>
      <h2>News item</h2>
      <p>Details...</p>
    </article>
  </div>
  <div role="listitem">
    <article>
      <h2>Another item</h2>
      <p>More details...</p>
    </article>
  </div>
</div>

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

A space character in the email address within the mailto: link is invalid syntax.

The href attribute on an <a> tag must contain a valid email address after mailto: in order to conform to HTML standards. Email addresses cannot contain spaces. Including a space (as in user@example com) results in invalid markup.

Correct usage:
Remove any spaces from the email address and use a correctly formatted address such as user@example.com.

Invalid example

<a href="mailto:user@example com">Send Email</a>

Valid example

<a href="mailto:user@example.com">Send Email</a>

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

The role attribute value navigation is invalid for a ul element, as it should be used with a nav element or similar suitable elements.

In HTML, the role attribute defines what an element represents in the context of accessible web technologies, primarily for assistive tools like screen readers. The nav element represents a section of a page intended for navigational links, and it inherently provides the role of navigation. If you want to make a ul element serve as navigation, it is more appropriate to use it inside a nav element, or alternatively, set a valid ARIA role on the element itself.

Detailed Explanation

HTML5 introduced a specific set of elements with implicit ARIA roles and behaviors, like the nav element, which implicitly has the navigation role. For backward compatibility or advanced use cases, developers might explicitly set ARIA roles using the role attribute. However, setting an invalid role can lead to accessibility issues, as seen with trying to assign navigation to a ul element.

Instead of applying the navigation role to a ul directly, wrap your ul with a nav element.

The allowed ARIA roles for an ul element are directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar and tree, but not navigation.

Examples

Here is how you can use the nav element with a ul.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

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

The autocomplete attribute on an input, textarea, select or form element lets web developers specify how autocompleting should be handled.

The value none is not valid, instead the value off should be used to disable autocompletion.

Here is an example of how you can adjust your HTML code:

Incorrect usage:

<input type="text" name="username" autocomplete="none">

Correct usage: If you want to disable autofill for an input field, you can use the value off instead of none:

<input type="text" name="username" autocomplete="off">

The attribute value is either the keyword off or on, or a space-separated token list that describes the meaning of the autocompletion value, for example name, email, postal-code and others. Refer to the linked guide to see the full list of accepted values for the autcomplete property.

Bad value “none” for attribute “font-weight” on element “g”.

font-weight

The attribute font-weight can be used on SVG text elements like text but not on g container elements, and none is not a valid value.

The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

This attribute can be used with the SVG elements text, textPath, tref and tspan, but on on g elements.

Its allowed values are normal, bold, bolder, lighter, or a number. The value none is not valid for this attribute.

Here’s an example:

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-weight="normal">Normal text</text>
  <text x="100" y="20" font-weight="bold">Bold text</text>
</svg>

Alternatively, SVG text elements can also be stilyzed using CSS, like so:

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" style="font-weight:normal">Normal text</text>
  <text x="100" y="20" style="font-weight:bold">Bold text</text>
</svg>

Bad value “none” for attribute “text-anchor” on element “g”.

The text-anchor attribute is used within SVG elements like text or textPath to specify the alignment of text relative to a given point, but it’s not allowed on g container elements.

Here’s an example of how you can correctly use the text-anchor attribute on a <text> element in SVG:

<svg width="200" height="200">
  <text x="100" y="100" text-anchor="middle">Centered text</text>
</svg>

In this example:

The text-anchor="middle" attribute is applied directly to the <text> element.
It aligns the text in the middle horizontally around the specified x-coordinate.

You can use the text-anchor element with the SVG elements text, textPath, tref or tspan.

The allowed values for the text-anchor attribute are start, middle or end. The value none is not valid for this attribute.

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

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

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

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

The input element does not support a type attribute value of numeric; the correct attribute value is number.

HTML input elements have a type attribute that specifies the kind of data that the input is expected to contain. When creating a form field for numeric input, you should use type="number", which provides an input control with features like increment/decrement controls, depending on the browser. This allows browsers to render the appropriate interface for numeric inputs and also provides built-in client-side validation to ensure that the entered data is a numerical value.

Here’s an example of how to correctly define an input for numeric values:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Number Input Example</title>
</head>
<body>
  <form>
    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" min="1" max="10">
    <input type="submit" value="Submit">
  </form>
</body>
</html>

In this example, the input element has a type of number, allowing users to input or select a numeric value within the specified range of 1 to 10. Using type="number" instead of any incorrect value, like numeric, ensures that your HTML is compliant with W3C standards.

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 “polygon” for attribute “shape” on element “area”.

“polygon” is not a valid value for the shape attribute on an area element; the correct value is poly.

The area element defines clickable regions inside an image map via usemap. Its shape attribute only accepts rect, circle, poly, or default per the HTML standard. When using poly, list the coords as comma-separated x,y pairs in order around the polygon. Coordinate values are CSS pixels relative to the image’s intrinsic dimensions. Always include an alt for accessibility and an href to make the region interactive. If the region is a circle or rectangle, use circle or rect with the appropriate coordinate syntax.

HTML Examples

Example showing the issue

<!doctype html>
<html lang="en">
<head>
  <title>Image Map - Invalid</title>
</head>
<body>
  <img src="plan.png" usemap="#map1" alt="Floor plan">
  <map name="map1">
    <area shape="polygon" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
  </map>
</body>
</html>

Corrected example

<!doctype html>
<html lang="en">
<head>
  <title>Image Map - Valid</title>
</head>
<body>
  <img src="plan.png" usemap="#map1" alt="Floor plan">
  <map name="map1">
    <area shape="poly" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
  </map>
</body>
</html>

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

Pragma is not a valid value for the http-equiv attribute in HTML5.

In HTML5 (as defined by the WHATWG living standard and W3C), the http-equiv attribute on the meta element only allows certain tokens, such as content-type, default-style, and refresh. The use of Pragma is obsolete and was mainly supported in older HTML specifications for compatibility with HTTP/1.0 proxies. The recommended way to control caching in modern web development is through appropriate HTTP headers sent from the server.

Example of the incorrect usage:

<meta http-equiv="Pragma" content="no-cache">

Correct usage for controlling cache with HTML meta tags (but note, affects only some browsers and is not reliable):

<meta http-equiv="Cache-Control" content="no-cache">

However, even Cache-Control in a meta tag has limited effectiveness. The best practice is to set Cache-Control and Pragma headers server-side, not in HTML.

Correct server-side (not HTML) example:

Cache-Control: no-cache
Pragma: no-cache

Summary:
Remove the <meta http-equiv="Pragma" content="no-cache"> tag from your HTML and rely on server-side HTTP headers to manage caching. If you still need a meta-based (less effective) solution for rare cases, use http-equiv="Cache-Control".

Minimal valid HTML example (without the invalid meta tag):

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>No Invalid http-equiv Value</title>
  </head>
  <body>
<!-- Content goes here -->

  </body>
</html>

Bad value “presentation” for attribute “role” on element “img”

Use role="none" (or remove the role) instead of role="presentation" on an img.

The role attribute maps elements to ARIA roles. For images, the valid way to make an image decorative is to either omit the ARIA role and use an empty alt attribute (alt=""), or use the ARIA role none. In ARIA 1.1, role="none" and role="presentation" are equivalent, but the W3C HTML Validator flags role="presentation" on img because the correct, accessible pattern is an empty alt to hide the image from assistive tech. Use alt="" alone, or pair it with role="none" if you need an explicit ARIA role. If the image conveys meaning, provide a descriptive alt and no role.

HTML Examples

Example that reproduces the issue

<img src="avatar.png" alt="" role="presentation">

Fixed examples

Decorative image (preferred minimal fix):

<img src="avatar.png" alt="">

Informative image:

<img src="chart.png" alt="Quarterly sales trend line chart">

Bad value “presentational” for attribute “role” on element X.

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

script
type

Bad value “rowgroup” for attribute “role” on element “header”.

An element with role="rowgroup" is a group of rows within a tabular structure. A rowgroup contains one or more rows of cells, grid cells, column headers, or row headers within a grid, table or treegrid, as in this example:

<div
  role="table"
  aria-label="Populations"
  aria-describedby="country_population_desc">
  <div id="country_population_desc">World Populations by Country</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="descending">Country</span>
      <span role="columnheader" aria-sort="none">Population</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">Finland</span>
      <span role="cell">5.5 million</span>
    </div>
    <div role="row">
      <span role="cell">France</span>
      <span role="cell">67 million</span>
    </div>
  </div>
</div>

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>

Bad value “section” for attribute “role” on element “section”.

Using role="section" on a <section> element is unnecessary and not recommended.

The <section> element is a semantic HTML5 element that is used to define sections within a document. A <section> inherently carries the semantics of a structural region, so you don’t need to explicitly declare a role attribute for it. The role attribute in HTML is mainly used to enhance accessibility by explicitly defining the purpose of an element when the element’s native HTML semantics are missing or insufficient. However, in this case, since <section> is already semantically meaningful, assigning a role="section" results in redundancy and can cause validation warnings or errors.

HTML5 and ARIA (Accessible Rich Internet Applications) guidelines suggest only using roles when absolutely necessary. Misusing roles can lead to confusion for assistive technologies, potentially impacting user accessibility.

Here’s a correct use of the <section> element without the role attribute:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document Title</title>
</head>
<body>
  <header>
    <h1>Website Header</h1>
  </header>
  
  <section>
    <h2>Section Heading</h2>
    <p>This is a paragraph within the section.</p>
  </section>
  
  <footer>
    <p>Website Footer</p>
  </footer>
</body>
</html>

By removing role="section", you leverage the semantic meaning that the <section> element already provides, ensuring cleaner, more accessible, and standards-compliant HTML.