HTML · Scripts & Styles

<script> Element

Add JavaScript to make your pages interactive

Find videos you like?

Save to resource drawer for future reference!

What is <script>?

Add JavaScript for interactivity

The <script> element embeds or references JavaScript code. You can write code directly inside (inline) or link to external .js files.

📝

Inline Scripts

📄

External Files

📦

ES6 Modules

Script Types

Three ways to use scripts

Script Formats

Inline vs External vs Module

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script Types</title>
  </head>
  <body>
    <div class="types">
      <div class="type-card">
        <h3>Inline Script</h3>
        <code>&lt;script&gt;code here&lt;/script&gt;</code>
        <p>JavaScript inside HTML</p>
      </div>
      <div class="type-card">
        <h3>External Script</h3>
        <code>&lt;script src="file.js"&gt;</code>
        <p>Separate .js file</p>
      </div>
      <div class="type-card">
        <h3>ES6 Module</h3>
        <code>&lt;script type="module"&gt;</code>
        <p>Import/export syntax</p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Inline Script

JavaScript code directly in HTML

Inline Script Example

JavaScript inside the HTML file

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Script</title>
  </head>
  <body>
    <h1 id="greeting">Hello!</h1>
    <button onclick="changeText()">Click Me</button>
  </body>
</html>

Live Preview

Loading preview...

When to Use

Use inline scripts for small, page-specific code. For larger projects, external files are better for organization and caching.

External Script

Link to separate JavaScript file

External Script Example

Using src attribute to load JavaScript

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Script</title>
  </head>
  <body>
    <h1>External JavaScript</h1>
    <p id="output">Waiting for script...</p>
    <!-- External script -->
    <!-- Inline script to demonstrate -->
  </body>
</html>

Live Preview

Loading preview...

Syntax:

<script src="path/to/file.js"></script>

ES6 Modules

Modern JavaScript with import/export

ES6 Module Script

Using type='module' for modern JS

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 Module</title>
  </head>
  <body>
    <h1>ES6 Module Script</h1>
    <div id="result"></div>
    <!-- Modern ES6 module -->
  </body>
</html>

Live Preview

Loading preview...

Modern Approach

ES6 modules automatically use strict mode, have their own scope, and support import/export. They're loaded with defer by default.

Script Attributes

Control how scripts load and execute

srcsrc="script.js"

Path to external JavaScript file

typetype="module"

Script type (module, text/javascript)

asyncasync

Download in parallel, execute when ready

deferdefer

Download in parallel, execute after HTML

crossorigincrossorigin="anonymous"

CORS requests for external scripts

integrityintegrity="sha384-..."

Verify file integrity (SRI)

Previous Topic

Favicon

Adding favicons and touch icons for different devices.

Next Topic

Script Placement

Best practices for script placement and loading strategies.

Ask a Question

Have a question about Script Element? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Scripts & Styles

<script> Element

Add JavaScript to make your pages interactive

Find videos you like?

Save to resource drawer for future reference!

What is <script>?

Add JavaScript for interactivity

The <script> element embeds or references JavaScript code. You can write code directly inside (inline) or link to external .js files.

📝

Inline Scripts

📄

External Files

📦

ES6 Modules

Script Types

Three ways to use scripts

Script Formats

Inline vs External vs Module

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script Types</title>
  </head>
  <body>
    <div class="types">
      <div class="type-card">
        <h3>Inline Script</h3>
        <code>&lt;script&gt;code here&lt;/script&gt;</code>
        <p>JavaScript inside HTML</p>
      </div>
      <div class="type-card">
        <h3>External Script</h3>
        <code>&lt;script src="file.js"&gt;</code>
        <p>Separate .js file</p>
      </div>
      <div class="type-card">
        <h3>ES6 Module</h3>
        <code>&lt;script type="module"&gt;</code>
        <p>Import/export syntax</p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Inline Script

JavaScript code directly in HTML

Inline Script Example

JavaScript inside the HTML file

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Script</title>
  </head>
  <body>
    <h1 id="greeting">Hello!</h1>
    <button onclick="changeText()">Click Me</button>
  </body>
</html>

Live Preview

Loading preview...

When to Use

Use inline scripts for small, page-specific code. For larger projects, external files are better for organization and caching.

External Script

Link to separate JavaScript file

External Script Example

Using src attribute to load JavaScript

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Script</title>
  </head>
  <body>
    <h1>External JavaScript</h1>
    <p id="output">Waiting for script...</p>
    <!-- External script -->
    <!-- Inline script to demonstrate -->
  </body>
</html>

Live Preview

Loading preview...

Syntax:

<script src="path/to/file.js"></script>

ES6 Modules

Modern JavaScript with import/export

ES6 Module Script

Using type='module' for modern JS

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 Module</title>
  </head>
  <body>
    <h1>ES6 Module Script</h1>
    <div id="result"></div>
    <!-- Modern ES6 module -->
  </body>
</html>

Live Preview

Loading preview...

Modern Approach

ES6 modules automatically use strict mode, have their own scope, and support import/export. They're loaded with defer by default.

Script Attributes

Control how scripts load and execute

srcsrc="script.js"

Path to external JavaScript file

typetype="module"

Script type (module, text/javascript)

asyncasync

Download in parallel, execute when ready

deferdefer

Download in parallel, execute after HTML

crossorigincrossorigin="anonymous"

CORS requests for external scripts

integrityintegrity="sha384-..."

Verify file integrity (SRI)

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Favicon

Script Placement

HTML Code Editor

Building Your Learning Module...

<script> Element

Script Formats

Inline Script Example

When to Use

External Script Example

ES6 Module Script

Modern Approach

Favicon

Script Placement

HTML Code Editor

<script> Element

Script Formats

Inline Script Example

When to Use

External Script Example

ES6 Module Script

Modern Approach