HTML Guide
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>Learn more:
Related W3C validator issues
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.
All HTML elements may have the hidden boolean attribute set. When specified on an element, it indicates that the element is not yet, or is no longer, relevant, so browsers won’t render it.
Boolean attributes don’t accept values, its presence represents the true value and its absence represents the false value.
<!-- This is invalid because the hidden attribute should not have a value set -->
<div hidden="false"></div>
<!-- The correct way to hide a div is like this -->
<div hidden>This will be hidden</div>
<!-- And to show the element, we just don't hide it -->
<div>This won't be hidden</div>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.
checked is a boolean attribute and should not have a value; it must be written as just checked.
The checked attribute is used with <input> elements of type checkbox or radio. As a boolean attribute, it is either present (interpreted as true) or omitted (false). Adding any value, like checked="true", is not valid and causes a validation error. The correct usage is simply checked, not checked="true" or checked="checked".
Incorrect example:
<input type="checkbox" checked="true">Correct example:
<input type="checkbox" checked>Example in context:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkbox Example</title>
</head>
<body>
<label>
<input type="checkbox" checked>
Subscribe to newsletter
</label>
</body>
</html>The multiple attribute is used to indicate that multiple options can be selected in a <select> element. As a boolean attribute, it should only be declared without any value.
Instead of:
<select multiple="true">You should use:
<select multiple>Here is an example of the correct usage of the multiple attribute:
<label for="colors">Select your favorite colors:</label>
<select id="colors" name="colors" multiple>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>The selected attribute on option elements is boolean, so it should not have any value associated.
To fix this issue, simply remove the value assigned to the selected attribute.
Instead of this:
<select>
<option selected="true">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Use this:
<select>
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>In the example above, we’ve removed the value assigned to the selected attribute on the first option element. This will specify that “Option 1” is the default option to be selected in the dropdown list.
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>