HTML Course 14.1 Inserting scripts (script in head and body)

HTML Course 14.1: Inserting Scripts (script in head and body)

Scripts in HTML bring interactivity and logic to a page. You can place them in the <head> or at the end of your content (traditionally inside the body). Depending on where and how you insert them—inline or external, blocking or non-blocking—the page behavior and performance will differ.

1. Script Placement in <head>

When you put a <script> tag inside the <head>, the browser parses and executes it immediately when it encounters the tag. This can block HTML parsing until the script is fully downloaded and run.

• Default (blocking): HTML parsing pauses, script downloads, then executes.
• defer: Script is fetched in parallel, execution is deferred until the HTML is fully parsed.
• async: Script is fetched in parallel, execution happens as soon as it’s ready (order not guaranteed).

<head>
  
  <script>
    console.log('Inline script in head executed');
  </script>

  
  <script src='main.js'></script>

  
  <script src='deferred.js' defer></script>

  
  <script src='async.js' async></script>

  
  <script type='module' src='app-module.js'></script>
</head>
    

2. Script Placement at End of Content

Adding scripts just before the end of your content (traditionally before </body>) allows the browser to build the DOM first, then run the JavaScript. This avoids blocking the initial render.

  <!-- Page content -->
  <div id='content'>
    <p>This is the main page content.</p>
  </div>

  <!-- 1. Inline script after content: safe DOM manipulation -->
  <script>
    // At this point, #content exists in the DOM
    document.getElementById('content').style.backgroundColor = '#eef';
    console.log('DOM is ready, inline script ran');
  </script>

  <!-- 2. External script after content -->
  <script src='footer-behavior.js'></script>

  <!-- 3. Dynamically inserted script -->
  <script>
    var dynamicScript = document.createElement('script');
    dynamicScript.src = 'dynamic-loaded.js';
    dynamicScript.onload = function(){
      console.log('Dynamic script loaded and executed');
    };
    document.head.appendChild(dynamicScript);
  </script>
    

3. Attributes Comparison: async vs defer vs default

4. Best Practices

• Keep scripts external to enable browser caching.
• Use defer for scripts that need the fully built DOM but don’t depend on each other’s execution order.
• Use async for independent scripts (e.g., analytics) where execution order doesn’t matter.
• Place critical inline scripts in the <head> only if they must run before anything else (e.g., feature detection).
• Load heavy libraries at the end of content or defer them to avoid render-blocking.
• For ES modules, use type='module', which behaves like defer and supports import/export.