Skip to content
HTMLHint

head-script-disabled

The <script> tag can not be used in head.

Level: Warning

Config value

Section titled “Config value”
  • true: enable rule (disallow all scripts in head)
  • false: disable rule
  • "allow-non-blocking": allow non-blocking scripts (modules, deferred, and async scripts) in head

The following patterns are not considered rule violations

Section titled “The following patterns are not considered rule violations”

Default behavior (true)

Section titled “Default behavior (true)”
<body>
  <script src="test.js"></script>
</body>
<head>
  <script type="text/template">
    <div>Template content</div>
  </script>
</head>

With "allow-non-blocking" option

Section titled “With "allow-non-blocking" option”
<head>
  <script type="module" src="module.js"></script>
</head>
<head>
  <script defer src="deferred.js"></script>
</head>
<head>
  <script async src="analytics.js"></script>
</head>
<head>
  <script type="module">
    import { init } from './app.js';
    init();
  </script>
</head>

The following patterns are considered rule violations

Section titled “The following patterns are considered rule violations”

Default behavior (true)

Section titled “Default behavior (true)”
<head>
  <script src="test.js"></script>
</head>
<head>
  <script type="module" src="module.js"></script>
</head>

With "allow-non-blocking" option

Section titled “With "allow-non-blocking" option”
<head>
  <script src="test.js"></script>
</head>
<head>
  <script type="text/javascript">
    console.log('blocking script');
  </script>
</head>

Why this rule is important

Section titled “Why this rule is important”

Scripts in the <head> section traditionally block HTML parsing and rendering, which can negatively impact page load performance. However, modern JavaScript features like ES6 modules (type="module"), the defer attribute, and the async attribute allow scripts to be non-blocking, making them safe to place in the head without performance penalties.

For more information, see: