How to Include Javascript Code in HTML Page
We have two methods to include the JS code in the Html file.- Put the <script> tag in the Html head or body with Javascript code
<script type="text/javascript">
alert("I am learning JavaScript");
</script>
- Put the script tag in the HTML head or bottom of the body with src attribute to the JavaScript file location.
<script type="text/javascript" src="Test.js"></script>
Best way to include JavaScript Code in HTML
- You can add <script> tag in the <head> section of your HTML file, in the start of the <body> tag and also at the <bottom> of the body tag.
- But I would advise you to add it at the end of the <body> tag. I will show you, why it should be at the bottom of the body tag.
- The HTML page always loads from top to bottom & if your JS file will be present in <head> or opening of the <body> tag, then browser will run JavaScript first, before loading any of the content and it will leave a negative impact on your webpage.
- As you can see in below image that I have added <script> tag at the start of <body> tag and add a new tag of <h1> and <p> to know how code works.
- Save these file and press ALT + B to execute this code.
- You will notice that as you see in the picture underneath that only <script> tag alert comes up first without loading the rest of page.
- But once I click at ok then it has loaded the rest of the page now, as indicated in the image here:
- If I put the <script> at the bottom of the <body> tag and you can see image down:
- Now save it go again to the browser and reload the page.
- Content will appear first and then we will have the alert form.
- So, placing JavaScript code at the end of <body> tag is the best way.
Where To Add Your JavaScript File
So, short scripts like this can be added at the bottom of the <body> content in HTML pages. In case, your JS content is large and has more than 10 lines of code and full with links here and there.- It would not mess up your Html file content page.
- You have to update it once if you are using multiple pages.
- It would make your code easy to read and clear.
