The <script> tag embeds or references executable JavaScript. You can write code inline between the tags or load an external file with the src attribute. Scripts run in order and block HTML parsing by default.

<script>

Step 2

Inline script: put JavaScript between <script> and </script>. External script: use <script src="app.js"></script>. The type attribute defaults to text/javascript. Scripts in the head block rendering unless you use defer or async.

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

Step 3

defer: script runs after the document is parsed, in order. async: script runs when available, order not guaranteed. For scripts that need the DOM, put them at the end of body or use defer. Use async for independent scripts like analytics.

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

Step 4

Best practice: place non-critical scripts at the end of body, or use defer in head so HTML parses first. Use <noscript> to show fallback content when JavaScript is disabled.

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

Step 5

Checkpoint: Which attribute makes the script run after the document is parsed, in order?

<script defer></script>

Step 6

Correct! defer runs the script after the document is parsed and preserves order. Use async when script order does not matter.

<script defer></script>

Step 7

Now it's your turn. Use <script> for inline or external JavaScript. Prefer defer or end-of-body for better performance. Complete the challenges below to master the <script> tag!

script.html

1 / 7

📜

Tutor:The <script> tag embeds or references executable JavaScript. You can write code inline between the tags or load an external file with the src attribute. Scripts run in order and block HTML parsing by default.

⭐ 0 EXP

Script Mastery

Unlock nodes by learning the script tag, src, defer, and async.

Concept 1: The Script Tag

The <script> tag embeds or references JavaScript. Inline: code between the tags. External: src="url". Scripts run in order and block HTML parsing by default.

System Check

What does the <script> tag do?

Styles the pageEmbeds or references executable JavaScriptDefines a sectionLinks to CSS

Community Holo-Net

Share Script Patterns

Using <script> with defer, async, or modules? Share your patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <script> Tag

Pascual Vila

Frontend Instructor.

The <script> tag embeds or references executable JavaScript. Use inline code between the tags or load an external file with the src attribute. Scripts block HTML parsing by default; use defer or place at end of body for better performance.

src and inline

Inline: <script>code</script>. External: <script src="app.js"></script>. Do not put code inside the tag when using src. The type attribute defaults to text/javascript.

defer and async

defer: script runs after the document is parsed, in order. async: script runs when available, order not guaranteed. Use defer for DOM-dependent scripts; use async for independent scripts like analytics. Prefer defer or scripts at end of body to avoid blocking rendering.

Script Tag Glossary

<script>: HTML element that embeds or references executable JavaScript. Inline: code between tags. External: use src attribute. Blocks parsing by default.
defer: Attribute: script runs after the document is parsed, in order. Use for scripts that need the DOM. Does not block parsing.
async: Attribute: script runs when available, order not guaranteed. Use for independent scripts (e.g. analytics). Downloads in parallel.

📖 INDEX