HTML Guide for iframe
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>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 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 allowfullscreen attribute is used to allow an iframe to activate fullscreen mode. As a boolean attribute, it should only be declared without any value.
Here is an example of correct usage:
<iframe src="https://example.com" allowfullscreen></iframe>However, this is now a legacy attribute, and has been redefined as allow="fullscreen", as part of the more general Permissions Policy:
<iframe src="https://example.com" allow="fullscreen"></iframe>The value used in the height attribute on element iframe is not a valid integer. Remove any leading or trailing spaces from the attribute value.
Here’s an example:
<iframe width="560" height="315" src="your-video-link" frameborder="0" allowfullscreen></iframe>The value of the name attribute on an <iframe> should not start with an underscore (_).
Browsing context names that begin with an underscore are reserved keywords in HTML, like _blank, _self, _parent, and _top. Using these reserved names or any custom name starting with an underscore for the name attribute of an <iframe> can lead to unexpected behavior and is considered invalid HTML.
Here’s how to fix the issue:
Problematic Code
<iframe src="https://example.com" name="_example"></iframe>Solution
To resolve this issue, you should use a valid value for the name attribute that does not start with an underscore.
Corrected Code
<iframe src="https://example.com" name="example"></iframe>Steps:
- Identify the iframe element with the invalid name attribute value that starts with an underscore.
- Replace the name value with a valid identifier that does not start with _. Use letters, numbers, hyphens (-), and underscores (_) (but not at the beginning).
The sandbox attribute is used with the iframe element to isolate the content of the embedded document from the rest of the page. It helps prevent malicious code from running on your website. However, the value assigned to the sandbox attribute in your iframe element includes both the allow-scripts and allow-same-origin options. This combination essentially removes all the protections that the sandbox attribute provides and allows the embedded document to break out of the sandbox.
To fix this issue, you should remove the allow-scripts and allow-same-origin values from the sandbox attribute. Instead, you should explicitly enable only the permissions that the embedded document requires.
Here’s an example iframe element with the proper use of sandbox:
<iframe src="https://example.com" sandbox="allow-forms allow-popups"></iframe>This iframe element loads the https://example.com URL and has its sandbox attribute set to only allow-forms and allow-popups. This explicitly enables only the permissions that the embedded document may need, while also retaining the protections of the sandbox attribute.
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.
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>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 <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.
<iframe> tags are used to embed another document within the current document. To indicate the contents of that nested document, you can either use the src attribute with an URL, or directly provide the contents with the srcdoc attribute. Examples:
<!-- This will embed a document by its URL -->
<iframe src="https://example.com"></iframe>
<!-- This will embed the contents provided in the srcdoc attribute -->
<iframe srcdoc="<p>some content</p>"></iframe>
<!-- This is invalid -->
<iframe><p>some content</p></iframe>The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.
As the iframe is a container that holds an embedded HTML page, it cannot be nested inside an a tag.
The issue you’re encountering comes from using the longdesc attribute on an iframe element. The longdesc attribute was historically used to provide a URL to a long description of the content. However, it is now considered obsolete and should not be used. Instead, you should use a regular a (anchor) element to provide a link to the description.
Here’s a short guide on how to fix this issue:
Original Code with longdesc
<iframe src="video.html" longdesc="description.html" title="Video"></iframe>Updated Code with Regular a Element
The recommended approach is to use a regular a element to provide a link to the description, like in the following example:
<iframe src="video.html" title="Video"></iframe>
<p>
<a href="description.html">Long description of the video content</a>
</p>Explanation
- Original Code: The longdesc attribute is used on the iframe element, which is now obsolete.
- Updated Code: We remove the longdesc attribute and provide an external link using the a element to guide users to the description.