HTML + JavaScript: Adding Behavior — HTML Fundamentals (Lesson 14)

HTML gives structure, CSS gives style, and JavaScript gives behaviour — the third and final layer. This lesson is the bridge: just enough to see how HTML connects to JavaScript, so the dedicated JS course feels natural.

The script element

JavaScript is added with the <code><script></code> element. You can write code directly inside it, or link an external <code>.js</code> file with the <code>src</code> attribute — the same idea as linking CSS.

HTML · editable

<p>Open the preview and watch the message.</p>
<script>
  document.write('Hello from JavaScript!');
</script>

JavaScript running inside a script tag.

Where to put the script

Placement matters. The common best practice is to put <code><script></code> just before the closing <code></body></code> tag. That way the HTML loads and displays first, and the script runs once the elements it needs already exist on the page.

Order mattersIf a script runs before the element it targets exists, it fails. Placing scripts at the end of the body (or using defer) avoids this classic beginner bug.

Connecting JavaScript to HTML with id

JavaScript usually works by grabbing an element and changing it. The most common way is by <code>id</code>: give an element an id in HTML, then find it in JavaScript with <code>getElementById</code>. This is exactly why ids exist — they are handles for both CSS and JavaScript.

HTML · editable

<p id="msg">Original text</p>
<button onclick="document.getElementById('msg').textContent = 'Changed!'">
  Change the text
</button>

Click the button — JavaScript changes the paragraph by its id.

A first taste of events

Interactivity comes from events — things the user does, like clicking. The simple <code>onclick</code> attribute above runs code on click. In real projects you separate JavaScript from HTML (you will learn that in the JS course), but this shows the core idea: an action triggers code that changes the page.

1
Mark
Give the HTML element an id.
2
Find
JavaScript locates it with getElementById.
3
Change
Update its text, style or content.
4
Trigger
An event like a click runs the code.

Explore real componentsBuilding something interactive? ConvertAtlas has a free library of ready-made UI snippets and developer tools you can study and reuse alongside this course.

Try it yourself: make it interactive

In the editable box, create a paragraph with an id and a button. Make the button change the paragraph's text when clicked. Then add a second button that changes it to something else.

Quick quiz

1. Which element adds JavaScript to a page?

2. Where is it best to place a script?

3. How does JavaScript usually find an element?

4. What triggers interactivity?

Key takeaways

JavaScript is added with the <script> element (inline or external src).
Place scripts before </body> so the HTML exists when they run.
JavaScript connects to HTML through ids (getElementById).
Events like clicks trigger code that changes the page.

The script element

Where to put the script

Connecting JavaScript to HTML with id

A first taste of events

Related lessons