Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Should I write my script in the body or the head of the HTML?
In HTML, the script tag can be inserted either in head section or in body section, generally the java script code is inserted between script open and close tags.
<script> //JavaScript code here </script>
We can insert any number of scripts in an HTML document. Scripts can be placed in <body>, or <head> section or in both of an HTML page. Now, let’s see if there is any difference if we insert script in body or head of HTML.
It is better to place the java script before closing of the <body> tag rather than in <head> section of HTML.
HTML always follow top down approach to execute the program, if we write java script in head section, first java script is loaded later HTML code, then it creates some problems such as −
If java script causes any errors, next it won’t read our HTML content, it display’s error.
If java script code is more, then the page that we are accessing becomes slow to display the HTML content, because all JavaScript code is loaded before it loads HTML and it slowdowns the server.
In order to overcome these drawbacks, it is better to write the JavaScript code before the closing braces of body tag.
Example
The example given below attempts to change the text color of the paragraph to red, but the color have not changed because the script is loaded before the paragraph tag.
As a result, paragraph element is not available at the time of script execution, so the color doesn’t change.
<html>
<head>
<script>
document.querySelector('#sample').style.color="red"
</script>
</head>
<body>
<p id="sample">
Changes the text of TutoriaslPoint to Red Color!
</p>
</body>
</html>
When we run the above program, we see the text, and no change in color.
Example
In the following example, let’s try to change the code by adding the JavaScript at the HTML code before closing of body tag.
<html>
<body>
<p id="sample">
Changes the text of TutoriaslPoint to Red Color!
</p>
<script>
document.querySelector('#sample').style.color="red"
</script>
</body>
</html>
When we run the above program, the text color changes to red, but placing the JavaScript in the <head> of your HTML does not always causes error.
Therefore, several times writing script in head section is better when compare to body. Based on the usage and length of code user can select of writing the code.
Example
Consider another example to know the more about placing the java script in head or body section.
The below example demonstrate the reverse, if we insert java script in head section color displays and in body won’t display.
<!DOCTYPE html>
<html>
<head>
<script>
function main() {
document.getElementById("sample").innerHTML = "Learning Script Tag";
}
</script>
</head>
<body>
<h2>Insert Script in Head Section</h2>
<p id="sample" style="color:blue;">TutorialsPoint</p>
<button type="button" onclick="main()">click it</button>
</body>
</html>
When you execute the above program, a form will be displayed with the heading Insert script in head section, and an Id attribute TutorialsPoint, and an submit button labelled as click it will be displayed.
After clicking the button “Click It” the below page displays
Example
Let’s try to change the code by adding the JavaScript at the HTML code before closing of body tag.
<!DOCTYPE html>
<html>
<center>
<body>
<h2>Insert Script in Body Section</h2>
<p id="sample">TutoriaslPoint</p>
<button type="button" onclick="sample()">Click It</button>
<script>
function sample() {
document.getElementById("sample").innerHTML = "Learning Script Tag";
}
</script>
</body>
</center>
</html>
When we run the above program, we see the change in the alignment, the Id attribute, button and heading are aligned to center. Also, the text color does not change because code did not affect the color of the paragraph.
After clicking the button “Click It” the below page displays
418 Views
To Continue Learning Please Login