DEV Community

loading...
Cover image for JavaScript-HTML Link

JavaScript-HTML Link

bello profile image Bello ・Updated on ・2 min read
This article is sponsored by Hostgator - Get Started today for $0.99

Internal JavaScript

HTML Document allows JavaScript programs to be inserted in a <script> tag. The <script> tag is placed just before the closing <body/> tag. This allows the HTML parser to load all HTML content first before loading the JavaScript program.

Internal JavaScript

The <script> tag can also be placed just before the closing <head/>, but it is a bad practice because the <script> tag slows down the display of HTML contents.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal JavaScript</title>
</head>

<body>
    <p>This is the paragraph</p>

    <script>
        console.log('Hello World!')
    </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Edit on Stackblitz


External JavaScript

The src attribute in the <script> tag links an HTML document to an external JavaScript file.

JavaScript programs can also be placed in an external file. When the same JavaScript code is needed on different web pages, external scripts are the best option.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal JavaScript</title>
</head>

<body>
    <p>This is the paragraph</p>

    <script src='index.js'></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

JavaScript programs can be written in an external or separate file.

script.js

console.log("Hello World!");
Enter fullscreen mode Exit fullscreen mode

Alternatively, the <script> tag can be placed just before the closing </head> tag but including the defer attribute in it.

script.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript</title>
    <script src='index.js' defer></script>
</head>

<body>
    <p>This is the paragraph</p>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

The defer attribute makes sure the HTML Parser loads the HTML contents first before loading the script tag. It is the same as having the <script> tag before the closing </body> tag.

Edit on Stackblitz

Happy Coding!!!


Buy me a Coffee


Techstack | Hostgator

Techstack article is sponsored by Hostgator.

  • A ton of website hosting options
  • 99.9% uptime guarantee
  • Free SSL certificate
  • Easy WordPress installs
  • A free domain for a year

Learn more

Discussion (5)

pic
Editor guide
Collapse
gillemic profile image
Michael Gillett

Didn't know about defer. Awesome!

Collapse
bello profile image
Bello Author

Yes! You can also use async attribute instead... for unrelated script load...

Collapse
bello profile image
Bello Author

Yes! You can also use async attribute instead... for unrelated script load...

Collapse
aslasn profile image
Ande

Buddy, can you tell me the name of the font used in the cover photo?

Collapse
bello profile image
Bello Author

It is Gidole