HTML Guide

Attributes in HTML elements must be unique. For example, <a id="one" id="two"> is invalid as the attribute id is repeated.

The id attribute is used to identify a single element within a document, and is required to be unique. Check the document for repeated IDs.

A <a> tag element is missing required attributes, depending on other present attributes.

Depending on the use of other HTML attributes, an <a> tag may require additional attributes. For example, when using aria-selected to build a tab list, this is an example of valid code using role, aria-selected, aria-controls and aria-labelledby:

<div class="tab-interface">
  <div role="tablist" aria-label="Sample Tabs">
    <span
      role="tab"
      aria-selected="true"
      aria-controls="panel-1"
      id="tab-1"
      tabindex="0">
      First Tab
    </span>
    <span
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1">
      Second Tab
    </span>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Content for the second panel</p>
  </div>
</div>

The <a> element requires either a href attribute, or a role attribute.

The <dl> element, used to create a definition lists that matches some terms with their definitions, has nesting issues related to <div> elements used with it.

Using aria-required on a div element requires more context about that element, by providing one of the attributes aria-expanded, aria-valuemax, aria-valuemin, aria-valuenow, role.

When possible, you should prefer semantic tags like input, select and textarea, and use the required attribute, but when form controls are created using non-semantic elements, such as a div element, the aria-required attribute should be included with a value of true to indicate to assistive technologies that user input is required on the element for the form to be submittable. In that case, other attributes might be needed to make the element valid.

For example, we could build a radiogroup using a div like this:

<div aria-required="true">
  <div data-value="One"></div> 1
  <div data-value="Two"></div> 2
  <div data-value="Three"></div> 3
</div>

This HTML snippet would then be decorated using CSS and added functionality using JavaScript. However, the W3C validator will complain that the element div is missing one of the attributes aria-expanded, aria-valuemax, aria-valuemin, aria-valuenow, role.

We can fix that by adding the appropiate role to that div element, like this:

<div aria-required="true" role="radiogroup">
  <div data-value="One"></div> 1
  <div data-value="Two"></div> 2
  <div data-value="Three"></div> 3
</div>

Here is an example showing how to add the “role” attribute to the “div” element:

<div role="region">
    <!-- Your content goes here -->
</div>

In this example, the role attribute is added with the value radiogroup. You can choose the appropriate ARIA role based on the purpose or role of your div element.

Remember to also provide the necessary values for the specified attributes if you are adding aria-valuemax, aria-valuemin, or aria-valuenow to ensure proper accessibility and usability of your content.

A <div> tag has been found as a direct child of an <ul> tag, and this is not allowed. For example, <ul><div><li>item</li></div></ul> is not valid, but <ul><li><div>item</div></li></ul> is valid as the direct child of <ul> is <li>.

The <dl> element, used to create a definition lists that matches some terms with their definitions, is missing a required child element.

The following list will cause this issue, as it’s missing a <dt> to specify the term the given definition refers to:

<dl>
  <dd>A box without hinges, key, or lid, yet golden treasure inside is hid.</dd>
</dl>

Fixing the above example is as easy as including the missing <dt> with the term:

<dl>
  <dt>Egg</dt>
  <dd>A box without hinges, key, or lid, yet golden treasure inside is hid.</dd>
</dl>

The <dl> element is used in HTML to represent a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

For example, the following is a description list with a single term and its definition:

<dl>
  <dt>Rocket Validator</dt>
  <dd>
    The fastest site-wide HTML and Accessibility checker.
  </dd>
</dl>

Description lists also allow to specify different terms for the same definition, as in this example:

<dl>
  <dt>Rocket Validator</dt>
  <dt>Rocket</dt>
  <dt>RV</dt>
  <dd>
    The fastest site-wide HTML and Accessibility checker.
  </dd>
</dl>

Or, we can have a single term with multiple definitions:

<dl>
  <dt>Rocket Validator</dt>
  <dd>
    The fastest site-wide HTML and Accessibility checker.
  </dd>
  <dd>
    The web site you're browsing right now.
  </dd>
</dl>

In all of these cases, a <dt> term always requires one (or more) <dd> definition elements, so the following is invalid because it’s incomplete, it has an undefined term:

<dl>
  <dt>The Meaning of Life</dt>
</dl>

The <head> section of an HTML document contains metadata about the document, and as a minimum it must include a <title> tag defining the document title.

Common causes for this issue are forgetting to define the <title>, or duplicated <head> sections where one of them does not include the title.

Here’s an example of a minimal HTML document including the title:

<!DOCTYPE html>
<html>
  <head>
    <title>Don't panic! This is the title</title>
  </head>
  <body>
    <p></p>
  </body>
</html>

<img> tags used to display images require the attribute src to indicate the source of the image, for example <img src="/img/photo.jpg" />.

link elements are used to link to external resources, such as stylesheets, scripts, and icons. Including relevant attributes in the link element helps provide additional information about the linked resource.

