HTML Guide
XML 1.0 names, typically used for the id attribute of elements, must comply with specific constraints, such as:
- Must start with a letter or underscore _
- Subsequent characters can be letters, digits, hyphens -, underscores _, and periods .
- Cannot contain any spaces or special characters
Here’s an example of an invalid name for an ID:
<svg>
<g id="Group 270">
<!-- Content inside the group element -->
</g>
</svg>This can be fixed by avoiding whitespace inside the name, like this:
<svg>
<g id="group-270">
<!-- Content inside the group element -->
</g>
</svg>In this example, the id attribute value Group 270 has been changed to group-270 to follow the rules for XML 1.0 names.
The coordinates specified for an <area> element using the coords attribute are not in a valid format.
-
For a rectangle (shape="rect"), the format X1,Y1,X2,Y2 is expected, where the top-left corner is specified by X1, Y1 and the bottom-right corner is specified by X2, Y2, therefore X1 must be lower than X2, and Y1 must be lower than Y2 because the coordinates 0, 0 start at the top-left.
-
For a polygon (shape="poly"), the format X1,Y1,X2,Y2,...,Xn,Yn is expected to contain a list of coordinate pairs (at least 3, for a triangle).
-
For a circle (shape="circle"), the format X,Y,R is expected where X, Y represents the coordinates of the center of the circle (from the top-left corner), and R is the radius.
The width and height attributes on <img> and <iframe> elements expect a digit to indicate the number of pixels. Ensure that this attribute contains only digits.
For example:
<!-- This is invalid because width is not a digit -->
<img width="225px" height="100px" alt="cat" src="cat.jpg" />
<!-- This is valid -->
<img width="225" height="100" alt="cat" src="cat.jpg" />input elements can be of different types but zip is not one of the allowed. Consider using a generic type like text instead.
A bogus comment error occurs when an invalid or incorrectly formatted comment appears in HTML.
and cannot contain a double hyphen–except at the start and end. Bogus comments often result from mistakes like using a single hyphen, omitting angle brackets, or including–` in the comment body. Correct syntax: html <!-- This is a valid comment --> Incorrect example (causes a bogus comment error): html <! -- This is not valid -->
Ensure you’re not using character references that expand to control characters, like , which are not permissible in HTML documents.
In HTML, a character reference allows you to use a specific ASCII or Unicode character in your document. Character references are written using the syntax &#code; where code is either the decimal or hexadecimal code point of the character. Control characters, like U+0002, are non-printable and are not allowed within HTML because they do not represent meaningful text content.
Character references should only be used for printable characters and standard entities. For example, common entities like & and < should be used for special characters like & and <.
Example of Incorrect Usage
The following example shows an HTML snippet where a control character is incorrectly referenced:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
</head>
<body>
<p>Control character reference: </p>
</body>
</html>Character references must always start with an ampersand (&) and end with a semicolon (;), for example the < character can be referenced as <.
The W3C Validator was unable to connect to the specified site to validate your HTML file, possibly due to network issues, incorrect URL, or the server not responding.
Check that the server is online and responding to requests, and that the SSL configuration is correct.
Always use a language attribute on the <html> tag to declare the default language of the text in the page, using the lang property.
Example:
<html lang="fr">A <meta name="viewport"> element has been found where the allowed values for the viewport prevent users from zooming and scaling the document.
The user-scalable="no" parameter disables browser zoom on a web page. The maximum-scale parameter limits the amount the user can zoom. Both are problematic for users with low vision who rely on browser zoom to see the contents of a web page. Consider relaxing these values in order to allow users to resize the documents.
The HTML <h1> to <h6> elements represent headings for the different sections of a document, where <h1> is the highest section and <h6> is the lowest. Headings are specially important on screen readers as they give a quick overview of the contents of the different sections in the web page, so although it’s technically correct (not an error) to use a <h1> in this way:
<section class="about">
<article>
<h1>Article heading</h1>
<p>Lorem</p>
</article>
</section>this will raise a warning as it would be preferrable for example to leave the <h1> for the heading of the <section>, and <h2> for the heading of the article, like this:
<section class="about">
<h1>About heading</h1>
<article>
<h2>Article heading</h2>
<p>Lorem</p>
</article>
</section>The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks.
The issue you’re encountering indicates that the CSS property align-items is being set to a value of auto, which is not a valid value for this property according to the CSS specification. The align-items property is used in flexbox and grid layouts to define how items are aligned along the cross axis.
Fixing the Issue:
-
Understand Valid Values: The valid values for the align-items property include:
/* Basic keywords */ align-items: normal; align-items: stretch; /* Positional alignment */ /* align-items does not take left and right values */ align-items: center; align-items: start; align-items: end; align-items: flex-start; align-items: flex-end; align-items: self-start; align-items: self-end; align-items: anchor-center; /* Baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* Overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* Global values */ align-items: inherit; align-items: initial; align-items: revert; align-items: revert-layer; align-items: unset; -
Choose a Correct Value: Based on the desired alignment, choose one of the valid values. For instance:
- Use flex-start to align items to the start of the container.
- Use center to align items in the center.
- Use stretch to stretch items to fill the container.
-
Example Correction: If your original CSS was:
.container { display: flex; align-items: auto; /* This is invalid */ }You could change it to:
.container { display: flex; align-items: center; /* This is valid */ }
Conclusion:
Replace the invalid auto value with a valid option that suits the design you aim for, making sure to test the layout after applying changes to confirm that the items align as intended.
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element’s box. This means that even if the parent container or viewport size changes, the browser will adjust the element’s dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.
The box’s preferred aspect ratio is the specified ratio of width / height. If height and the preceding slash character are omitted, height defaults to 1.
Here are some examples of this property:
aspect-ratio: 1 / 1;
aspect-ratio: 1;
/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;background-blend-mode only accepts certain keywords as values, such as normal, multiply, screen, and others.
The background-blend-mode property in CSS specifies how background images and background colors blend together. Its value must be one or more blend mode keywords defined by CSS, for example, normal, multiply, screen, overlay, etc. Using an unrecognized value will generate a validation error.
Valid values include:
- normal
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
Example of an invalid value:
/* Invalid: 'X' is not a recognized value */
background-blend-mode: X;Example of a valid value:
/* Valid: 'multiply' is a recognized blend mode */
background-blend-mode: multiply;Example HTML with correct CSS property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Blend Mode Example</title>
<style>
.blended-bg {
background-image: url('image1.jpg'), url('image2.jpg');
background-blend-mode: overlay;
}
</style>
</head>
<body>
<div class="blended-bg" style="width:200px; height:200px;">
Blended background
</div>
</body>
</html>Replace any invalid values for background-blend-mode in your CSS with one of the supported keywords.
This error typically occurs when there is a syntax issue in the CSS code for the background-color property in your HTML or CSS file. The error message indicates that there is an unexpected semicolon (;) after the # symbol, which is commonly used to define hexadecimal color values.
Here is a step-by-step guide to fix this issue:
-
Locate the Error:
- Look for the line and column in your code as specified by the validator. This is where the error is occurring.
-
Identify the Issue:
- Check the background-color property at that location. It’s likely that you have a semicolon directly after the # or an invalid color value.
-
Correct the Syntax:
- Ensure that the background-color property is followed by a valid hexadecimal color value, an RGB/RGBA value, an HSL/HSLA value, or a predefined color keyword.
Example of Error
Let’s say you have the following erroneous CSS code:
body {
background-color: #; /* Incorrect */
}The above code is incorrect because #; is not a valid color value.
Corrected Example
Here’s how to fix it by providing a valid hexadecimal color value:
body {
background-color: #ffffff; /* Correct: Hexadecimal color for white */
}Alternatively, you can also use other color formats or color keywords. Examples:
body {
background-color: rgb(255, 255, 255); /* RGB color */
}
body {
background-color: rgba(255, 255, 255, 1); /* RGBA color */
}
body {
background-color: hsl(0, 0%, 100%); /* HSL color */
}
body {
background-color: hsla(0, 0%, 100%, 1); /* HSLA color */
}
body {
background-color: white; /* Predefined color keyword */
}The background-color property in CSS expects a valid color value. Valid color values include keywords (such as red or blue), hexadecimal values (such as #FFFFFF), RGB values (such as rgb(255, 255, 255)), and others.
Example Fix
Invalid CSS
The following snippet is invalid because 0 is not a valid color value:
<style>
.example {
background-color: 0;
}
</style>Valid CSS
To fix it, use a valid color value. Below are examples using different types of color values:
Color Keyword
<style>
.example {
background-color: black;
}
</style>Hexadecimal Color
<style>
.example {
background-color: #000000;
}
</style>RGB Color
<style>
.example {
background-color: rgb(0, 0, 0);
}
</style>RGBA Color
<style>
.example {
background-color: rgba(0, 0, 0, 0.5);
}
</style>background CSS property has an invalid value; "from" is not recognized as a valid color or background value.
The background property in CSS can accept color names, hex codes, rgb/rgba values, or CSS keywords, but "from" is not valid. Sometimes this error can appear if using incorrect CSS gradient syntax, where "from" is not a recognized value.
Detailed Explanation
In standard HTML and CSS, a background can be set using:
- Hex color codes, such as #fff or #ffffff
- Named colors, such as red or blue
- Functions, such as rgb(255,0,0) or linear-gradient(...)
If you wrote something like:
background: from #fff to #000;or
background: "from";neither is valid CSS.
To use gradients, use correct linear-gradient() or radial-gradient() syntax:
background: linear-gradient(to right, #fff, #000);For a solid color:
background: #fff;HTML Examples
Incorrect CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Incorrect CSS</title>
<style>
div {
background: from #fff to #000; /* Invalid syntax */
}
</style>
</head>
<body>
<div>Bad background</div>
</body>
</html>Correct CSS (Gradient):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Correct CSS Gradient</title>
<style>
div {
background: linear-gradient(to right, #fff, #000);
}
</style>
</head>
<body>
<div>Good background</div>
</body>
</html>Correct CSS (Solid Color):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Correct CSS Color</title>
<style>
div {
background: #fff;
}
</style>
</head>
<body>
<div>White background</div>
</body>
</html>Always use a valid color value or gradient function for the background property.
A CSS definition for background-image could not be understood by the parser. Check its definition to ensure that it’s well formed and that it contains an appropriate value.
background-image attribute values must use valid CSS syntax.
The background-image property in CSS expects the value to be a valid image reference, such as none, url("image.png"), gradients, or inherit.
Correct CSS Syntax:
background-image: url("background.jpg");Correct usage in HTML (inline style):
<div style="background-image: url('background.jpg');">
Content here
</div>Incorrect usage (missing url() or filename only):
<div style="background-image: background.jpg;">
Content here
</div>Correct usage in a <style> block:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image Example</title>
<style>
.banner {
background-image: url("banner.png");
}
</style>
</head>
<body>
<div class="banner">Welcome</div>
</body>
</html>Always wrap the image path with the url() function and use quotes for paths containing special characters.
Use the correct direction keyword syntax in CSS gradients: replace top with to top.
In CSS Images Level 4, the first argument of linear-gradient() should either be an angle (e.g., 180deg) or a direction using the to keyword (e.g., to top, to right). Older syntax like linear-gradient(top, ...) is no longer valid and triggers validator errors. Valid forms include: linear-gradient(to top, #fff, #000), linear-gradient(180deg, #fff, #000), or simply omit the direction to default to to bottom. Keep gradients in your CSS, not HTML attributes. The style attribute or a stylesheet can set the background or background-image with a valid gradient function.
HTML Examples
Example showing the issue
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient Issue</title>
<style>
.box {
width: 200px;
height: 100px;
background: linear-gradient(top, #ffffff, #000000); /* invalid */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Fixed example (valid syntax)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient Fixed</title>
<style>
.box {
width: 200px;
height: 100px;
/* Option A: direction keyword */
background: linear-gradient(to top, #ffffff, #000000);
/* Option B: angle (equivalent) */
/* background: linear-gradient(0deg, #ffffff, #000000); */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>There’s an invalid value for the background property in your CSS. The W3C HTML Validator has attempted to match the value to a background color, without success.
Here’s how to resolve this issue:
-
Identify the Correct CSS Configuration: The background property in CSS can take various forms, such as a color, an image, or a combination of background components. Ensure you provide a valid value.
-
Correct the Value: If you meant to set a background color, use a valid color format (e.g., hexadecimal, RGB, RGBA, named color, etc.).
Valid CSS Examples:
-
Using a named color:
.example { background: blue; } -
Using a hexadecimal color:
.example { background: #00ff00; } -
Using an RGB color:
.example { background: rgb(255, 0, 0); } -
Using an RGBA color (with transparency):
.example { background: rgba(255, 0, 0, 0.5); } -
Setting an image as background:
.example { background: url('image.jpg'); } -
Combining multiple background properties:
.example { background: url('image.jpg') no-repeat center/cover; }
The border-color property in CSS expects a valid color value. Valid color values include keywords (such as red or blue), hexadecimal values (such as #FFFFFF), RGB values (such as rgb(255, 255, 255)), and others.
Example Fix
Invalid CSS
The following snippet is invalid because 0 is not a valid color value:
<style>
.example {
border-color: 0;
}
</style>Valid CSS
To fix it, use a valid color value. Below are examples using different types of color values:
Color Keyword
<style>
.example {
border-color: black;
}
</style>Hexadecimal Color
<style>
.example {
border-color: #000000;
}
</style>RGB Color
<style>
.example {
border-color: rgb(0, 0, 0);
}
</style>RGBA Color
<style>
.example {
border-color: rgba(0, 0, 0, 0.5);
}
</style>The error you encountered indicates that the value none is not a valid value for the border-radius CSS property. The border-radius property expects a length value (like px, em, etc.), or keywords that define its radius, such as 0 or inherit.
How to Fix It
- Use a Valid Value: If you want no border radius, use 0 instead of none.
- Specify a Length: If you want rounded borders, specify a valid length value (e.g., 5px, 1em).
Examples
Incorrect Usage
This is the incorrect way that leads to the validation error:
<style>
.example {
border-radius: none; /* Invalid value */
}
</style>Correct Usage
Here are correct alternatives:
Option 1: No Border Radius
<style>
.example {
border-radius: 0; /* Valid value for no rounded corners */
}
</style>Option 2: Specify a Border Radius
<style>
.example {
border-radius: 5px; /* Valid value for rounded corners */
}
</style>Conclusion
Replace border-radius: none; with either border-radius: 0; for no rounded corners or an appropriate pixel/em value for adding rounded corners. This will resolve the W3C Validator issue and ensure your CSS is compliant with the standards.
The value specified for the border-radius CSS property is not valid.
The border-radius property expects a valid length or percentage value (like 5px, 10%, etc.). Using a CSS variable only works if the variable is properly defined in a CSS rule somewhere in the document, and the HTML is interpreted by a browser that supports CSS custom properties.
For example, if you write:
<div style="border-radius: var(--my-border-radius);"></div>but never define --my-border-radius, it triggers an error.
Solution:
Define the CSS variable before using it, or use a fixed value instead.
Example 1: Using a fixed value
<div style="border-radius: 8px;"></div>Example 2: Defining the variable in CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variable Border Radius Example</title>
<style>
:root {
--my-border-radius: 8px;
}
.rounded {
border-radius: var(--my-border-radius);
}
</style>
</head>
<body>
<div class="rounded">Border radius via variable</div>
</body>
</html>Using custom properties in inline style attributes is valid in modern browsers if the variable is defined, but some validators may flag it if they can’t resolve the variable. For best validator compatibility, use static, valid CSS values.