As you learn to become a web developer, it’s important to understand the differences between HTML and JavaScript.
In web development, HTML is used to create the structure and content of a web page, while JavaScript is used to add dynamic functionality to web pages.
HTML is a markup language that is used to create the structure and content of a webpage. By definition, HTML is not a programming language (but please don’t make a big deal when a newbie calls it a programming language. Just stay cool 😉)
You use HTML tags to put something on the webpage, such as the title, headings, paragraphs, and images.
On the other hand, JavaScript is a programming language that can be used to add dynamic functionality to HTML pages.
JavaScript allows you to create interactive elements, such as drop-down menus and hiding specific elements on a page.
In order to create a complete web application or website, you need both HTML and JavaScript.
In this article, you will learn to spot the HTML and JavaScript code placed in web pages to understand how they are used together. Let’s start with creating a basic HTML page first.
Creating an HTML page
An HTML page can be created with any text or code editor application you have on your computer.
You can use free programs like TextPad, NotePad, or VSCode. You can even use terminal-based text editors like Vim or Nano.
Create a new document using your editor program and add the following HTML code to your document:
<head>
<title>HTML title</title>
</head>
<body>
<h1>JavaScript vs HTML</h1>
<p>This is a paragraph</p>
<button>Click me!</button>
</body>
Save the file as practice.html, and open the page on your favorite web browser.
You should see the following output generated in your browser:
You can see the parts of the HTML document being rendered on the browser.
Anything you put in the <head> tag of the HTML document is used to inform the browser about the HTML document.
The content of the <head> tag is also known as the document’s metadata.
The <body> tag is where you place the page content. Anything you put there will be rendered on the browser’s main screen.
When the <body> tag is empty, a blank page will be rendered by the browser.
Now that you have a basic HTML page, let’s add JavaScript to it next.
Adding JavaScript to your HTML page
Even though you can create a button using the <button> HTML tag, clicking the button does nothing.
This is because your button has no instructions on what to do when the button is clicked.
To make the button do something, you need to add some JavaScript code.
Add the following code to your <button> tag:
<head>
<title>HTML title</title>
</head>
<body>
<h1>JavaScript vs HTML</h1>
<p>This is a paragraph</p>
<button onclick="alert('Hello!');">Click me!</button>
</body>
Save the HTML document, then refresh the browser.
When you click on the button, an alert box will appear as shown below:
The attribute onclick is added to the <button> element. When you click on the button, the code you define inside the onclick attribute will be executed as a response to the click action.
The alert('Hello!'); is the only JavaScript code added to the HTML document.
You can also use a <script> tag to add more complex JavaScript code as shown below:
<head>
<title>HTML title</title>
</head>
<body>
<h1 id="header">JavaScript vs HTML</h1>
<p>This is a paragraph</p>
<button onclick="changeHeading()">Click me!</button>
<script>
function changeHeading() {
let header = document.getElementById("header");
header.innerHTML = "Hello World!";
}
</script>
</body>
The function changeHeading() is defined inside the <script> tag above.
The onclick attribute is assigned with the call to the changeHeading() function.
When you click on the button above, the JavaScript function will be executed.
The code above shows small examples of how JavaScript can add interactivity to your web page.
You can also use JavaScript to show and hide a div with a click or create a rock, paper, and scissors game.
JavaScript adds functionality to a static website build using HTML.
It allows you to stream movies and chat with friends using web applications like Netflix, Amazon Prime, Facebook, Instagram, and literally any website you visit with your web browser.
Spotting JavaScript code on web pages you visited
Modern browsers you installed on your computer come with web developer tools.
One of these tools is the ability to view the source code of the page you are currently opening.
To see the HTML, CSS, and JavaScript code that makes up a web page, just right-click anywhere on your page and select View Page Source.
Here’s an example of inspecting the source of the Facebook landing page:
Using the web developer tools, you can spot the JavaScript and HTML code used by a web page.
Conclusion
JavaScript and HTML are both necessary to create a modern web application.
JavaScript is used to create dynamic and interactive elements, while HTML is used to structure and layout the content of a web page.
While they are used for different purposes, they work together to create a well-rounded and functional web application.
Here’s a table to summarize the differences between JavaScript and HTML:
| Category | JavaScript | HTML |
|---|---|---|
| Description | A programming language that runs on browsers | A markup language that gets rendered by browsers |
| Purpose | Adds dynamic interaction to a web page | Create a static structure and content of a web page |
| Embedding | Embedable inside HTML | Can't be embedded inside JavaScript |
| Support | Partial support depending on the browser version | Supported by all modern browsers |
| Development | The JavaScript standard is defined in ECMAScript | The HTML standard is defined by WHATWG |
By using both languages together, developers can create powerful and efficient web applications.