HTML Guide
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 query part of that URL contains one or more space characters, which are not allowed, for example:
<iframe src="https://maps.google.it/maps?q=2700 6th Avenue"></iframe>
You should properly escape all space characters as %20 like this:
<iframe src="https://maps.google.it/maps?q=2700%206th%20Avenue"></iframe>Learn more:
Related W3C validator issues
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 contains square brackets ([ or ]) in the URL’s query string, which are not permitted in valid HTML URLs.
According to the HTML standard, attribute values such as URLs must conform to valid URI syntax. Unencoded square brackets are reserved characters in URI syntax and must be percent-encoded. Specifically, [ should be replaced with %5B and ] with %5D. This ensures the URL is correctly interpreted by browsers and validators. For example, a URL parameter like sort=[asc] should be coded as sort=%5Basc%5D.
Correct HTML Example:
<iframe src="/page?time=%5Btimestamp%5D"></iframe>Always encode reserved characters in URLs when using them in HTML attribute values to ensure W3C compliance.
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 <script> tag allows authors to include dynamic scripts and data blocks in their documents. When the src is present, this tag accepts a type attribute which must be either:
- an empty string
- text/javascript (that’s the default, so it can be omitted)
- module
Examples:
<!-- This is valid, without a type it defaults to JavaScript -->
<script src="app.js"></script>
<!-- This is valid, but will warn that it can be omitted -->
<script type="text/javascript" src="app.js"></script>
<!-- An empty attribute is valid, but will warn that it can be omitted -->
<script type="" src="app.js"></script>
<!-- The module keyword is also valid as a type -->
<script type="module" src="app.js"></script>
<!-- Any other type is invalid -->
<script type="wrong" src="app.js"></script>
<script type="text/html" src="app.js"></script>
<script type="image/jpeg" src="app.js"></script>The seamless attribute was proposed to be included in the HTML5 spec, but it wasn’t finally accepted, so it’s not a valid attribute for <iframe>.
There is an iframe tag inside a noscript tag that is itself inside the head section of the HTML document. This is not allowed because an iframe cannot be nested inside the head section.
To fix this issue, you may move the noscript section that contains the iframe tag outside of the head section, and ensure that it is placed within the body section of the HTML document.
For example, this is invalid HTML because the head section cannot contain iframe elements:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My webpage</title>
<noscript>
<p>Please enable JavaScript to view this website</p>
<iframe src="https://example.com/"></iframe>
</noscript>
<!-- Other meta tags and styles go here -->
</head>
<body>
<!-- Rest of your webpage content goes here -->
</body>
</html>Moving the noscript inside the body section fixes the issue, as that’s where iframe elements belong:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My webpage</title>
<!-- Other meta tags and styles go here -->
</head>
<body>
<noscript>
<p>Please enable JavaScript to view this website</p>
<iframe src="https://example.com/"></iframe>
</noscript>
<!-- Rest of your webpage content goes here -->
</body>
</html>The value allow-storage-access-by-user-activation is not a valid keyword for the sandbox attribute of the iframe, as it’s still an experimental value.
The sandbox attribute enables an extra set of restrictions for the content in an iframe. You can add specific keywords to relax certain restrictions, such as allow-scripts, allow-forms, allow-popups, and others.
The experimental value allow-storage-access-by-user-activation is not yet a part of the official list of allowed keywords recognized by the W3C validator or the WHATWG HTML standard.
Space characters are not permitted in the value of the href attribute; they must be properly percent-encoded.
The href attribute specifies a URL, and URLs must follow specific syntax rules defined by RFC 3986. Spaces and some other characters are considered illegal in URLs. To include a space in the URL, use the percent escape sequence %20 in place of the space character.
Incorrect example with an illegal space in the query string:
<a href="search.html?q=my search">Search for 'my search'</a>Correct example using percent-encoding for the space:
<a href="search.html?q=my%20search">Search for 'my search'</a>Replace all spaces in URLs within href attributes with %20 to ensure W3C validation and proper browser behavior.
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" />