HTML JavaScript

Last Updated : 27 Jul, 2025

JavaScript is a powerful scripting language that works alongside HTML to create dynamic and interactive web pages. While HTML structures the content, JavaScript brings it to life by handling user actions like clicks, form inputs, and animations. In fact, over 98% of websites on the internet use JavaScript in some form, making it an essential skill for any aspiring web developer. By learning how to use JavaScript with HTML, beginners can start building responsive, user-friendly web experiences from the ground up.

Note: If you want to learn more about JavaScript check out - JavaScript Tutorial

Integrating JavaScript using HTML <script> Tag

To use JavaScript in an HTML document, the <script> tag is used. This tag allows you to either write JavaScript code directly within the HTML file or link to an external .js file. When a browser loads the HTML page, it reads and executes the JavaScript code inside the <script> tag. This is how interactivity—like button clicks, dynamic content, or animations—is added to a web page.

filename: index.html

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Script Tag Example</title>
</head>
<body>
  <p>Open the console to see the message.</p>
  
  <script>
    console.log("Hello from JavaScript!");
  </script>
</body>
</html>

Output:

What is DOM?

The Document Object Model (DOM) is a programming interface that represents the structure of an HTML or XML document as a tree of objects. It allows JavaScript to access and manipulate elements, attributes, and content on a web page dynamically.

Many HTML and Javascript operations can be done, including DOM manipulation, adding or removing style to the element, and adding or removing elements from the DOM.

Note: The most common operation done in JavaScript is finding the HTML elements.

`document.getElementById()` – Selecting Elements by ID

In JavaScript, one of the simplest and most commonly used methods to access HTML elements is document.getElementById(). This method allows you to select a specific element by its unique id attribute and then manipulate it—such as changing its text, style, or content. It's often the first step in DOM manipulation and is essential for adding interactivity to web pages.

One of the most common operations in JavaScript is finding and manipulating HTML elements, and the easiest method to do this is using:

JavaScript

document.getElementById("elementID")

Note: This method returns the HTML element that has the specified id attribute, allowing you to change its content, style, or behavior.

Example: Change Text Color by ID

HTML

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript DOM Example</title>
</head>
<body>
  <h1 id="greeting">Hello, User!</h1>
  <script>
    const heading = document.getElementById("greeting");
    heading.style.color = "green";
  </script>
</body>
</html>

Output:

Example: Illustration of the basic example of JavaScript that finds the element by tag name and styles the text with green.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>HTML JavaScript</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML JavaScript</h3>

    <script>
        const h1element = document
                          .getElementsByTagName("h1")[0];
        h1element.style.color = "green";
    </script>
</body>

</html>

Output

HTML <noscript> Tag

The HTML <noscript> tag is used to provide information displayed when a browser does not support or has disabled JavaScript in their browser.

Note: If the JavaScript is supported by your browser, the text inside the <noscript> tags will not rendered to the User Interface.

Example: Illustration of the basic example of HTML <noscript> tag.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>HTML JavaScript</title>
</head>

<body>
    <h1 id="gfg">GeeksforGeeks</h1>
    <h3>HTML JavaScript</h3>

    <script>
        const h1element = document
            .getElementById("gfg");
        h1element.style.color = "green";
    </script>
    <noscript>The browser you are using
        doestnot support JavaScript.
    </noscript>
    <p>If the JavaScript is supported by your browser the
        text inside the noscript tag will not be shown to you.
    </p>
</body>

</html>

Output:

HTML Introduction

shivanigupta18rk

Improve

Article Tags :

HTML
HTML5

HTML JavaScript

Integrating JavaScript using HTML <script> Tag

What is DOM?

document.getElementById() – Selecting Elements by ID

HTML <noscript> Tag

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?

`document.getElementById()` – Selecting Elements by ID