HTML Guide
The value Content-Script-Type is not valid for the property http-equiv on a meta tag.
The W3C HTML Validator issue you’re encountering indicates that the value specified for the http-equiv attribute in a <meta> tag is not valid. This often happens due to incorrect formatting, spelling errors, or extraneous characters in the attribute value.
To resolve this issue, ensure that the http-equiv attribute is spelled correctly and that it contains valid values. For a basic Content Security Policy (CSP), the correct way to specify it in the <meta> tag is as follows:
Correct Usage of <meta> with http-equiv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
<title>Document Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Fixes to Apply:
- Ensure Correct Spelling: The attribute value must be spelled exactly as “Content-Security-Policy” (case-sensitive).
- Check for Extraneous Characters: Make sure there are no extra quotes or spaces within the attribute value.
Example of a Bad Value:
If your original <meta> tag looks something like this:
<meta http-equiv=""Content-Security-Policy"" content="default-src 'self';">You should change it to:
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">The value Content-Style-Type is not valid for the property http-equiv on a meta tag.
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.
Expires is not a valid value for the http-equiv attribute in HTML5.
The http-equiv attribute is used with the <meta> tag to configure the HTTP headers of the web page. In HTML5, the allowed values for http-equiv include content-type, default-style, refresh, and security-related headers like Content-Security-Policy. The Expires header is an HTTP header typically set in server configurations or via server-side scripting, not through HTML. To control page caching, consider using server-side headers for Expires or use the cache-control setting if supported by your server.
Here’s how you might correct an HTML document using valid http-equiv values and manage caching through server-side configurations:
Example of Valid HTML <meta> Tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>Example of Setting Expires at Server Level:
If you’re using Apache, you might set Expires in a .htaccess file:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 week"
</IfModule>For Nginx, such settings would be in the server’s configuration file:
location ~* \.html$ {
expires 7d;
}Using these methods, you ensure compliance with HTML5 standards by handling HTTP headers correctly.
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>The action attribute on a <form> element is not a required attribute, but if specified, must be a valid, non-empty URL. For example:
<form action="register.php">
</form>The issue here is related to the encoding of URLs. In HTML and URLs, special characters that have specific meanings need to be encoded to ensure that the URL is interpreted correctly. This process converts characters to their percent-encoded form, where a character is replaced by % followed by two hexadecimal digits representing the ASCII code of the character.
Explanation:
- The action attribute of a <form> element specifies where to send the form-data when a form is submitted.
- If the URL contains special characters (e.g., spaces, <, >, #, %, etc.), they need to be percent-encoded. For instance, a space character is encoded as %20.
- In this case, the validator is complaining about a % sign that is not correctly followed by two hexadecimal digits, which typically happens if the URL was not properly encoded.
How to Fix:
- Check the URL: Look for any raw special characters that need encoding.
- Correctly Encode the URL: Use online tools or libraries that provide URL encoding support to ensure that the URL is correctly percent-encoded.
Example:
Suppose you have the following incorrect form tag:
<form action="submit%data.html">
<!-- form elements here -->
</form>The % in submit%data.html should be followed by two hexadecimal digits. If %data was intended to be a part of the URL, it should be encoded properly. Here is how to correct it:
<form action="submit%25data.html">
<!-- form elements here -->
</form>If % should represent data, replace % with %25, which is the percent-encoded form of %. Always verify each special character is correctly encoded. Using this approach ensures that the URL in the action attribute is valid according to HTML standards.
The aria-activedescendant attribute on the input element must reference a non-empty, valid ID of an existing element.
The aria-activedescendant attribute is used in accessible widgets to indicate which element is currently active or selected within a composite widget, such as a listbox or autocomplete dropdown. Its value should be the id of an element within the DOM.
The attribute value must not be an empty string and must match the id of an existing element. Using an empty string ("") is invalid and triggers the W3C validator error.
Correct usage:
- Reference a valid, non-empty element id as the value.
- Remove the attribute if no element is currently active.
Example: Incorrect usage (invalid)
<input type="text" aria-activedescendant="" />Example: Correct usage with a referenced ID
<ul id="suggestions">
<li id="option1">Option 1</li>
<li id="option2">Option 2</li>
</ul>
<input type="text" aria-activedescendant="option1" />To eliminate errors, do not set aria-activedescendant to an empty string. Only include the attribute when it references a valid element’s id.
The for attribute on a label element can’t be an empty string. This attribute is intended to specify which form element a label is associated with, and it must reference the ID of an existing form element. An empty string is neither a valid ID nor a meaningful association.
Explanation
- Invalid HTML: <label for=""></label>
The for attribute expects the value to be the ID of a form element, such as an input, textarea, select, etc.
How to Fix
- Identify the Form Element: Find the form element (input, textarea, select, etc.) that the label is supposed to be associated with.
- Assign an ID to the Form Element: Ensure the form element has a unique ID.
- Modify the Label’s for Attribute: Set the for attribute of the label to match the ID of the form element.
Example
Before Fix
<form>
<label for="">Username:</label>
<input type="text" name="username">
</form>After Fix
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>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>An illegal character has been found for the “href” attribute on the “link” element.
To fix this issue, find the “link” element in question and make sure that the “href” attribute contains a valid URL without any illegal characters.
Here’s some example HTML code of a link element:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>Here is some content...</p>
</body>
</html>In the above example, the link element has a valid href attribute value of styles/main.css. Make sure that your href attribute values don’t contain any illegal characters.
The href attribute on the link element must not be empty.
The id attribute is used to identify a single element within a document, it’s not required, but if used it must be unique, and must not be an empty string.
IDs for HTML elements can’t be blank.
For rel="preload" and as="image" only, the imagesizes attribute is a sizes attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.
For rel="preload" and as="image" only, the imagesrcset attribute is a sourceset attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.
The max attribute on an <input> element does not accept an empty string.
The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.
An empty value for the name attribute on the form element is invalid and should be removed or replaced with a valid non-empty string.
The name attribute on a form element provides a way to reference forms via scripts and images, and it must not be empty. According to the HTML standard, if the name attribute is present, it must have a non-empty value. An empty string is considered invalid and will trigger HTML validator errors.
Invalid example:
<form name="">
<!-- form elements here -->
</form>How to fix:
- Remove the empty name attribute if you don’t need it.
- Replace the empty value with a meaningful, unique name if you require it for scripting or identification.
Valid examples:
<form>
<!-- form elements here -->
</form><form name="registrationForm">
<!-- form elements here -->
</form>Avoid using empty attribute values, as they do not provide any benefit and result in validation errors.
The name attribute is required for all input elements.
The attribute rows on a textarea element, when present, must be a positive integer.
The <textarea> HTML element represents a multi-line plain-text editing control, 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. Its attributes rows and cols allow to define the dimensions of the text area by respectively specifying the numbers of rows and columns.
Example:
<textarea name="comments" rows="5" cols="25">
It all works great!
</textarea>An <iframe> element allows to embed an HTML document inside another HTML document, and its src attribute is indicated the source URL of the embedded web page. The src attribute is a required attribute, so it cannot be blank.
Example:
<iframe src="https://example.com/map.html"></iframe>The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.