HTML Guide for bad value

The issue arises from the space character in the src attribute value of the script element. In URLs, spaces are not allowed and should be properly encoded to avoid validation errors.

Fix

Replace spaces with %20, which is the URL-encoded representation of a space.

Example

Before:

<script src="https://example.com/media assets/app.js"></script>

After:

<script src="https://example.com/media%20assets/app.js"></script>

Explanation

In this example, the space between “media” and “assets” in the URL is replaced with %20. This change ensures that the URL conforms to standards and is correctly processed by browsers and servers. Spaces and other special characters in URLs must be encoded to ensure proper formatting and accessibility.

The src attribute value is malformed, check that it doesn’t contain extraneous characters.

For example, this is invalid because the URL in the src attribute contains a space in between the https: and // parts:

<a href="https: //example.com">Some link</a>

To fix this issue, you can try removing the space after “https:” in the URL in the src attribute:

<a href="https://example.com">Some link</a>

Ensure all descriptors in the srcset have positive widths greater than zero. In the srcset attribute, each source candidate consists of a URL followed by a width descriptor, which should be a positive integer followed by w.

The issue arises from using 0w, which is not valid as width descriptors must be positive numbers. The srcset attribute allows browsers to choose the appropriate image from different candidates based on device resolution and screen size, so specifying a meaningful width is important.

Here’s how you can fix it:

1. Verify that each candidate in the srcset includes a valid URL and a width descriptor greater than zero.
2. Decide the relevant width for your images and update the descriptors accordingly.

Here’s a corrected example of how to use the srcset attribute:

<picture>
  <source 
    srcset="/images/icon_small_1x.png 300w,
            /images/icon_small_2x.png 600w" 
    media="(max-width: 600px)">
  <img src="/images/icon_fallback.png" 
       alt="App Logo">
</picture>

In this example, each image in srcset has a positive width descriptor: 300w and 600w. This ensures that the browser can make an appropriate choice based on the current viewport and resolution, adhering to the W3C HTML standards.

The value provided on the type attribute of an a element is not a valid MIME type.

The type attribute expects a MIME type that hints at the linked URL’s format.

The type attribute on <a> elements, when present, gives a hint on the MIME type of the linked resource, for example:

<a href="application/pdf" src="book.pdf">Read our book</a>
<a href="image/jpeg" src="photo.jpeg">See a photo</a>

That is, we’re talking about the type of the linked resource, not the type of the <a> element, as it’s sometimes misunderstood. The following example is invalid because button is not a valid MIME type.

<a href="/order.php" type="button">Submit</a>

The value used to define the type of a link is not valid. You’re probably using a URL instead of a valid type.

Example of a valid type:

<link rel="icon" type="image/png" href="favicon.png">

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 text-transform CSS property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

Examples of valid values for this property are:

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;