HTML Checking for Large Sites

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>

Learn more:

• HTML Spec: the script element
• MDN: the script element

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>.

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>

Learn more:

• HTML Living Standard: src attribute on iframe

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" />

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.

Check the iframe spec.

The src attribute on an element <img> contains a { curly bracket character, which is not allowed unless properly encoded.

Space characters are not allowed in src attributes. Instead, they should be converted to %20. In this example, the first line is invalid and the second is valid:

<img src="https://example.com/?s=some term" alt="description" />
<img src="https://example.com/?s=some%20term" alt="description" />

The src attribute on an <img> tag is not allowed to contain space characters. You should replace them with “%20“.

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.

Check the iframe spec.

<img> tags used to display images require the attribute src to indicate the source of the image, for example <img src="/img/photo.jpg" />.

The async and defer boolean attributes of the <script> element control how an external script should be executed once it has been downloaded. The async attribute makes sense when an external script (defined with the src attribute) is loaded, or when defining a script of type module:

<script async src="app.js"></script>

<script type="module">
  /* JavaScript module code here */
</script>

Learn more:

• MDN: JavaScript Modules

The charset attribute on a <script> element can be used to specify the character encoding of an external script, whose URL should be specified on the src attribute.

If the script is not external, then the charset attribute should not be used, as the character encoding of the HTML document will be used.

Learn more:

• MDN: The script element

The defer and async boolean attributes of the <script> element control how an external script should be executed once it has been downloaded. These attributes only make sense when referring to external scripts, so a src attribute must also be present to specify the location of the script.

Example:

<script defer src="app.js"></script>

If your script is not external, and is inlined within the HTML document, then you should remove the defer attribute, like in this example:

<script>
  console.log("hello");
</script>

Learn more:

• MDN: HTMLScriptElement

<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>