All right guys lets revise what we have learned in the past article, you saw me adding <script> </script> code at the bottom of the <body> tags. Today, I will show you in detail that what was the reason for adding the tags at the bottom and how can you add an external JS file.
We have two methods to include the JS code in the Html file.
- 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.
- 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, 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.
Its time to show you how to do this.
Here is a little preview of what we have done up. If you have a small script then you should definitely include in Html file at the bottom of the body tag. Otherwise, externalize it and add in a separate file as I have shown you before in images.
That’s it for today. I hope you understand it and if you have any question related to this topic. Let me ask in the comment section and I will answer you. Take good care of yourself and see you in my next tutorial. Have a nice day!