HTML CSS JavaScript Python Swift TypeScript SQL React

How to Link JavaScript to HTML

What you’ll build or solve

You’ll connect an HTML page to JavaScript so clicks, inputs, and other page events can run your code.

When this approach works best

Linking JavaScript to HTML works best when you want to:

Learn JavaScript on Mimo

CAREER PATHFull-Stack Developer

Become a full-stack developer. Learn HTML, CSS, JavaScript, and React as well as NodeJS, Express, and SQL

Beginner friendly

COURSEJavaScript

Master the language of the web. Learn variables, functions, objects, and modern ES6+ features

Beginner friendly

Keep JavaScript in its own file so it stays readable and reusable across pages.
Add interactivity, such as handling button clicks or form validation.
Work on a multi-file project where HTML and JavaScript change independently.

This is a bad idea when you paste large blocks of JavaScript directly into HTML for a real project. Inline scripts get messy fast and are harder to debug.

Prerequisites

A basic HTML file you can open in a browser
A text editor such as VS Code
No extra tools required

Step-by-step instructions

1) Link an external `.js` file with a `<script>` tag

This is the most common approach. Create a JavaScript file and link it from your HTML.

Option A: Script at the end of `<body>` (most common)

Project structure:

Open in Mimo

index.html
app.js

PHP

Open in Mimo

<!-- index.html -->
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width, initial-scale=1"/>
<title>JS Demo</title>
</head>
<body>
<h1id="title">Hello</h1>

<scriptsrc="app.js"></script>
</body>
</html>

Open in Mimo

// app.js
consttitle=document.querySelector("#title");
title.textContent="Hello from JavaScript";

What to look for: placing the <script> tag right before </body> helps avoid DOM timing issues.

Option B: Script in `<head>` with `defer`

Use this when you want scripts in <head> but still need safe DOM access.

Bash

Open in Mimo

<head>
<metacharset="utf-8"/>
<scriptsrc="app.js"defer></script>
<title>JS Demo</title>
</head>

What to look for: without defer, code that reads the DOM can run before elements exist.

Option C: Script in a subfolder

Project structure:

Bash

Open in Mimo

index.html
js/app.js

Open in Mimo

<scriptsrc="js/app.js"></script>

Option D: Script one folder up

Project structure:

Bash

Open in Mimo

pages/index.html
app.js

Open in Mimo

<scriptsrc="../app.js"></script>

2) Use an inline script for small, page-only code

Inline scripts work for quick demos or tiny behaviors.

Open in Mimo

<buttonid="buy">Buy</button>

<script>
constbutton=document.querySelector("#buy");
button.addEventListener("click", () => {
alert("Thanks!");
  });
</script>

What to look for: if you place the script above the button, button will be null. Put inline scripts near the bottom of the page.

Examples you can copy

Example 1: Minimal external script link

PHP

Open in Mimo

<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>Page</title>
</head>
<body>
<pid="note">Waiting...</p>
<scriptsrc="app.js"></script>
</body>
</html>

Open in Mimo

// app.js
constnote=document.querySelector("#note");
note.textContent="Loaded!";

Example 2: Two scripts (vendor plus app)

Open in Mimo

<scriptsrc="vendor.js"></script>
<scriptsrc="app.js"></script>

What to look for: order matters. If app.js depends on something in vendor.js, load vendor.js first.

Example 3: Use `type="module"` for modern imports

Open in Mimo

<scripttype="module"src="app.js"></script>

Open in Mimo

// app.js
import {formatPrice }from"./utils.js";

constprice=formatPrice(9.99);
console.log(price);

What to look for: with modules, include file extensions in imports in most setups, such as ./utils.js.

Example 4: Link a script from a CDN

Open in Mimo

<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
<scriptsrc="app.js"></script>

What to look for: you need an internet connection for CDN scripts to load.

Common mistakes and how to fix them

Mistake 1: Wrong file path in `src`

What you might do:

Open in Mimo

<scriptsrc="/app.js"></script>

Why it breaks:

A leading / points to the site root. When you open an HTML file locally, that usually does not map to your project folder.

Correct approach:

Use a relative path.

Open in Mimo

<scriptsrc="app.js"></script>

Mistake 2: Script runs before the elements exist

What you might do:

Bash

Open in Mimo

<head>
<scriptsrc="app.js"></script>
</head>
<body>
<buttonid="buy">Buy</button>
</body>

Why it breaks:

The script runs before the button exists, so querySelector("#buy") returns null.

Correct approach:

Use defer:

Open in Mimo

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

Or place the script at the end of <body>.

Troubleshooting

If nothing happens:

Open DevTools and check the Console for errors. A missing file or syntax error often shows up there.

If your script file returns 404:

Open the Network tab, refresh, and look for your .js file. Fix the src path.

