script
Loads or contains JavaScript.
Platform under construction
HTML Scripts
Learn HTML Scripts with practical examples for structure, layout semantics, metadata, embedded content, scripts, accessibility, SEO and live practice.
HTML structure and layout
The script element connects JavaScript behavior to an HTML document.
HTML can load JavaScript with the script element. Scripts can add interactivity, fetch data, validate forms, update the DOM and power full applications.
Script loading is a performance decision. A blocking script in the wrong place can delay rendering. Modern pages commonly use defer for normal page scripts.
Good script markup is deliberate: source, type, defer or async, placement and security all matter.
src
Points to an external JavaScript file.
defer
Runs after HTML parsing, preserving order.
async
Runs when downloaded, useful for independent scripts.
Syntax and structure
Load JavaScript intentionally.
Use external files for maintainable code. Use defer for normal scripts that enhance the page after parsing.
Deferred site script
<script defer src="/assets/js/app.js"></script> <script type="module" src="/assets/js/course.js"></script>
Blocking inline behavior everywhere
<button onclick="alert('Hi')">Click</button>
<script src="/heavy-app.js"></script>
<script>document.write("Loading...")</script>
Rules that matter
Structure should stay readable before the design layer is applied.
Layout-focused HTML is strongest when meaning, grouping, metadata and behavior hooks all have a clear reason to exist.
Prefer external scripts
JavaScript belongs in reusable files for real projects.
Use defer for page behavior
Deferred scripts wait until the HTML is parsed and preserve order.
Use async only when independent
Analytics or independent widgets can use async when order does not matter.
Avoid inline handlers
addEventListener keeps behavior cleaner than onclick attributes.
Mind third-party scripts
External vendors can affect performance, privacy and security.
Keep HTML useful without JavaScript
Progressive enhancement makes pages more resilient.
Production thinking
HTML structure affects design, accessibility, SEO and long-term maintenance.
Why does this matter?
This matters because JavaScript can make a page feel alive, but careless script loading can also make it slow, fragile and hard to maintain.
Accessibility
JavaScript should not remove keyboard access, focus order or native element behavior. Start with correct HTML controls.
Production note
Bundle size, loading strategy, error monitoring and Content Security Policy matter once scripts become part of a real product.
SEO note
Important content should not depend entirely on client-side JavaScript if search visibility matters.
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.
- Write the script tag you would add for /assets/js/app.js.
- Choose defer or async and explain why.
- Explain why the button should remain a real button element.
Practice assignment
Do this before moving to the next lesson.
- Create a simple HTML page and attach one external JS file.
- Use defer and explain when the script runs.
- Avoid inline onclick and use addEventListener in the JS file.
Try it yourself
Plan script loading
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?