HTML Script and Stylesheet Loading

The essentials

Quick reference

One focused task per row. Jump to the related section for complete, working examples.

Use	Syntax	Examples
Run a parser-blocking script	`<script src="/js/config.js"></script>`	View examples
Defer a classic script	`<script src="/js/app.js" defer></script>`	View examples
Load an independent script	`<script src="/js/analytics.js" async></script>`	View examples
Load a JavaScript module	`<script type="module" src="/js/app.js"></script>`	View examples
Embed an inline module	`<script type="module"> import { start } from "/js/app.js"; start(); </script>`	View examples
Import code on demand	`const { openHelp } = await import("/js/help.js");`	View examples
Map a bare module name	`<script type="importmap"> {"imports":{"app":"/js/app.js"}} </script>`	View examples
Prepare a module early	`<link rel="modulepreload" href="/js/app.js">`	View examples
Provide a legacy fallback	`<script nomodule src="/js/legacy.js"></script>`	View examples
Load an external stylesheet	`<link rel="stylesheet" href="/css/site.css">`	View examples
Apply styles to matching media	`<link rel="stylesheet" href="/css/print.css" media="print">`	View examples
Embed document styles	`<style>.notice { color: #9a3412; }</style>`	View examples
Import CSS from CSS	`@import url("/css/theme.css");`	View examples
Preload a stylesheet	`<link rel="preload" href="/css/critical.css" as="style">`	View examples
Preload a web font	`<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>`	View examples
Open a connection early	`<link rel="preconnect" href="https://cdn.example.com" crossorigin>`	View examples
Resolve an origin early	`<link rel="dns-prefetch" href="https://analytics.example.com">`	View examples
Fetch a likely future resource	`<link rel="prefetch" href="/next-page.html">`	View examples
Prioritize an important image	`<img src="/images/hero.webp" alt="Product dashboard overview" width="1200" height="630" fetchpriority="high">`	View examples
Defer an off-screen embed	`<iframe src="/embed/report" title="Quarterly report preview" width="800" height="450" loading="lazy"> </iframe>`	View examples
Verify a cross-origin script	`<script src="https://example.com/example-framework.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"> </script>`	View examples
Limit a resource referrer	`<script src="https://cdn.example.com/widget.js" referrerpolicy="no-referrer"> </script>`	View examples
Provide a no-script fallback	`<noscript> <p> JavaScript is required to open the interactive chart. </p> </noscript>`	View examples

Resource loading is part execution model, part dependency declaration, and part performance policy. Choose async or defer from the script's ordering requirements, use modules for dependency-aware JavaScript, link critical styles directly, and reserve preload or connection hints for resources the page is very likely to need. Every hint must match the eventual request, and every optimization should preserve a usable fallback.

Step by step

Detailed examples

Choose classic script timing from its dependencies

A classic script without async, defer, or type=module blocks the parser, which is appropriate only when later markup depends on its immediate side effects. defer is the dependable default for ordered application scripts because deferred scripts preserve document order and run after parsing. async is for independent work such as analytics because execution order follows download completion, not document order. The async and defer attributes affect external classic scripts; they do not turn an inline classic script into a deferred task.

Immediate configuration, ordered application code, and independent analytics

<head>
  <!-- Runs at this parser position. -->
  <script src="/js/config.js"></script>

  <!-- Downloads in parallel and preserves this order. -->
  <script src="/js/vendor.js" defer></script>
  <script src="/js/app.js" defer></script>

  <!-- Must not depend on the scripts above. -->
  <script src="/js/analytics.js" async></script>
</head>

Back to quick reference ↑

Load module graphs without recreating a bundler in markup

Module scripts are deferred by default, execute in strict mode, and keep declarations out of the global scope. Declare an import map before the first module that relies on it, then use modulepreload only for important modules discovered too late by normal parsing. Dynamic import is useful for interaction-driven features because it returns a promise and loads the requested module graph on demand. nomodule is a legacy fallback, not a requirement for sites that support only modern browsers.

