Chapter 1 of 12

Add JavaScript to HTML: script tag, defer, async and Hello World

verified on 7 September 2026 · 6 min

Quick answer

To add JavaScript to an HTML page, create an app.js file and load it with <script src="app.js" defer></script> in the head, or just before </body> without defer. Write console.log('Hello World'); in the file, open the page and the console (F12): the message appears.

By the end of this chapter, you will know how to link a JavaScript file to an HTML page, choose between the head and the end of the body, and display a message with alert() or in the browser console.

This first chapter sets up everything the following ones need: an HTML page, a JavaScript file linked to that page, and two ways of displaying a message to check that the link works. Twenty minutes is enough. By the end, you will have written and run your first JavaScript program in a browser.

What JavaScript is (and what it is not)

JavaScript is the programming language of web browsers. HTML describes the content of a page, CSS its appearance, JavaScript its behaviour: reacting to a click, checking a form, changing the text of an element, loading data. Every browser ships with an engine that reads and runs this code.

Two clarifications that save you some pointless searching:

JavaScript has nothing to do with Java. The name dates from 1995 and a marketing decision. The two languages share neither syntax nor purpose.
It is no longer confined to the browser. With Node.js, the same language writes servers and tools. This tutorial stays in the browser: it is the simplest environment to learn in, and it is already installed on your machine.

Creating the starting HTML page

Open a code editor (Visual Studio Code does the job very well) and create a tutoriel-js folder. Inside it, an index.html file with the minimal structure of a document:

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
</head>
<body>
  <h1>Bonjour</h1>
  <!-- Le contenu de votre site ira ici -->
</body>
</html>

Open this file in your browser (double-click it, or drag it into the window). The page displays “Bonjour”. No JavaScript yet.

The script tag: where to put the JavaScript

JavaScript gets into a page through the <script> tag. It can contain the code directly, or point to an external file with the src attribute. Three placements are possible, and the choice has consequences.

At the end of the body: simple and safe

index.html

<body>
  <h1>Bonjour</h1>
  <script src="app.js"></script>
</body>

The browser reads the HTML from top to bottom. When it reaches the tag, the h1 already exists: the script can manipulate it. This is the classic placement, and it always works.

In the head with defer: the modern way

index.html

<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
  <script src="app.js" defer></script>
</head>

defer asks the browser to download the file straight away but to run it only once the HTML has been read in full. You get the best of both: the download starts early, the code runs when the page is ready. defer scripts run in the order they are written.

In the head with nothing: the classic mistake

html

<head>
  <script src="app.js"></script> <!-- s'exécute avant que le body existe -->
</head>

Here the script runs before the h1 has been built. Any attempt to read it returns null, and the error “Cannot read properties of null” shows up in the console. If you see this error in chapter 9, check where your tag is first.

What about async?

async also downloads in parallel, but runs the script as soon as it has arrived, without waiting for the HTML or the other scripts. That is useful for a self-contained script (analytics, for example), not for code that manipulates the page. For this tutorial, stick with defer.

Inline script or external file?

The code can also be written directly in the page:

html

<script>
  console.log('Hello World');
</script>

Handy for a three-line test, bad for everything else: the code cannot be reused from one page to the next, is not cached by the browser, and gets mixed up with the HTML. From this chapter on, we work in a separate file, app.js, placed next to index.html.

First code: “Hello World” with alert()

Create app.js in the same folder as index.html, and link it with the defer tag seen above. In the file:

app.js

alert('Hello World!');

Reload the page: a dialog box displays the message. alert() is a browser function that blocks the page until OK is clicked. It is good for checking that a script runs; it is not used on a real site, where it interrupts the user.

The real tool: console.log() and the browser console

Replace the contents of app.js:

app.js

console.log('Hello World!');
console.log('Titre de la page :', document.title);
console.log(2 + 3);

Reload: nothing changes on screen. Open the developer tools with the F12 key (or right-click, “Inspect”), then the Console tab. The three lines appear there:

code

Hello World!
Titre de la page : Mon premier script
5

The console is where JavaScript speaks. It shows what you ask it to with console.log(), but also every error, with the file name and the line number. Keep it open throughout the tutorial: it is your first debugging tool, and it even lets you type JavaScript directly, with no file, to try out an idea.

Your first errors, and how to read them

If nothing shows up, the console says why. The three most common cases at this stage:

“Failed to load resource: 404”: the app.js file cannot be found. Check that it really is in the same folder as index.html and that the name is identical, capitals included.
“Uncaught SyntaxError”: a typo in the code, often an unclosed bracket or quote. The line number takes you straight to it.
Nothing at all, not even an error: the browser is showing a cached version. Reload with Ctrl+F5 (Cmd+Shift+R on a Mac).

Recap

JavaScript gets into a page through <script src="app.js" defer></script> in the head, or through the same tag without defer at the end of the body.
An external file beats an inline script as soon as the code runs past a few lines.
alert() confirms that a script is running; console.log() and the console (F12) are the everyday tools.
An error is read in the console: file, line, message.

In the next chapter, Variables and data types, the program starts remembering values. And if you would rather have an overview of the course first, the guide to learning JavaScript presents the twelve chapters and a thirty-day plan.

ExerciseCreate a page that prints “Welcome” in the console when it loads, then, in the same file, an alert that shows the title of the page thanks to document.title. Check that the two messages appear in the same order as in your code.

Common errors

The script loads before the HTML A script in the head without defer runs before the page has been built: document.querySelector('h1') returns null. Add defer, or put the tag at the end of the body.

The file path is wrong src="app.js" looks for the file next to the HTML page. The Network tab of the developer tools shows the 404; the console prints “Failed to load resource”.

Upper and lower case App.js and app.js are two different files on most servers, even though Windows treats them as one locally.

Java is not JavaScript The names look alike, the languages do not. A Java tutorial will not help you here.

Add JavaScript to HTML: script tag, defer, async and Hello World

What JavaScript is (and what it is not)

Creating the starting HTML page

The script tag: where to put the JavaScript

At the end of the body: simple and safe

In the head with defer: the modern way

In the head with nothing: the classic mistake

Inline script or external file?

First code: “Hello World” with alert()

The real tool: console.log() and the browser console

Your first errors, and how to read them

Recap

Common errors

New tests, tutorials and projects, by e-mail.