<script> Tag
Embed or load JavaScript. Master defer, async, and module.
1Loading JavaScript
Use defer for normal page scripts so they download in parallel but execute after HTML parses. Use async only for independent scripts (analytics).
<!-- External, deferred -->
<script src="/app.js" defer></script>
<!-- ES module -->
<script type="module" src="/main.js"></script>
<!-- Inline -->
<script>
console.log('Hello');
</script>2Put the element in context
A script may run code or load it from another URL. Timing matters when the script expects elements that have not yet been parsed. External scripts can also contact their own providers, so adding a script is a functional and privacy decision, not only a styling choice.
3Practice with a small page
Write a script that changes a paragraph after the document is ready. Compare an external deferred script with a script near the end of the body. Use trusted code and avoid putting API secrets into a document delivered to visitors.
Finished reading?
Mark this topic as complete to track progress.