HTML Guide

A <label> tag can’t be used inside an <a> tag. Consider using other tags like <span>.

A label element is not allowed as a descendant of a button element.

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.

A <label> element cannot contain other <label> as a descendant. Check for nested elements or closing tags that may have been misinterpreted, for example:

<label>name</label></label>

The <caption> element specifies the caption (or title) of a table. It’s not allowed for a <caption> to contain another table.

A <textarea> tag can’t be used inside an <a> tag.

<select> elements that are required and are not multiple need a placeholder option that has no value, for example:

<select required>
  <option value="">choose size</option>
  <option value="s">small</option>
  <option value="l">large</option>
</select>

Element IDs in an HTML document must be unique. The HTML validator is indicating the first occurrence of an ID that is repeated. Check the details for that issue to see web pages affected, and the elements within them, to fix that ID repetition.

The <font> element, used to define the font face, size and color in previous versions of HTML, is no longer valid in HTML5. Instead, you should rely on CSS styles.

For example, you can define a font size of 12px, bold text with inline styles like this:

<p style="font-size: 12px; font-weight: bold;">some text</p>

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>

This W3C HTML Validator issue indicates that you have assigned a role="group" attribute to a <fieldset> element. In HTML, the <fieldset> element already has an implicit role of group so it’s redundant and unnecessary to explicitly specify it.

To resolve this issue, you simply need to remove the role="group" attribute from the <fieldset> element.

Example of the Issue

Here is an example of problematic HTML:

<form>
  <fieldset role="group">
      <legend>Personal Information</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="age">Age:</label>
      <input type="number" id="age" name="age">
  </fieldset>
</form>

Fixed HTML

To fix this issue, remove the role="group" attribute from the <fieldset> element:

<form>
  <fieldset>
      <legend>Personal Information</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="age">Age:</label>
      <input type="number" id="age" name="age">
  </fieldset>
</form>

The heading role defines this element as a heading to a page or section, and is implicit in tags <h1> to <h6>.

The heading role indicates to assistive technologies that this element should be treated like a heading. Screen readers would read the text and indicate that it is formatted like a heading.

This ARIA role is only needed to add that role to a generic element like <div>, for example:

<div role="heading" aria-level="1">This is a main page heading</div>

This defines the text in the <div> to be the main heading of the page, indicated by being level 1 via the aria-level attribute. Opt for using the <h1> (thru <h6>) element instead:

<h1>This is a main page heading</h1>

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>

The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the form control. This attribute is not supported in all browsers, so it’s advised to use with caution and consider alternatives for older browsers.

An itemprop attribute has been found in the document, but it cannot be associated to any item. Most probable cause is the lack of an itemscope attribute defining an item.

Microdata allows nested groups of properties, which must be scoped to the item they belong to, as in this example:

<div itemscope>
   <p>My name is <span itemprop="name">Liza</span> and I'm <span itemprop="age">48</span> years old.</p>
</div>

When the itemtype attribute is specified on an HTML element, the boolean attribute itemscope must also be present in that element.

Here’s an example of how to use the itemscope attribute with the itemtype attribute:

<div itemscope itemtype="http://schema.org/Person">
  <p><span itemprop="name">Liza Jane</span></p>
  <p><span itemprop="email">liza.jane@example.com</span></p>
</div>

In this example, the itemscope attribute is used to indicate that the div element is a microdata item, and the itemtype attribute is used to specify that the type of this item is http://schema.org/Person.

If you don’t need to specify a type for the data represented by the HTML element, you can simply remove the itemtype attribute. For example:

<div itemscope>
  <p><span itemprop="name">John Doe</span></p>
  <p><span itemprop="email">john.doe@example.com</span></p>
</div>

The label element may contain only one labelable descendant.

For example:

<label for="age">
  Age
  <select id="age">
    <option>young</option>
    <option>old</option>
  </select>
</label>

The <script> tag allows authors to include dynamic scripts and data blocks in their documents. This tag accepts two optional attributes, type (which is unnecessary if it’s JavaScript, as that’s the default), and src to indicate the URL of the external script to use.

The language attribute is now obsolete and should not be used.

An a element with an href attribute provides a link to a resource, so adding the link role to it is redundant.

When not using semantic HTML for its intended purpose, interactive features must be re-implemented. For example, when role="link" is added to an element, the tab key should enable giving focus to the link and the enter key should execute the link when focused.

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>

The issue you’re encountering comes from using the longdesc attribute on an iframe element. The longdesc attribute was historically used to provide a URL to a long description of the content. However, it is now considered obsolete and should not be used. Instead, you should use a regular a (anchor) element to provide a link to the description.

Here’s a short guide on how to fix this issue:

Original Code with longdesc

<iframe src="video.html" longdesc="description.html" title="Video"></iframe>

Updated Code with Regular a Element

The recommended approach is to use a regular a element to provide a link to the description, like in the following example:

<iframe src="video.html" title="Video"></iframe>

<p>
  <a href="description.html">Long description of the video content</a>
</p>

Explanation

• Original Code: The longdesc attribute is used on the iframe element, which is now obsolete.
• Updated Code: We remove the longdesc attribute and provide an external link using the a element to guide users to the description.

The deprecated property longdesc on img elements was used in HTML4 to specify the URL of a text or HTML file which contained a long-form description of the image. This could be used to provide optional added details beyond the short description provided in the title or alt attributes.

Here’s an example from HTML4:

<img
  src="cat.jpg"
  alt="Smiling Cat"
  longdesc="image-descriptions/smiling-cat.html" />

This, however, is no longer valid in HTML5 and can be converted to the following instead:

<a href="image-descriptions/smiling-cat.html">
  <img src="cat.jpg" alt="Smiling Cat" />
</a>

The main element represents the dominant contents of the document, so it should not be contained within another section.

A document must not have more than one main element that does not have the hidden attribute specified.

A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element.

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 <option> element no longer accepts a name attribute, which is now obsolete.

Example:

<select id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
</select>