HTML <script> Tag

Beginner
⏱️ 7 min read
📚 Updated: Jun 2026
🎯 3 Examples
HTML Scripting
HTML script tag tutorial — embed JavaScript with src async and defer
Overview

What You’ll Learn

The <script> tag embeds JavaScript in HTML pages. This guide covers syntax, src, async, defer, placement, inline vs external scripts, and best practices for beginners.

01

Embed JS

Add interactivity.

02

src

External files.

03

async/defer

Load control.

04

Placement

head or body.

05

Inline

In-document code.

06

Performance

Best practices.

Fundamentals

What Is the <script> Tag?

The <script> tag is an essential HTML element used to embed or reference JavaScript code within an HTML document. It enables developers to enhance the functionality and interactivity of web pages.

✅
Valid HTML5 — Scripting Element

Use script for inline JavaScript or link external .js files with the src attribute.

In HTML5, JavaScript is the default scripting language, so type="text/javascript" is optional on script elements.

Foundation

📝 Syntax

Embed JavaScript directly inside a script element:

syntax.html
<script>
  function greetUser() {
    alert("Hello, User!");
  }
</script>

External Script Syntax

external-syntax.html
<script src="app.js" defer></script>

Syntax Rules

  • Omit type="text/javascript" in HTML5 unless using a different script type.
  • When using src, the element must be empty — no inline code inside.
  • Use defer or async on external scripts in head for better loading.
  • Never use HTML comments inside script blocks to hide JavaScript.
Cheat Sheet

⚡ Quick Reference

TopicCode SnippetNotes
Inline script<script>...</script>In-document JS
External filesrc="app.js"Empty element
deferdeferRun after parse
asyncasyncRun when ready
ES moduletype="module"Modern JS
Browser supportUniversalAll browsers
Comparison

⚖️ async vs defer

AttributeDownloadExecute
asyncParallel with HTML parsingAs soon as downloaded (unordered)
deferParallel with HTML parsingAfter HTML parsed (in order)
NeitherBlocks parsing while downloadingImmediately when encountered
Reference

🧰 Attributes

The <script> tag supports attributes such as src, async, and defer that control how scripts load and execute.

attributes.html
<script src="app.js" defer></script>
src External

URL of an external JavaScript file.

src="app.js"
defer Loading

Download in parallel; execute after HTML is parsed.

defer
async Loading

Download in parallel; execute as soon as ready.

async
type Optional

Script language. Default is JavaScript; use module for ES modules.

type="module"
Try defer attribute
Performance

📍 Placement

The placement of the <script> tag within the HTML document can impact page loading and rendering. Consider placing scripts in the head with defer or async, or at the end of the body for inline scripts.

placement.html
<head>
  <script src="app.js" defer></script>
</head>

<body>
  <!-- Your HTML content -->

  <script>
    // Inline JavaScript code
  </script>
</body>
  • head + defer — Best for external scripts that need the full DOM.
  • head + async — For independent scripts like analytics.
  • Before </body> — Classic pattern for inline scripts without defer.
Try placement example
Hands-On

Examples Gallery

Embed inline JavaScript and link external .js files with the script tag.

👀 Live Preview

Inline script with a click handler:

📚 Common Use Cases

Use <script> for inline JavaScript or external files referenced with src.

Inline Script

The script tag lets you include JavaScript directly within your HTML document.

inline-script.html
<script>
  function displayMessage() {
    alert("This is an inline script!");
  }
</script>
Try It Yourself

External Script

For larger scripts or better organization, use the src attribute to link an external JavaScript file.

external-script.html
<script src="app.js" defer></script>
Try It Yourself
A11y

♿ Accessibility

  • Do not rely on script for essential content — Core information should be available without JavaScript.
  • Provide keyboard alternatives — Replace onclick-only interactions with proper event handlers and focusable controls.
  • Announce dynamic changes — Use ARIA live regions when scripts update the page for screen readers.
  • Respect user preferences — Consider reduced motion and script-blocking scenarios.

🧠 How <script> Works

1

Browser finds script

Parser encounters script in head or body.

Parse
2

Script loads or runs

Inline code runs immediately, or src file is fetched.

Load
3

defer/async control timing

Attributes delay execution until parse completes or file is ready.

Execute
=

Interactive web pages

JavaScript responds to users and updates the DOM dynamically.

Compatibility

Browser Support

The <script> tag is supported in all major browsers, including Internet Explorer.

✓ Baseline · HTML4 / HTML5

JavaScript embedding everywhere

All browsers support <script> with src, async, and defer.

100% Core tag support
Google Chrome Fully supported
Full support
Mozilla Firefox Fully supported
Full support
Apple Safari Fully supported
Full support
Microsoft Edge Fully supported
Full support
Internet Explorer Fully supported · EOL
Full support
Opera Fully supported
Full support
<script> tag 100% supported

Bottom line: Use <script> confidently to embed JavaScript in any browser.

Wrap Up

Conclusion

Mastering the <script> tag is pivotal for web developers seeking to unlock the full potential of JavaScript. Whether it is inline scripts for small tasks or external scripts for large applications, understanding script placement and loading attributes is a crucial step toward creating dynamic web experiences.

View Examples Gallery Try inline script
Pro Tips

💡 Best Practices

✅ Do

  • Choose script placement wisely for performance
  • Use external scripts for modularity
  • Apply defer or async when appropriate
  • Keep external script files updated and maintained

❌ Don’t

  • Block rendering with unoptimized script tags
  • Mix inline code inside src elements
  • Rely on obsolete type="text/javascript" as required
  • Use inline onclick for complex app logic
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <script>

Bookmark these before you embed JavaScript.

6
Core concepts
⚡ 01

Embed JS

Add behavior.

Purpose
📂 02

src

External files.

Attributes
⏳ 03

defer

After parse.

Loading
📍 04

Placement

head or body.

Performance
📝 05

Inline

In-document.

Pattern
🌐 06

100% Support

All browsers.

Compatibility
🎯 You’re ready to embed JavaScript in HTML
Review Quick Reference →

❓ Frequently Asked Questions

It embeds or references JavaScript to add interactivity to web pages.
No in HTML5. JavaScript is the default scripting language.
async runs when downloaded. defer runs after HTML parsing, in order.
Use defer in head for external files, or inline scripts before </body>.
Yes. Full support in every major browser.

Embed JavaScript

Practice <script> with inline code, defer, and placement in the Try It editor.

Try inline script →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML samp Tag HTML section Tag