HTML Guide

The combination of type="module" and defer is not allowed. The type="module" attribute itself implies that the script should be executed in a deferred way, hence using the defer attribute is unnecessary and invalid.

Steps to Fix the Issue:

1. Remove the defer Attribute: When you use type="module", you should not include the defer attribute since module scripts defer automatically.

Incorrect Code:

<script type="module" defer src="example.js"></script>

Corrected Code:

<script type="module" src="example.js"></script>

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>

The <table> element does not accept a height attribute. Use CSS instead.

The <textarea> element does not have a type attribute.

The HTML <textarea> element represents a multi-line plain-text editing control, and is useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

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.

Empty type attributes are invalid on the <a> element; you must either remove the type attribute or provide a valid MIME type value.

The type attribute on an <a> (anchor) element specifies the MIME type of the linked resource. According to the WHATWG HTML specification and W3C validator, the value of the type attribute cannot be an empty string. It should be a valid MIME type, such as application/pdf or text/html. If you do not know the MIME type or it’s not relevant, you should omit the attribute.

Incorrect HTML example (causes validation error):

<a href="document.pdf" type="">Download PDF</a>

Correct HTML example (remove the invalid attribute):

<a href="document.pdf">Download PDF</a>

Correct HTML example (provide a valid MIME type):

<a href="document.pdf" type="application/pdf">Download PDF</a>

If the type is unknown or unnecessary, leaving it out is preferred to using an empty value.

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.

The value rocketlazyloadscript used in a <script> tag is not a valid one according to the HTML specification. It is introduced by the WP Rocket Wordpress extension.

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:

<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">