If you see Uncaught TypeError: Cannot read properties of null:

Your script is running before the element exists. Use defer or move the script tag to the end of <body>.

If modules fail with a CORS or file error:

Serve your files with a local server instead of opening index.html directly. Many browsers restrict ES modules from file://.

If a script works sometimes but not always:

Check script order and remove duplicate script tags that load the same file twice.

Quick recap

Use <script src="app.js"></script> near </body> for the simplest setup.
Use <script src="app.js" defer></script> when loading from <head>.
Use an inline script only for small, page-only code.
If the script does not run, check the Console and verify the src path.

How to Remove Hyphenation in CSS

Turn off hyphenation in CSS so words don’t break with hyphens at line endings. You’ll disable automatic hyphenation with one property, then fix any edge cases if long words start to overflow.

What you’ll build or solve

You’ll remove automatic hyphenation for a page or a specific block of text. “Done” means the browser stops inserting hyphens, and your layout still holds up in narrow containers.

When this approach works best

This approach works best when hyphenation hurts readability or doesn’t match your design.

Use it when you:

Display short paragraphs where hyphenated breaks look awkward.
Style product names, headings, or UI text where hyphens feel like errors.
Show multilingual content where hyphenation rules vary and produce surprising breaks.

Skip this approach when:

You rely on hyphenation to keep narrow columns from overflowing.

Prerequisites

A CSS file linked to your page or a <style> tag
A selector for the text you want to change, such as a class or element

Step-by-step instructions

Step 1: Disable hyphenation with `hyphens`

Use the hyphens property to control automatic hyphenation.

Option A: Turn off hyphenation for a specific block (most common)

CSS

Open in Mimo

.article {
  hyphens:none;
}

Option B: Turn off hyphenation for the whole page

CSS

Open in Mimo

body {
  hyphens:none;
}

What to look for

If hyphens still appear, they may be real hyphen characters in your content, not automatic hyphenation.
Some browsers only hyphenate when the page language is set, such as <html lang="en">. Behavior can vary slightly across browsers.
If turning hyphenation off causes overflow with long words, add a wrapping rule as shown below.

Examples you can copy

Example 1: Remove hyphenation from a blog post

CSS

Open in Mimo

<articleclass="post">
<p>This paragraph will not auto-hyphenate at line endings.</p>
</article>

CSS

Open in Mimo

.post {
  hyphens:none;
}

Example 2: Remove hyphenation from headings and UI labels

Open in Mimo

<h2class="title">Subscription settings</h2>
<pclass="label">Account verification</p>

CSS

Open in Mimo

.title,
.label {
  hyphens:none;
}

Example 3: Remove hyphenation from a sidebar with narrow width

Bash

Open in Mimo

<asideclass="sidebar">
<p>Internationalization and configuration can look messy when hyphenated.</p>
</aside>

CSS

Open in Mimo

.sidebar {
  hyphens:none;
}

Common mistakes and how to fix them

Mistake 1: Disabling hyphenation, but the text still shows hyphens

What you might do:

CSS

Open in Mimo

.article {
  hyphens:none;
}

Why it breaks:

Those hyphens might be typed into the content, like state-of-the-art, or inserted as soft hyphens.

Correct approach:

Search your content for hyphen characters or soft hyphens and remove them if they aren’t intended.

PHP

Open in Mimo

<!-- Soft hyphen example -->
<span>inter&shy;nationalization</span>

<!-- Remove the soft hyphen if you don’t want breaks there -->
<span>internationalization</span>

Mistake 2: Turning off hyphenation and causing overflow on small screens

What you might do:

CSS

Open in Mimo

.card {
  hyphens:none;
}

Why it breaks:

Long words, file names, or URLs may not wrap and can push outside the container.

Correct approach:

Add a wrapping rule for long words.

CSS

Open in Mimo

.card {
  hyphens:none;
  overflow-wrap:break-word;
}

Mistake 3: Applying the rule to the wrong selector

What you might do:

CSS

Open in Mimo

.articlep {
  hyphens:none;
}

Why it breaks:

Hyphenation might be happening on other text nodes, such as list items, headings, or nested components.

Correct approach:

Apply it to a container so it covers all text inside.

CSS

Open in Mimo

.article {
  hyphens:none;
}

Troubleshooting

If hyphens appear in only one browser, that browser may apply language-specific hyphenation rules differently.
If you see breaks that look like hyphenation even after turning it off, look for  in your HTML or CMS output.
If text overflows after disabling hyphenation, add a wrapping rule:

CSS

Open in Mimo

.article {
  hyphens:none;
  overflow-wrap:break-word;
}

If only some sections change, your selector might not match the container where hyphenation is happening.
If nothing changes, confirm your stylesheet is loading and not being overridden later.