Import map, early module preparation, and an on-demand feature

<link rel="modulepreload" href="/js/app.js">

<script type="importmap">
{
  "imports": {
    "app": "/js/app.js"
  }
}
</script>

<button type="button" id="help-button">Open help</button>

<script type="module">
  import { start } from "app";

  start();

  const helpButton = document.querySelector("#help-button");
  helpButton.addEventListener("click", async () => {
    const { openHelp } = await import("/js/help.js");
    openHelp();
  });
</script>

External module with an optional legacy build

<script type="module" src="/js/app.js"></script>
<script nomodule src="/js/legacy.js"></script>

Back to quick reference ↑

Link critical styles directly and embed only small document-specific rules

A stylesheet link makes the dependency visible to the HTML parser and applies it when its media condition matches. Inline style elements avoid a request but repeat bytes across documents and are harder to cache or govern with a strict Content Security Policy. CSS @import works, but the browser discovers the imported file only after it has fetched and parsed the parent stylesheet, so avoid import chains for render-critical CSS. An @import rule must precede ordinary style rules in its stylesheet.

External, media-specific, and inline styles

<head>
  <link rel="stylesheet" href="/css/site.css">
  <link rel="stylesheet" href="/css/print.css" media="print">

  <style>
    .notice {
      color: #9a3412;
    }
  </style>
</head>

A CSS import placed before style rules

@import url("/css/theme.css");

.notice {
  border-inline-start: 0.25rem solid currentColor;
  padding-inline-start: 1rem;
}

Back to quick reference ↑

Make every preload match the request that will consume it

Preload is an early fetch instruction, not an instruction to apply or execute the resource. Set as to the resource destination and keep the URL, type, and credentials mode consistent with the later request so the browser can reuse the response. A preloaded stylesheet still needs rel=stylesheet. Font fetches use CORS even when the font is on the same origin, so font preloads normally need crossorigin. Overusing preload competes with resources that the browser would otherwise prioritize correctly.

Preload CSS and a font, then consume both with matching requests

<link rel="preload" href="/css/critical.css" as="style">
<link rel="stylesheet" href="/css/critical.css">

<link
  rel="preload"
  href="/fonts/inter.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

<style>
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter.woff2") format("woff2");
    font-display: swap;
  }
</style>

Back to quick reference ↑

Spend connection and prefetch hints only on likely work

preconnect can perform DNS, transport, and security setup before a request, but each warm connection consumes browser and server resources. dns-prefetch is a lighter hint that resolves only the host name. prefetch targets resources likely to be used by a future navigation and remains subject to browser heuristics, data-saving preferences, cache policy, and available bandwidth. Do not treat any of these hints as a guarantee.

Warm one critical origin and hint at a likely next page

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://analytics.example.com">
<link rel="prefetch" href="/next-page.html">

Back to quick reference ↑

Raise priority selectively and defer work below the fold

fetchpriority changes a fetch-priority hint; it does not discover a resource sooner, so keep important images in the initial HTML and use high only for a strong candidate such as the page's main image. loading=lazy lets the browser defer an iframe that begins away from the viewport. Keep above-the-fold content eager, provide intrinsic dimensions to stabilize layout, and give every iframe an accessible title that identifies its embedded content.

Prioritized main image and lazy off-screen report

<img
  src="/images/hero.webp"
  alt="Product dashboard overview"
  width="1200"
  height="630"
  fetchpriority="high"
>

<h2>Quarterly report</h2>
<iframe
  src="/embed/report"
  title="Quarterly report preview"
  width="800"
  height="450"
  loading="lazy"
></iframe>

Back to quick reference ↑

Verify third-party bytes and design explicit fallbacks

