If you're new to programming like me, then you may only have minimal experience with the three pillars of web design, HTML, CSS, and JavaScript or JS. For your skills to advance to the next level you must understand how these pillars support the foundation on which your web sites and applications will be built. This blog will quickly highlight the connection between HTML and JS, by explaining the placement of the HTML element known as the <script> tag.
Why you want JS in your HTML?
JS is a scripting language that is used to provide interactivity to your formerly static webpages. This means that the page you build will have programmed actions or reactions to client-side interactions with page components. Even simpler, if it moves, updates, scrolls, toggles, turns, changes color, or appears out of nowhere chances are JS is behind the scenes getting work done. So here the takeaway is, JS makes your page and apps move.
How do You get it in there?
Although there are two branches there is only one root. No matter how much or exactly where you want to put the JS into your HTML file, it will always have to go inside of a <script> tag. The script tag is a dedicated HTML element that is used to run executable code for client-side interactions. When you want your page to react-to or retrieve-from the person visiting the site or using your app, the code that will enable this ability will be embedded inside the script tag like so <script>executable code </script>.
script tag example
<!-- This will display an alert pop up with the current date inside the string value -->
<script>
let today = new Date();
alert(`Today is ${today}, and everything is all good!`)
</script>
So, we just put the JS in the script tag?
Well yes but no. The <script> tag is your link between the two languages (HTML && JS) but there are two actual ways in which the code can be executed. You can either write the code you want to interact with HTML elements right into your code, or you can write all the code you want to interact with your page elements in a separate file and connect them to your HTML page via a link. These methods are knowns as in-line vs cached. Choosing the cached option, a separate file containing all your JS code would probably be the best if you plan to run your JS code on multiple pages, as it would save you from having to duplicate the inline scripts for each page that you create.
Inline
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Code Examples</title>
</head>
<body>
<!-- This inline script will create a <H1> element on top of page when loaded -->
<script>
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>
Cached
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Code Examples</title>
<!-- This is an example of linking HTML to extrnal file -->
<script src="myJavascriptFile.js"></script>
</head>
<body>
</body>
</html>
Where is the best place to put my scripts and why?
Making the choice of where to place your script tag is always up to the programmer but knowing some background information on how the code interacts with the page elements will help you make an informed decision. The most traditional placement of the <script> tag is within the <head> section of the HTML document which is at the top of the document preceding the body. Following our most traditional spot within the <head> section, would be the placement of the <script> tag as the last element in the body section prior to the closing </body> tag. If your page is not intensely interactive or you wish to only add small dynamic features to some of its components, then adding your inline JS at the top or bottom of the page is not going to noticeably affect the speed of your page load.
Script Tag at Top of File
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Code Examples</title>
<!-- Placing the script at top of your JS file-->
<script src="myJavascriptFile.js"></script>
</head>
<body>
</body>
</html>
Script Tag at Bottom of File
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Code Examples</title>
</head>
<body>
<!-- Placing the script at bottom of your JS file-->
<script src="myJavascriptFile.js"></script>
</body>
</html>
How JS affects the speed of your load is due to the fact that the DOM will pause loading HTML elements when it encounters JS code in the <script> tag. It will then resume downloading the remaining page content once the JS code has been interpreted. Of course, if you have numerous elements on the page, each with their own <script>’s this will drastically slow the loading of the page and make for a dull user experience. At this point, it is best practice to use the <script> to link your page to an external file containing all JS code intended for your site. Another small caveat to the placing the <script> at the bottom of the file is to avoid loading errors. JS code can NOT interact with HTML elements if they are not loaded, so again placing your <script> tag at the end of the <body> will help you avoid these communication breakdowns.
One Quick fix for this delay in page parsing, or loading of page elements, would be to add the defer attribute to the <script> tag. When the browser encounters a tag with this attribute it will wait to execute the code until the document has been fully loaded.
Defer attribute
<!-- Add defer attribute to signal that script content shouldn't be run unitl page loded -->
<script defer></script>
So, remember:
JS code can be entered into your projects directly => Inline or indirectly => Cached
<script>tags are the route to including JS in your HTML files<script>placement affects browser page parsing, so place mindfullyWhen in doubt Cache the code out
Although it is a simple choice, it can be one that vastly affects user experience on your page so make sure to choose your placement wisely. Your goal should be to have as smooth and short of load time as possible to ensure those users continue to come back and tell all their friends about the wonderful thing you have created. Thank you so much for your time, I hope that you learned something, and now that you know where your JS should go, knowing is half the battle!!!
Happy Coding!!!!
Sources:
- https://www.w3schools.com/
- https://developer.mozilla.org/en-US/
- https://www.tutorialspoint.com/javascript/javascript_placement.htm
- Javascript & Jquery interactive front-end web development by Jon Duckett
Top comments (0)