HTML Guide

The specified type for an script element is not a valid MIME type as it’s missing a subtype.

A MIME type most-commonly consists of just two parts: a type and a subtype, separated by a slash (/) — with no whitespace between, for example:

text/javascript

The attributes width and height on an iframe expect a valid positive integer without any decimals.

Here’s an example of incorrect code where decimals are being used for dimension attributes:

<iframe src="example.html" height="602.88" width="800.2"></iframe>

Corrected code without decimals:

<iframe src="example.html" height="603" width="800"></iframe>

In the corrected code, the width and height values has been changed to a whole number, which conforms to the standard integer value expected by the W3C validator.

The attributes width and height on an iframe expect a valid positive integer without any decimals.

Here’s an example of incorrect code where decimals are being used for dimension attributes:

<img src="photo.jpg" alt="Dog" height="602.88" width="800.2">

Corrected code without decimals:

<img src="photo.jpg" alt="Dog" height="603" width="800">

In the corrected code, the width and height values has been changed to a whole number, which conforms to the standard integer value expected by the W3C validator.

The <iframe> element, used to embed another document inside the current document, accepts both attributes width and height which must be valid non-negative integers. Percentages are not allowed for these attributes.

<img> elements accept a width attribute to specify the size in pixels. This value can only be an integer, it should not contain units or %. If you need to specify a percentage width, you can do that with CSS:

<img src="photo.jpg" alt="red car" style="width:100%;">

<video> elements accept a width attribute to specify the width in CSS pixels. This value can only be an integer, it should not contain units or %. If you need to specify a percentage width, you can do that with CSS.

Here’s an example of setting width and height on a video element.

<video controls width="640" height="480">
  <source src="/media/cc0-videos/flower.webm" type="video/webm">
</video>

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.

Character references must always start with an ampersand (&) and end with a semicolon (;), for example the < character can be referenced as &lt;.

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;

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:

1. Locate the Error:

   • Look for the line and column in your code as specified by the validator. This is where the error is occurring.

2. 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.

3. 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>

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.

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.

This W3C Validator issue indicates that the value assigned to the CSS border property is invalid. The border property in CSS is used to specify the width, style, and color of an element’s border, and these values must be appropriately defined.

To resolve this issue, make sure you define the border property using valid values for border width, border style, and border color. Below is the correct syntax for setting a border:

selector {
  border: 1px solid black; /* width, style, color */
}

If you inadvertently set the border property to an incorrect or undefined value, such as undefined, it will trigger this validation issue.

Incorrect Example:

<div style="border: undefined;"></div> <!-- This will cause a validation error -->

Correct Example:

To correct this, replace undefined with a valid CSS border definition. For example:

<div style="border: 1px solid black;"></div>

Breakdown:

• 1px is the border width.
• solid is the border style.
• black is the border color.

More Examples:

Here are a few more valid examples with different border styles:

• Dotted border:

  <div style="border: 2px dotted red;"></div>

• Dashed border:

  <div style="border: 3px dashed blue;"></div>

• Double border:

  <div style="border: 4px double green;"></div>

Additionally, you can define border properties separately:

selector {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Summary:

Ensure your border property has valid width, style, and color values. Avoid using placeholders like undefined in your CSS properties. This will resolve the W3C Validator issue and render your border as expected in your HTML document.

The 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 {
    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 {
    color: black;
  }
</style>

Hexadecimal Color

<style>
  .example {
    color: #000000;
  }
</style>

RGB Color

<style>
  .example {
    color: rgb(0, 0, 0);
  }
</style>

RGBA Color

<style>
  .example {
    color: rgba(0, 0, 0, 0.5);
  }
</style>