• rel: The rel attribute specifies the relationship between the current document and the linked resource, and can also provide additional information about the type of linked resource. For example, using rel="stylesheet" for a linked CSS file or rel="icon" for a linked favicon.

• itemprop: If the linked resource is an HTML document or a microdata vocabulary like Schema.org, use itemprop to specify properties the linked document or vocabulary defines.

• property: If the linked resource is an RDF resource, use property to provide metadata about the relationship between the current document and the resource being linked.

Example with rel attribute:

<head>
  <link rel="stylesheet" href="styles.css">
  <!-- Other meta tags -->
</head>

Example with itemprop and property attributes:

<head>
  <link itemprop="mentions" href="https://example.com/"> 
  <link property="schema:citation" href="https://example.com/article.html">
   <!-- Other meta tags -->
</head>

By adding itemprop, property, or rel as necessary, you can ensure your link elements provide appropriate context and semantic meaning to your HTML document.

There’s an incomplete or incorrectly formed <meta> tag. The <meta> tag in HTML is used to provide metadata about the HTML document. This metadata is typically specified using attributes like charset, content, http-equiv, itemprop, name, and property.

To fix this issue, you need to ensure that your <meta> tags include at least one of these attributes. Here are some examples of properly formed <meta> tags with each of these attributes:

1. Using the charset attribute:

   <meta charset="UTF-8">

   This specifies the character encoding for the HTML document, which is crucial for displaying text correctly in different languages.

2. Using the content and name attributes:

   <meta name="description" content="A brief description of the webpage content.">

   This provides a description of the webpage content, which can be used by search engines.

3. Using the http-equiv and content attributes:

   <meta http-equiv="refresh" content="30">

   This specifies information to be passed to the browser, such as refreshing the page every 30 seconds.

4. Using the property and content attributes:

   <meta property="og:title" content="Your Webpage Title">

   This is used for Open Graph meta tags, which improve the appearance of shared content on social media platforms.

Correct Usage Example

Here’s an example of an HTML document with a properly formed set of <meta> tags:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A brief description of the webpage content.">
    <meta http-equiv="refresh" content="30">
    <meta property="og:title" content="Your Webpage Title">
    <title>Document</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

A <meta> element without a content, itemprop or property attributes has been found in an unexpected place.

Check its attributes and context - depending on the section of the document (<head> or <body>), the <meta> element allows different attributes.

A <meta> tag has been found that is missing its required content. Example of a valid meta tag:

<meta name="description" content="Description of the page" />

A <meta> element without a itemprop or property attributes has been found in an unexpected place.

While the <meta> element is commonly used within the <head> section of the document, it can also be used within the <body> section, for example in the context of defining microdata, as in this example:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  Price: $<span itemprop="price">1.00</span>
  <meta itemprop="priceCurrency" content="USD" />
</div>

When used within the <body> section, the <meta> element is required to have a itemprop or property, and a content attribute, and it can’t have a http-equiv or charset attribute.

A common cause for this issue is including a <meta> element that was intended for the <head> section (for example one containing a http-equiv attribute in the <body> , for example:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<form>
  ...
</form>

An HTML tag could not be parsed, most probably because of a typo.

Drop-down lists can be defined in HTML by using the <select> tag, containing the different <option>s. Each <option> must have a name, which can be either contained between <option> and </option>, or alternatively using the label attribute.

Example:

<select name="size">
  <option value="s">small</option>
  <option value="m" label="medium"></option>
</select>

The picture element is used to provide multiple sources for an image depending on the viewport size or resolution of the device being used. It’s a container element that requires exactly one img child element, and zero or more source child elements inside.

The browser will consider each child <source> element and choose the best match among them. If no matches are found –or the browser doesn’t support the <picture> element– the URL of the <img> element’s src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

To fix this issue, add an img element inside the picture element with a src attribute pointing to the default image file that you want to display.

Here’s an example:

<picture>
  <source srcset="example-large.jpg" media="(min-width: 800px)">
  <source srcset="example-medium.jpg" media="(min-width: 450px)">
  <img src="example-small.jpg" alt="Example">
</picture>

In this example, we’ve added a default image img with the src attribute set to “example-small.jpg”. If none of the source elements match the device’s viewport size or resolution, this image will be displayed.

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 async type="module">
  /* JavaScript module code here */
</script>

The charset attribute on a <script> element can be used to specify the character encoding of an external script, whose URL should be specified on the src attribute.

If the script is not external, then the charset attribute should not be used, as the character encoding of the HTML document will be used.

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>

The W3C HTML Validator issue indicates that your <td> element is missing one or more accessibility attributes: either aria-checked or role. These attributes are normally necessary when the cell content needs to convey a specific role or state, such as a checkbox.

If your td element should not act as a checkbox, you should reconsider the design. Ensure that only semantic roles and attributes appropriate for the content and functionality are used. If the misuse is identified due to incorrect implementation, revisiting and clearing the incorrect attributes might be required.

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>

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>