Learn how to use the HTML
Let’s take a look at both options.
<script> element can then either be put inside your document’s
Or outside the
<head> element, just before the closing
</body> element tag:
The difference is performance. And it can be a big difference.
<head>, the rendering of the rest of your page elements (your visible content) is blocked until the script is parsed and done running its code.
.js extension. E.g.
It works like this:
<!DOCTYPE html> <html> <head> <script src="main.js"></script> </head> <body> ... </body> </html>
Or right before the closing body element tag
<!DOCTYPE html> <html> <head></head> <body> ... <script src="main.js"></script> </body> </html>
We can use the
defer attribute on
<script defer src="main.js"></script>
And then put it inside your
<!DOCTYPE html> <html> <head> <script defer src="main.js"></script> </head> <body> ... </body> </html>
If your external script is put at the bottom (right before
</body>), this happens:
- First, the HTML code parses
- Then the HTML renders
It’s okay if you don’t fully understand this
defer concept right now, you will once you have some practical experience with it.
- You can only use the
main.jsfile is in a folder called
js, inside your root project directory, you import it like this
- You’ll sometimes see
<script>elements that has a language identifier, by using the