HTML Guide
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.
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.
The src attribute for <img> tags is required, to define the source of the image, like in this example:
<img src="photo.jpg" alt="wombat" />Ensure the src attribute on the script element is non-empty and points to a valid resource.
The src attribute in a script element specifies the URL of an external script file. An empty src attribute is invalid because it tells the browser to fetch a resource from a URL that is not provided, leading to loading errors. Instead, ensure that the src attribute contains a valid file path or URL to an existing script file. If the script content is meant to be inline, you should omit the src attribute altogether and include the script content directly within the script element.
Example of a Valid External Script
Here is a valid example of a script element with a non-empty src attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Script Example</title>
</head>
<body>
<script src="path/to/script.js"></script>
</body>
</html>Example of a Valid Inline Script
If the script is to be written inline, exclude the src attribute and write the JavaScript code directly within the script tags:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Script Example</title>
</head>
<body>
<script>
console.log('This is an inline script.');
</script>
</body>
</html>Troubleshooting
Double-check the script’s file path:
- Ensure the file path you provide in the src is correct relative to the HTML file.
- Make sure the script file exists in the location specified.
- If using a network URL, verify that the URL is correct and accessible.
The sizes attribute is used to complement the srcset attribute on an <img> tag for responsive images. When this attribute is present, all image candidates must specify its width.
The tabindex attribute expects a valid integer value, not an empty string.
This attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key) and determine their relative ordering for sequential focus navigation.
This attribute accepts an integer value, where:
- A negative value means the element is not reachable via sequential keyboard navigation.
- A value of 0 means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values. The focus navigation order of these elements is defined by their order in the document source.
- A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" is focused before tabindex="5" and tabindex="0", but after tabindex="3".
The target attribute on <a> elements can’t be blank.
This attribute defines the browsing context for links, that is, where should the linked documents be opened. This was used extensively on the now deprecated <frame> element, so you could give the name of the frame to open the document in, but is now more used to force links to open in a separate tab or window using target="_blank". Another option is using a name, so the new browsing context can be referred to on subsequent clicks on links with the same target.
For example, this will force the links to open on a new tab:
<a href="https://example.com" target="_blank">will open a blank tab</a>The attributes width and height of <iframe> elements expect a non-negative integer, so an empty string is not allowed. Either define the correct dimension, or remove this attribute.
The attributes width and height of <img> elements expect a non-negative integer, so an empty string is not allowed. Either define the correct dimension, or remove this attribute.
Ensure the xmlns attribute for <svg> elements is set to “http://www.w3.org/2000/svg”.
In HTML documents, the xmlns attribute in an <svg> element must be defined correctly. The xmlns attribute specifies the XML namespace for an SVG element, which should always be “http://www.w3.org/2000/svg”. If you receive a validation error indicating a bad value for xmlns, it means that the attribute is empty or incorrectly set. This namespace ensures that the SVG elements are properly recognized as SVGs by the browser and aids in maintaining proper structure and function.
Here’s a correct example of an <svg> element:
<!DOCTYPE html>
<html lang="en">
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</body>
</html>Ensure that every <svg> element you use includes the xmlns attribute with the correct value to avoid validation issues and ensure complete browser compatibility.
The href attribute on an a tag expects a valid URL, but only http(s):// was found.
The only permitted value for the xmlns:link attribute is http://www.w3.org/1999/xlink.
Although using https in the URL looks like it’s going to be more secure, in fact this URL is not used to connect it to, only to declare the namespace.
The only permitted value for the xmlns attribute is http://www.w3.org/2000/svg.
The namespace declaration for an <svg> element is provided by the xmlns attribute like this:
<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tags here -->
</svg>Although using https in the URL looks like it’s going to be more secure, in fact this URL is not used to connect it to, only to declare the namespace.
The icon value for attribute role is not a valid ARIA role.
ARIA Roles: Overview
ARIA roles are used to enhance accessibility by clearly defining the role and purpose of an element for assistive technologies. However, there are defined roles that you need to adhere to:
- Standard roles include button, checkbox, alert, dialog, img, etc.
- There is no ARIA role named icon.
Solution
To fix the issue, you need to use a valid ARIA role that accurately describes the purpose of the span element. If your intention is to convey that the span contains an icon, you might want to reconsider whether you need a role at all. Often, purely decorative elements should not have a role, or you might use an img role if it conveys a meaningful image.
Here’s how you can address this:
-
No ARIA role (if purely decorative): If the icon is purely decorative and does not add meaningful content to your page, you should remove the role attribute entirely.
<span class="icon"></span> -
Using img role (if it represents an image): If the span represents an image or an icon that conveys meaningful information, you can use role="img" and provide a proper aria-label.
<span class="icon" role="img" aria-label="Icon Description"></span> -
Using an appropriate role (if interactive): If the icon is part of an interactive element, you might need a different role. For instance, if the icon is inside a button:
<button> <span class="icon" aria-hidden="true"></span> Button text </button>Here, aria-hidden="true" is used to hide the decorative icon from screen readers as the text provides the necessary context.
<a> tags can be used to link to an email address using the mailto protocol in the href attribute. Ensure that there is no space in the email address.
<a href="mailto: liza@example.com">This is wrong as it contains an space</a>
<a href="mailto:liza@example.com">This is OK</a>The role attribute value navigation is invalid for a ul element, as it should be used with a nav element or similar suitable elements.
In HTML, the role attribute defines what an element represents in the context of accessible web technologies, primarily for assistive tools like screen readers. The nav element represents a section of a page intended for navigational links, and it inherently provides the role of navigation. If you want to make a ul element serve as navigation, it is more appropriate to use it inside a nav element, or alternatively, set a valid ARIA role on the element itself.
Detailed Explanation
HTML5 introduced a specific set of elements with implicit ARIA roles and behaviors, like the nav element, which implicitly has the navigation role. For backward compatibility or advanced use cases, developers might explicitly set ARIA roles using the role attribute. However, setting an invalid role can lead to accessibility issues, as seen with trying to assign navigation to a ul element.
Instead of applying the navigation role to a ul directly, wrap your ul with a nav element.
The allowed ARIA roles for an ul element are directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar and tree, but not navigation.
Examples
Here is how you can use the nav element with a ul.
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>