[JavaScript] Best Practices for Embedding and Executing Scripts in HTML

2026年1月22日

Overview

To add interactivity to a web page, you need to write and load JavaScript correctly within your HTML files. This article explains two methods: “Inline scripts,” which are written directly inside the HTML, and “External scripts,” which are loaded from a separate file. We will focus on the modern standard of using the defer attribute, which is better for page loading speed and code management.

Specifications (Input/Output)

Input: The browser completes the loading of the HTML file.
Output:
- An initialization message appears in the console.
- Text in a specific element (Status area) on the screen is updated.

Basic Usage

To apply JavaScript to HTML, use the <script> tag. In professional development, “External script loading” (separating HTML and JavaScript) is recommended. However, inline scripts can be used for learning or simple testing.

The following structure shows how to load and execute a script saved as an external file (main.js) from an HTML file.

Full Code (HTML / JavaScript)

HTML (index.html)

By adding the defer attribute, the script is downloaded in the background without stopping the HTML parsing. It runs automatically after the HTML parsing is complete.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Loading Demo</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>System Status</h1>
        <p>Current Status: <span id="status-text">Loading...</span></p>
    </div>
</body>
</html>

JavaScript (main.js)

This is a basic script that finds a DOM element and changes its text.

/**
 * Application initialization process.
 * This runs after the HTML is loaded.
 */
const initApplication = () => {
    // Output to the console (Viewable in Developer Tools)
    console.log('System started');

    // Get the HTML element
    const statusElement = document.querySelector('#status-text');

    // Change text only if the element exists
    if (statusElement) {
        statusElement.textContent = 'Active';
        statusElement.style.color = 'green';
    }
};

// Execute the initialization function when the script loads
initApplication();

Customization Points

File Paths: If your JS file is in a different folder, update the path like src="js/main.js".
Execution Timing: If you want to wait until all resources (like images) are fully loaded, use window.addEventListener('load', ...).
Target Elements: You can change which HTML element to control by modifying the argument in querySelector.

Important Points

Loading Order and Blocking: If you put a <script> tag in the <head> without defer or async, the screen will stay blank until the script finishes loading. Always use defer or place the script tag just before the closing </body> tag.
Cache Issues: Browsers save (cache) external JS files. If your changes do not appear, clear the browser cache or perform a “Hard Reload” (Ctrl + F5).
Syntax Errors: Forgetting to close a tag (e.g., missing </script>) can break the entire page layout or stop the script from working.

Advanced Usage

Using type=”module”

When using modern JavaScript features (like import and export) to break your code into parts, use the following syntax:

<script type="module" src="app.js"></script>

In app.js, you can then load other files:

import { setupConfig } from './config.js';
setupConfig();

Summary

When integrating JavaScript into HTML, using the defer attribute is the modern best practice because it does not slow down the page display. While inline scripts are easy to use, they become hard to manage as your code grows. It is better to get into the habit of using external files early on. Understanding the role of the code and when it executes is the fastest way to bug-free implementation.

よかったらシェアしてね！