Where should I put the tag?

Either in the with the defer attribute, or just before the closing tag. Both stop the script from delaying the visible page.

<script> & <noscript> Tags in HTML – async, defer & Live Example

Quick facts

Category	Metadata, flow, phrasing and script-supporting content (both)
Content model	<script>: JavaScript (or data for other types), or nothing when src is used. <noscript>: transparent fallback content
Tag omission	Neither the start nor the end tag can be omitted, for either element — even with src, <script> needs </script>
Permitted parents	Anywhere metadata or phrasing content is allowed: the <head> or the <body>
DOM interfaces	`HTMLScriptElement`, `HTMLElement` (<noscript>)

Syntax

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

<script>
  console.log("Hello");
</script>

<noscript>Please turn on JavaScript.</noscript>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

<script>

Attribute	Description
src	The URL of an external JavaScript file
defer	Downloads in the background and runs after the HTML is parsed, in order
async	Downloads in the background and runs as soon as it arrives, in any order
type	`module` for JavaScript modules, `importmap`, or a data type such as `application/ld+json` for structured data
nomodule	Runs only in old browsers that don’t support modules
crossorigin / integrity	Security options for scripts from another domain

<noscript>

Attribute	Description
—	Only the global attributes apply.

Common examples

An external script that doesn’t slow the page

Load your JavaScript from a file with defer: it downloads in the background and runs once the HTML is ready.

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

A JavaScript module

Modules can import code from other files, and are deferred automatically.

<script type="module">
  import { greet } from "./greet.js";
  greet("world");
</script>

Structured data for search engines

A script with the JSON-LD type doesn’t run at all — it carries structured data that Google reads to understand the page and show rich results.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Example Inc.",
  "url": "https://example.com/"
}
</script>

Inline scripts vs external files

An inline script is written directly between <script> tags in the page; an external script lives in its own .js file loaded with src. External files are cached by the browser, so a script shared by many pages downloads only once, and they keep your HTML tidy and easier to maintain.

Inline scripts make sense for small amounts of code used on one page only, since they save an extra download. As a rule: shared or large code goes in a file, tiny page-specific snippets can stay inline.

	Inline	External file
Cached between pages	No	Yes
Extra download	No	Yes, once
Best for	Tiny, page-specific code	Shared or large code

Common mistakes to avoid

Blocking scripts in the head. A plain <script src> in the <head> stops the page from showing until it downloads and runs; add defer.
Wrong file paths. A typo in src fails silently. Open your browser’s developer tools (Console tab) to see the 404 error.
Self-closing script tags. <script src="app.js" /> doesn’t work; always write the closing </script>.
Using document.write. It’s slow and can wipe the page; change the page with DOM methods such as textContent or append instead.

Accessibility & SEO tips

Put important content in the HTML itself rather than generating it only with JavaScript; search engines can run scripts, but content in the HTML is indexed faster and more reliably.
Make sure anything your script makes clickable is a real <button> or link, so it works with the keyboard.
Use <noscript> to explain what visitors miss if JavaScript is turned off.

Browser support

Supported in every browser. The defer and async attributes and type=”module” work in all current browsers.

Tutorial: How to make a button

Related tags

Frequently asked questions

What is the difference between async and defer?

Both download the script without blocking the page. defer waits until the HTML is fully parsed and runs scripts in the order they appear, which suits most site scripts. async runs each script as soon as it downloads, in no fixed order, which suits independent scripts like analytics.

Where should I put the <script> tag?

Either in the <head> with the defer attribute, or just before the closing </body> tag. Both stop the script from delaying the visible page.

Why does my script say an element is null?

The script ran before the element existed. Move the <script> below the element, add defer, or wait for the DOMContentLoaded event.

What does type="module" do?

It loads the script as a JavaScript module, which can import and export code between files, runs in strict mode and is deferred automatically. Browsers that don't support modules skip it.

How do I run code only after the page has loaded?

Add defer to the script tag, or wrap the code in document.addEventListener("DOMContentLoaded", () => { … }). Both wait until the HTML is ready.

Does JavaScript affect SEO?

It can. Google runs JavaScript, but content that only appears after scripts run may be indexed later or missed. Keep important text and links in the HTML itself.