JavaScript Where To
JavaScript can be placed in the HTML <head>, <body>, or in external .js files. Understanding where and how to include JavaScript in your web pages affects performance, organization, and maintainability. External scripts are the professional standard when the same code is used across multiple web pages.
The <script> Tag
In HTML documents, JavaScript code is inserted between opening <script> and closing </script> tags. These tags tell the browser that the content between them should be executed as JavaScript code rather than displayed as text or treated as HTML markup. The <script> tag is the bridge that connects JavaScript functionality to HTML structure.
Scripts can be placed in either the <head> section or the <body> section of an HTML page, and you can have multiple <script> tags throughout a single HTML document. Each script tag's code executes when the browser encounters it during page parsing. The placement of script tags significantly affects when the JavaScript code runs and how it impacts page loading.
For optimal page performance, it's generally recommended to place scripts at the bottom of the <body> section, just before the closing </body> tag. This allows the HTML content to load and display first, preventing JavaScript from blocking the rendering of visible page content. Users see content faster, creating a better perceived performance. Scripts placed in the <head> can delay page rendering while they download and execute.
In older JavaScript code, you may see <script type="text/javascript">. The type attribute was required in older HTML versions to specify that the script content is JavaScript. In HTML5 (the current standard), JavaScript is the default and assumed scripting language, so the type attribute is no longer necessary and can be omitted. Modern code simply uses <script> without any type specification.
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change HTML content.</p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>External JavaScript
Rather than embedding JavaScript directly in HTML files, scripts can be placed in separate external files with a .js extension (like script.js, app.js, or main.js). External JavaScript files contain pure JavaScript code without <script> tags—those tags only appear in the HTML file that references them. This separation is considered best practice in professional web development.
External scripts are practical and professional when the same JavaScript code is used across multiple web pages. Instead of copying the same code into every HTML file, you reference a single external file from multiple pages. This makes maintenance easier—update one file and all pages that reference it automatically use the updated code. It follows the DRY principle: Don't Repeat Yourself.
Separating JavaScript into external files creates cleaner, more organized code. HTML files remain focused on structure and content, while JavaScript files handle behavior and functionality. This separation of concerns makes code easier to read, understand, and maintain, especially in larger projects with multiple developers. It also enables better code organization through multiple specialized JavaScript files.
External JavaScript files are cached by browsers after the first download. When a user visits multiple pages on your site that all reference the same external JavaScript file, the browser only downloads it once and reuses the cached version for subsequent pages. This dramatically speeds up page loads compared to inline scripts that must be parsed with every page load.
To reference external scripts, use the <script> tag with a src attribute pointing to the JavaScript file location: <script src="myScript.js"></script>. The src can be a relative path (src="js/app.js"), an absolute path (src="/scripts/main.js"), or even a URL to a file hosted elsewhere (src="https://cdn.example.com/library.js"). You can reference multiple external files by using multiple <script> tags, and they will execute in the order they appear in the HTML.
<!-- HTML file -->
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>