HTML Guide

The controlslist attribute on the <video> element is experimental, and not yet valid in the current HTML5 standard, so you should use it with caution as it may not be supported by all browsers.

The height attribute on the <video> element must be a non-negative integer representing the height in CSS pixels. The value “auto” is not a valid value for this attribute. To resolve the issue, set the height attribute to a specific numeric value or adjust the height using CSS instead.

Example with a numeric height value:

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Alternatively, control the height using CSS:

<video width="640" controls style="height: auto;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

In the CSS approach, “auto” can be used, but it should not be part of the HTML attributes.

The error message is indicating that the width attribute of the <video> element has an invalid value. According to the HTML specification, the width attribute expects a non-negative integer value, representing the pixel width of the video.

The value "auto" is not valid for the width attribute. Instead, specify a full number that indicates the pixel width of the video. If you want the video to be responsive without specifying a fixed width, you can use CSS to achieve that.

Here are two ways to resolve this:

1. Specify a valid pixel value for width:

   <video width="640" height="360" controls>
     <source src="video.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>

2. Use CSS for a responsive video player:

   Instead of using the width attribute, use CSS to set the width of the video element. This allows the video to adjust its size according to the container or viewport.

   <style>
     .responsive-video {
       width: 100%;
       height: auto;
     }
   </style>
   
   <video class="responsive-video" controls>
     <source src="video.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>

In the second example, the video will scale based on its containing element, maintaining its aspect ratio due to the height: auto; CSS rule. This approach offers more flexibility for responsive design.

The itemscope attribute is a boolean attribute in HTML5, which means it does not take any values. Adding any value (such as true or false) will cause an error. When using boolean attributes, they should either be present or absent. If an attribute like itemscope is present, it is considered true.

Here’s how to correct the error:

Incorrect Usage:

<div itemscope="true">

Correct Usage:

<div itemscope>

Explanation:

• Simply including the itemscope attribute without any value is the correct way to use it.
• If you don’t want to use the itemscope attribute, just remove it from the tag.

The value contact is not a valid option for the autocomplete attribute on an <input> element.

The type dob is not valid for an input. If you want to build a date picker field, you can use the native HTML input elements with type date, datetime-local, or a generic text input decorated with JavaScript and CSS.

In HTML, the type attribute for the <input> element specifies the type of input control that is to be displayed. The type attribute can have values like text, password, email, date, etc. Using an unsupported or invalid value like dob (which presumably stands for “date of birth”) will cause this validation error.

Here’s an example of how you can correct this issue by using a supported type attribute value for the date of birth input:

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

In this corrected example, we’ve used the type="date" attribute value for the date of birth input. This is a valid type for handling dates in HTML forms. Replace the input type with a supported type according to the specific data you need to capture.

Alternatively you can use a JavaScript library to build a date picker on a generic text input. For example, the popular bootstrap-datepicker library will generate a date picker around a text input.

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>

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>

The href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.

The href attribute of the a element contains an invalid backslash character, which is not permitted in URLs.

According to the WHATWG HTML living standard, the href attribute must contain a valid URL. URLs use forward slashes (/) for path separators, and backslashes are not allowed as they can cause browsers and validators to misinterpret the address. Backslashes often arise when file paths are copied from Windows environments.

Correct Usage:

• Always use forward slashes / in your URLs.
• Remove any backslashes from href values.

Example of incorrect usage:

<a href="images\picture.jpg">View Picture</a>

Corrected example:

<a href="images/picture.jpg">View Picture</a>