Subresource Integrity lets a document accept a script or stylesheet only when its bytes match one of the declared digests. Generate the digest from the exact production file, update it whenever that file changes, and use an appropriate crossorigin value for cross-origin resources. A per-element referrerpolicy narrows the referrer sent for that request. noscript can explain a missing enhancement or expose a server-rendered alternative, but essential content should not depend on JavaScript in the first place.

Integrity, CORS, referrer policy, and a scripting fallback

<script
  src="https://example.com/example-framework.js"
  integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<noscript>
  <p>JavaScript is required to open the interactive chart.</p>
  <p><a href="/reports/chart-data.csv">Download the chart data as CSV</a>.</p>
</noscript>

Generate a SHA-384 digest for a deployed stylesheet

openssl dgst -sha384 -binary public/css/site.css | openssl base64 -A

Back to quick reference ↑

Local code tester

Try embedded modules and linked styles

Edit the HTML and CSS, run the example, and observe how the linked stylesheet and inline module cooperate.

Runs in your browser

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Resource loading demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="demo-card">
    <p class="eyebrow">Module demo</p>
    <h1>Load an enhancement when it is needed</h1>
    <p id="status">The inline module is ready.</p>
    <button type="button" id="show-details" aria-expanded="false">Show details</button>
  </main>

  <script type="module">
    const detailsButton = document.querySelector("#show-details");
    const statusMessage = document.querySelector("#status");

    detailsButton.addEventListener("click", () => {
      const isExpanded = detailsButton.getAttribute("aria-expanded") === "true";
      detailsButton.setAttribute("aria-expanded", String(!isExpanded));
      detailsButton.textContent = isExpanded ? "Show details" : "Hide details";
      statusMessage.textContent = isExpanded
        ? "The inline module is ready."
        : "This interaction was attached by a module script.";
    });
  </script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Resource loading demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="demo-card">
    <p class="eyebrow">Module demo</p>
    <h1>Load an enhancement when it is needed</h1>
    <p id="status">The inline module is ready.</p>
    <button type="button" id="show-details" aria-expanded="false">Show details</button>
  </main>

detailsButton.addEventListener("click", () => {
      const isExpanded = detailsButton.getAttribute("aria-expanded") === "true";
      detailsButton.setAttribute("aria-expanded", String(!isExpanded));
      detailsButton.textContent = isExpanded ? "Show details" : "Hide details";
      statusMessage.textContent = isExpanded
        ? "The inline module is ready."
        : "This interaction was attached by a module script.";
    });
  </script>
</body>
</html>

styles.css

:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: #0f172a;
  color: #e2e8f0;
}
.demo-card {
  width: min(32rem, 100%);
  padding: 1.5rem;
  border: 1px solid #334155;
  border-radius: 1rem;
  background: #172033;
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.25);
}
.eyebrow {
  margin: 0 0 0.5rem;
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.1;
}
button {
  margin-top: 0.5rem;
  border: 0;
  border-radius: 0.65rem;
  padding: 0.7rem 1rem;
  background: #38bdf8;
  color: #082f49;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
button:hover {
  background: #7dd3fc;
}
button:focus-visible {
  outline: 0.2rem solid #f8fafc;
  outline-offset: 0.2rem;
}

Preview

Sources and further reading

References

Authoritative documentation used to verify and expand this cheat sheet.

Help us improve

Found a typo or missing example?

Tell us what would make this cheat sheet clearer, more complete, or more useful.

Share feedback

Quick reference

Detailed examples

Choose classic script timing from its dependencies

Load module graphs without recreating a bundler in markup

Link critical styles directly and embed only small document-specific rules

Make every preload match the request that will consume it

Spend connection and prefetch hints only on likely work

Raise priority selectively and defer work below the fold

Verify third-party bytes and design explicit fallbacks

Try embedded modules and linked styles

More HTML cheat sheets

Fetch API and Streaming Cheat Sheet

Push Notifications and App Badging Cheat Sheet

Service Workers and Offline Caching Cheat Sheet

References

Found a typo or missing example?