script
Loads or contains JavaScript.
Platform under construction
HTML Scripting Elements
Learn script, noscript, template as part of the HTML element system: when to use it, how it fits inside a document and what mistakes to avoid.
Scripting
Scripting elements connect HTML to JavaScript and fallback content.
The script element loads or contains JavaScript. noscript provides fallback content when scripts are disabled. template stores inert markup that scripts can clone later.
JavaScript is powerful, but loading it carelessly can block rendering, break accessibility or make the page unusable when scripts fail.
Element group:
script, noscript, template. JavaScript loading, fallback content and reusable hidden markup. Syntax in context
Scripts should load intentionally and leave useful fallbacks.
Use defer or type=module for most external scripts. Keep critical content in HTML when possible.
<script defer src="assets/js/app.js"></script>
<noscript>This lesson still shows the core content without JavaScript.</noscript>
<template id="lesson-card">
<article class="card">
<h2></h2>
<p></p>
</article>
</template>
Good versus weak
The difference is usually meaning, not only syntax.
Good
<script defer src="assets/js/app.js"></script>
<noscript>This lesson still shows the core content without JavaScript.</noscript>
<template id="lesson-card">
<article class="card">
<h2></h2>
<p></p>
</article>
</template>
Weak
<script src="huge-app.js"></script> <div id="app"></div>
Rules that matter
Use these rules before publishing real HTML.
Prefer defer
Most classic external scripts should not block parsing.
Modules are deferred
type=module scripts are deferred by default.
Async must be independent
Use async for scripts that do not depend on the DOM or on another script order.
Keep core content in HTML
Do not make a blank page that only works after JavaScript loads.
Use template for inert markup
Template content is not rendered until script uses it.
Production thinking
HTML is also for accessibility, SEO, security and maintenance.
Why does this matter?
Beginners often ask why this is not just a div with styling. The reason is that HTML is read by browsers, search engines, screen readers and future developers. Clear meaning makes the page easier to use and maintain.
Accessibility
If JavaScript controls important UI, make sure keyboard support, focus management and fallback behavior are handled.
Production note
Script loading affects performance, reliability and security. Audit third-party scripts carefully.
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.
Try it yourself
Load JavaScript without hiding the lesson
Self-check
Before you continue, prove that you own this lesson.
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?