Home / HTML / JavaScript

HTML JavaScript

What is JavaScript in HTML?

JavaScript is a programming language that adds interactivity to HTML pages. JavaScript can be added to HTML using the <script> tag. JavaScript can be embedded inline in HTML or included as an external file.

The Script Element

The <script> element is used to embed or reference JavaScript code in an HTML document. The script can be placed in the <head> section, the <body> section, or both.

Inline JavaScript

JavaScript code can be written directly in the HTML using the <script> tag:

Script in Head

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <script>
        function greet() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="greet()">Click Me</button>
</body>
</html>

Script in Body

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <h1 id="demo">Hello, World!</h1>
    <script>
        document.getElementById('demo').innerHTML = 'Hello, JavaScript!';
    </script>
</body>
</html>

External JavaScript

JavaScript code can be stored in a separate file and linked using the src attribute:

External JavaScript File

Example - HTML File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <script src="script.js"></script>
</head>
<body>
    <h1 id="demo">Hello, World!</h1>
    <button onclick="changeText()">Change Text</button>
</body>
</html>

Example - JavaScript File (script.js)

function changeText() {
    document.getElementById('demo').innerHTML = 'Text changed!';
}

Script Tag Attributes

Common attributes for the <script> tag:

Src Attribute

The src attribute specifies the URL of an external JavaScript file:

Example

<script src="script.js"></script>
<script src="/js/main.js"></script>
<script src="https://cdn.example.com/script.js"></script>

Type Attribute

The type attribute is optional in HTML5 (JavaScript is the default):

Example

<!-- HTML5 (type not needed) -->
<script src="script.js"></script>

<!-- HTML4 (type required) -->
<script type="text/javascript" src="script.js"></script>

Async Attribute

The async attribute loads the script asynchronously:

Example

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

Defer Attribute

The defer attribute defers script execution until the HTML is parsed:

Example

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

Script Placement

Where to place scripts:

In the Head

Scripts in the head are loaded before the page content, which can delay page rendering:

Example

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

At the End of Body (Recommended)

Scripts at the end of the body load after the page content, improving page load speed:

Example

<body>
    <h1>Page Content</h1>
    <script>
        // Script at end of body (recommended)
        console.log('Script at end of body');
    </script>
</body>

Inline Event Handlers

JavaScript can be called directly from HTML using inline event handlers:

Example

<button onclick="alert('Button clicked!')">Click Me</button>
<button onclick="document.getElementById('demo').innerHTML = Date()">Show Date</button>
<p id="demo"></p>

Best Practices

Use external files: Separate JavaScript from HTML for better maintainability
Place scripts at end of body: Improves page load speed
Use defer for non-critical scripts: Defers execution until HTML is parsed
Use async carefully: Async scripts can execute out of order
Avoid inline event handlers: Use addEventListener instead
Minify for production: Minify JavaScript files to reduce file size

NoScript Element

The <noscript> element provides content for browsers that don't support JavaScript or have it disabled:

Example

<script>
    document.write('JavaScript is enabled!');
</script>
<noscript>
    <p>JavaScript is disabled. Please enable JavaScript to view this page properly.</p>
</noscript>

← HTML Iframes File Paths →