How to Link JavaScript to HTML

How to Link JavaScript to HTML

1 min read97 Views Comment
Esha
Esha Gupta
Associate Senior Executive
Updated on Dec 20, 2023 18:45 IST

Have you ever wondered how to make your website engaging and responsive? Linking JavaScript to HTML is the key to achieving this. Let’s understand more!

2023_10_What-is-22.jpg

Linking JavaScript to HTML is crucial. HTML provides the structure and content of a webpage, while JavaScript introduces interactivity and dynamic behaviour. By linking them, developers can manipulate HTML elements, respond to user events (like clicks or form submissions), and modify content in real time without reloading the page.

Must read How to Link CSS to HTML

Table of Content

Methods of Linking JavaScript in HTML

There are three methods on how to link JavaScript to HTML,

  • Inline JavaScript
  • Internal JavaScript
  • External JavaScript

Let us understand each of these in detail

Inline JavaScript

Inline JavaScript refers to JavaScript code written directly within HTML elements, typically using event attributes. Instead of being placed in separate <script> tags or external .js files, the code is embedded directly within the HTML element it affects.

Example

We have an index.html file.


 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline JavaScript Example</title>
</head>
<body>
<button onclick="displayAlert
Copy code
About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio