HTML Script Attributes

Scripts

Script attributes control how JavaScript loads.

The script element can block rendering, defer execution, load modules, check integrity and support cross-origin resources. Its attributes affect performance and reliability.

Many frontend bugs begin with script loading order. Knowing defer, async and type="module" prevents a lot of guessing.

Attribute group: src, type, defer, async, nomodule, integrity, crossorigin. Attributes that control JavaScript loading, modules and security checks.

What belongs here

Learn attributes by purpose, not by memorizing random names.

`src`

External JavaScript file to load.

`defer`

Downloads during parsing and runs after the document is parsed.

`async`

Downloads during parsing and runs as soon as ready.

`type="module"`

Loads the script as a JavaScript module.

`nomodule`

Fallback for older browsers that do not support modules.

`integrity + crossorigin`

Subresource integrity and cross-origin loading checks.

Syntax in context

Choose loading behavior deliberately.

Use defer for many normal scripts. Use async for independent scripts such as analytics. Use modules for modern app code.

<script defer src="assets/js/navigation.js"></script>
<script type="module" src="assets/js/app.js"></script>

Good versus weak

Small attribute choices can change behavior, accessibility and security.

Good

<script defer src="assets/js/navigation.js"></script>
<script type="module" src="assets/js/app.js"></script>

Weak

<script src="big-app.js"></script>
<script async src="depends-on-dom.js"></script>

Rules that matter

Use these rules before publishing real HTML.

Use defer for DOM-dependent scripts

Deferred scripts run after parsing, which avoids many missing-element bugs.

Use async only when independent

Async scripts can execute in unpredictable order.

Use modules for modern code

Modules are deferred by default and support imports.

Pin external scripts carefully

External scripts can affect security and performance.

Explain the loading choice

A script tag should make it obvious whether order, DOM readiness or independent loading matters.

Production thinking

Attributes are tiny pieces of HTML with real product impact.

Why does this matter?

Attributes are small, but they change how an element works. A good attribute can make a link usable, an image understandable, a form easier to complete or a script safer to load.

Accessibility

If JavaScript fails, important content should still be reachable or a noscript fallback should explain the requirement.

Production note

Script attributes affect load speed, execution order, caching, security and how safely third-party code enters the page.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change one tag, attribute or text value in the example.
Run the preview and describe exactly what changed.
Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

Change one meaningful part of the HTML, not only the visible text.
Run the preview and check whether the result still makes semantic sense.
Explain why the element or attribute you changed belongs in this exact place.

HTML CSS

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  font-family: system-ui, sans-serif;
  background: #07111f;
  color: #ffffff;
}

.demo-card {
  width: min(760px, calc(100vw - 48px));
  border-radius: 24px;
  padding: 28px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(140, 255, 193, 0.26);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.content-panel {
  margin-top: 18px;
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.muted-card { color: #b8c4d6; }
.label, caption {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, strong { color: #8cffc1; }
p, li, dd, figcaption { color: #d6deec; line-height: 1.65; }
a { color: #62d5ff; font-weight: 800; }
img, iframe, video, svg { max-width: 100%; border-radius: 18px; }
iframe { width: 100%; min-height: 180px; border: 1px solid rgba(255,255,255,0.16); }

label { display: block; margin-top: 14px; color: #d6deec; font-weight: 800; }
input, button {
  display: block;
  width: 100%;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 12px 14px;
  font: inherit;
}

button {
  margin-top: 16px;
  border: 0;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
  cursor: pointer;
}

button:disabled { opacity: 0.56; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px 14px; }

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?