Code has been added to clipboard!

HTML JavaScript: Learn to Use Inline JavaScript in Your HTML Documents

Reading time 3 min
Published Jun 23, 2017
Updated Oct 2, 2019

TL;DR – Adding JavaScript to HTML allows making webpages interactive and creating web applications.

JavaScript is one of the main languages used in web development nowadays. While it started as a front-end language, it gained more functionalities as it grew.

Combined with HTML, JavaScript can help you add dynamicity and interactiveness to your website or perform data validation. To put it short, JavaScript allows you to manipulate HTML elements:

function smile(sw) {
    if (sw == 0) {
        document.getElementById("learn").innerHTML = "SAD!";
    } else {
        document.getElementById("learn").innerHTML = "HAPPY!";

There are a few elements you need to know to be able to add JavaScript to HTML. The most important of them is <script>. A pair of these tags define the client-side script, creating functionality for the user:

<script type="application/javascript">
  document.getElementById("p").innerHTML = "It works!";


There are two ways to add JavaScript to HTML. You can either include inline JavaScript in your web document or have a separate JS file and link it to the document as an external resource. In both of these cases, you will use the same <script> tags – the only difference will be their content.

For inline JavaScript, you will simply include the script itself between the tags:

function myExample() { 
    document.getElementById("learn").innerHTML = "Wow, I can use JavaScript!";

To link an external JS script to HTML, you will need to use the src attribute and include a link to the file as its value:

<script src="scripts-tag-example.js"></script>
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Tag Placement

The <script> tags can be placed in either <head> or <body> section of the document. The first option might be more common, as most developers like to keep the script separate from the content. However, it's smart to place them in the <body> if you need the JS content to load later:

function myExample() {
    document.getElementById("learn").style.fontSize = "30px"; 
    document.getElementById("learn").style.color = "white";
    document.getElementById("learn").style.backgroundColor = "indianred";        

Fallback Option: Using noscript

When adding JavaScript to HTML, keep in mind the user's browser might fail to support a JS script. For such a case, we recommend adding the <noscript> element. Its content will be displayed if JavaScript is not supported by the browser:

<noscript>JavaScript is not supported by your browser.</noscript>

HTML JavaScript: Useful Tips

  • If you include both internal JavaScript and an external script, the external one will override the embedded code. However, this might cause issues and unexpected browser behavior.
  • Using an external file is the best option when you need to reuse the same script in multiple HTML documents.

Latest Udacity Coupon Found:



Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 28/02/2021
3176 People Used
Only 97 Left