Syntax
<script src="app.js"></script>Examples
External Script
Loading JavaScript from a separate file.
<script src="/js/app.js"></script>Inline Script
Writing JavaScript directly within the HTML document.
<script>
console.log("Page loaded");
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM ready");
});
</script>Deferred and Module Scripts
Controlling load timing and using ES modules.
<script src="/js/analytics.js" defer></script>
<script type="module" src="/js/main.js"></script>Attributes
- src (URL): Path to an external JavaScript file
- defer (boolean): Delays execution until after the document is parsed, preserving order
- async (boolean): Downloads the script in parallel and executes as soon as it is ready, out of order
- type (module | text/javascript): Specifies the scripting language or module type
Best practices
- Place scripts before the closing </body> tag, or use defer, so they do not block HTML rendering
- Use defer for scripts that need to run in order and depend on the full DOM being parsed
- Use async only for independent scripts where execution order does not matter, like analytics
- Prefer external scripts with src over large inline scripts for better caching and readability
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<canvas>
The <canvas> element provides a blank, resizable bitmap surface for drawing graphics, animations, and visualizations via JavaScript — typically using the Canvas 2D API or WebGL. Unlike SVG, canvas content is pixel-based rather than made of individually addressable DOM elements, which makes it well-suited for games, charts, and pixel-level image manipulation.<noscript>
The <noscript> element defines content to display only when JavaScript is disabled or unsupported in the browser. It commonly contains a message explaining that the page requires JavaScript, or a fallback version of functionality that would otherwise depend on scripting.<template>
The <template> element holds HTML content that the browser parses but does not render or execute when the page loads. Its content is inert — scripts inside it will not run, and images inside it will not load — until it is cloned into the visible DOM via JavaScript. This makes it a clean way to define reusable markup fragments for dynamic UI without building HTML strings in JavaScript.HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.
The <canvas> element provides a blank, resizable bitmap surface for drawing graphics, animations, and visualizations via JavaScript — typically using the Canvas 2D API or WebGL. Unlike SVG, canvas content is pixel-based rather than made of individually addressable DOM elements, which makes it well-suited for games, charts, and pixel-level image manipulation.<noscript>
The <noscript> element defines content to display only when JavaScript is disabled or unsupported in the browser. It commonly contains a message explaining that the page requires JavaScript, or a fallback version of functionality that would otherwise depend on scripting.<template>
The <template> element holds HTML content that the browser parses but does not render or execute when the page loads. Its content is inert — scripts inside it will not run, and images inside it will not load — until it is cloned into the visible DOM via JavaScript. This makes it a clean way to define reusable markup fragments for dynamic UI without building HTML strings in JavaScript.HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.