Skip to content

HTML & JavaScript Explained — Script Tags, Events & Best Practices

DodaTech Updated 2026-06-06 10 min read

In this tutorial, you'll learn about HTML & JavaScript Explained. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

HTML and JavaScript work together — the <script> tag adds interactivity to your pages, from button clicks to dynamic content updates.

What You'll Learn

By the end of this tutorial, you'll know how to add JavaScript to HTML using inline and external scripts, understand where to place scripts for best performance, use defer and async, handle events like clicks and form submissions, and use <noscript> for fallback content.

ℹī¸ Info

Prerequisite: You should know basic HTML tags and be familiar with JavaScript. This tutorial focuses on how JS connects with HTML, not JS syntax itself.

Why JavaScript in HTML Matters

HTML gives you structure. JavaScript gives you behavior. Without JavaScript, pages are static — you can read content, click links, and submit forms, but nothing happens in real time.

Real-world use: Every interactive element on a page — dropdown menus, image sliders, form validation, live search, Infinite Scroll — all powered by JavaScript working through HTML.

Where This Fits in Your Learning Path

flowchart LR
    A["Iframes"] --> B["**HTML & JavaScript**"]
    B --> C["File Paths & URL Encoding"]
    C --> D["Head & Meta"]
    D --> E["Entities & Symbols"]
    E --> F["Advanced HTML Topics"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style F fill:#22c55e,stroke:#16a34a,color:#fff

The <script> Tag — Adding JavaScript

The <script> tag tells the browser: "Run this as JavaScript, not HTML." You can use it two ways:

Inline JavaScript

Write JavaScript directly in your HTML:

<script>
  alert('Hello, World!');
</script>

Link to a separate .js file:

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

The external approach is better because:

  • Separation Of Concerns — HTML is structure, JS is behavior
  • Reusability — the same .js file can be used on multiple pages
  • Caching — browsers cache the file, so it loads faster on subsequent pages

Where to Place Scripts — Performance Matters

Where you put your <script> tags affects how fast your page loads. Here are the options:

In the <head> — Blocks Rendering

<head>
  <script>
    function greet() { alert('Hi!'); }
  </script>
</head>

Problem: The browser stops parsing HTML when it encounters a script. It downloads and runs the script first, then continues rendering. Users see a blank page while the script loads.

At the End of <body> — Best for Old Browsers

<body>
  <!-- All HTML content here -->
  <script src="script.js"></script>
</body>

The HTML loads and renders first, then the script runs. Users see content immediately. This was the standard approach for years.

With defer — The Modern Best Practice

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

defer tells the browser: "Download this script now, but don't run it until the HTML is fully parsed." The page loads, and the script runs afterward — in the order scripts are declared.

The Difference: defer vs async

Both attributes let scripts download without blocking HTML parsing, but they differ in when they run:

Attribute Order When it runs
(none) Blocking Immediately — pauses HTML parsing
defer Keeps order After HTML is fully parsed (DOM ready)
async No order As soon as download finishes 
<!-- Safe for DOM-dependent scripts — runs after page loads -->
<script src="app.js" defer></script>

<!-- Independent script — runs immediately when ready -->
<script src="analytics.js" async></script>

When to use what:

  • defer — for your own scripts that need the DOM (most common)
  • async — for third-party scripts (analytics, ads) that don't depend on your page
  • None — for very small inline scripts that must run immediately

Event Handlers — Making Things Interactive

JavaScript responds to events — clicks, hovers, key presses, form submissions. You can attach event handlers directly in HTML using on* attributes:

<button onclick="alert('Clicked!')">Click Me</button>

<input onchange="console.log(this.value)" placeholder="Type something">

<form onsubmit="event.preventDefault(); alert('Submitted!')">
  <button type="submit">Submit</button>
</form>

<div onmouseover="this.style.background='#ffeaa7'"
     onmouseout="this.style.background=''">
  Hover over me
</div>

Common HTML Events

Event Trigger Example Use
onclick Mouse click Button actions
onchange Value changed Input/select updates
onsubmit Form submitted Form validation
onmouseover Mouse enters element Hover effects
onmouseout Mouse leaves element Remove hover effect
onkeydown Key pressed Keyboard shortcuts
onload Page/element loaded Initialization
onfocus Element gains focus Input styling

Note: For larger projects, use JavaScript's addEventListener() instead of HTML event attributes. It keeps your HTML clean and allows multiple handlers for the same event. But for simple cases, inline on* attributes work fine.

The <noscript> Element — Fallback Content

Some users disable JavaScript (or use browsers that don't support it). The <noscript> element shows content only when JavaScript is disabled:

<noscript>
  <div style="background: #ffeaa7; padding: 12px; border-radius: 8px;">
    JavaScript is disabled. Some features may not work.
  </div>
</noscript>
💡 Tip

Use <noscript> for critical content fallbacks. Modern best practice is to build pages that work without JS when possible and enhance with JS — this is called progressive enhancement.

JavaScript & Security

When adding JavaScript to HTML, keep these security principles in mind:

1. Never use eval() or inline event handlers with user input.

<!-- ❌ Dangerous: user input in event handler -->
<button onclick="loadPage('{{ user_input }}')">Click</button>

2. Always escape user-generated content. If user comments include <script> tags, they could run on your page (XSS attack). Sanitize all user input before displaying it.

3. Use defer or place scripts at the bottom — inline scripts that block rendering can be used for malicious purposes.

DodaTech Insight: XSS (Cross-Site Scripting) is one of the most common web vulnerabilities. Durga Antivirus Pro includes real-time XSS detection. Understanding how scripts interact with HTML is your first defense against injection attacks.

Common HTML & JavaScript Mistakes

1. Script Runs Before DOM Is Ready

<!-- ❌ Wrong: script runs before #myBtn exists -->
<head>
  <script>
    document.getElementById('myBtn').onclick = function() { ... };
  </script>
</head>

<!-- ✅ Correct: use defer, or move script after the element, or use DOMContentLoaded -->
<head>
  <script defer>
    document.getElementById('myBtn').onclick = function() { ... };
  </script>
</head>

2. Forgetting the src Attribute in External Scripts

<!-- ❌ Wrong: script tag with content but no src, yet appears to be external -->
<script src="script.js">
  console.log('This never runs because browsers ignore inline content when src is present');
</script>

<!-- ✅ Correct: either external or inline, not both -->
<script src="script.js"></script>

When a <script> tag has a src attribute, any content between the tags is ignored.

3. Not Using defer for DOM-Dependent Scripts

<!-- ❌ Wrong: script blocks rendering and may run before DOM is ready -->
<head>
  <script src="app.js"></script>
</head>

<!-- ✅ Correct: deferred script runs after DOM parsing -->
<head>
  <script src="app.js" defer></script>
</head>

<!-- ❌ Wrong: not keyboard accessible, doesn't work without JS -->
<div onclick="navigate('/about')">About</div>

<!-- ✅ Correct: use real links for navigation -->
<a href="/about">About</a>

5. Blocking Rendering with Third-Party Scripts

<!-- ❌ Wrong: page won't render until analytics loads -->
<head>
  <script src="analytics.js"></script>
</head>

<!-- ✅ Correct: async ignores blocking -->
<head>
  <script src="analytics.js" async></script>
</head>

Try It Yourself

Experiment with JavaScript events in HTML:

▶ Try It YourselfEdit the code and click Run

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It's tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What's the difference between defer and async? {{< details "Show answer" >}} defer runs scripts in order after HTML parsing. async runs scripts as soon as they download (any order). Use defer for your own code, async for third-party scripts. {{< /details >}}

Q2: Why should you place scripts at the end of <body> or use defer? {{< details "Show answer" >}} Scripts block HTML parsing. Without defer, the browser stops rendering when it encounters a script, making the page appear to load slowly. {{< /details >}}

Q3: What HTML attribute runs JavaScript when a button is clicked? {{< details "Show answer" >}} onclick — e.g., <button onclick="alert('Hi!')">Click</button>. {{< /details >}}

Q4: What does <noscript> do? {{< details "Show answer" >}} It shows content only when JavaScript is disabled in the browser. {{< /details >}}

Q5: What happens if you put content inside a <script src="..."> tag? {{< details "Show answer" >}} The inline content is ignored. When src is present, browsers only download and run the external file. {{< /details >}}

Challenge

Build an "Interactive Counter" page with:

  • A number display
  • "+1" and "-1" buttons using onclick
  • A "Reset" button
  • A hover effect on the buttons
  • A <noscript> fallback message

Frequently Asked Questions

{{< faq "Can I mix inline and external JavaScript?">}} Yes. You can have multiple <script> tags — some inline, some external. They all share the same global scope and run in order. {{< /faq >}}

What's the difference between