Script Tag
Any type of client side script can be written inside <script> tag in html. The script tag identifies a block of script code in the html page. It also loads a script file with src attribute.
The JavaScript code can also be embedded in <script> tag as shown below.
<script>
//write JavaScript here..
</script>
Html 4.x requires type attribute in script tag. The type attribute is used to identify the language of script code embedded within script tag. This is specified as MIME type e.g. text/javascript, text/ecmascript, text/vbscript etc. So, for the JavaScript code, specify type="text/javascript" in the script tag in html 4.x page.
<script type="text/javascript">
//write JavaScript here..
</script>
Html 5 page does not require type attribute in the <script> tag, because in HTML 5 the default script language is JavaScript
Script File
If you don't want to write JavaScript between script tag in a web page then you can also write JavaScript code in a separate file with .js extension and include it in a web page using <script> tag and reference the file via src attribute.
<script src="/PathToScriptFile.js"></script>
The script tag can appear any number of times in the <head> or <body> tag.
Script Tag into <head> Tag
You can include script tag into head tag as shown below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>JavaScript Demo</title>
<script>
//write JavaScript code here.
</script>
<script src="/PathToScriptFile.js"></<script>
</head>
<body>
<h1> JavaScript Tutorials</h1>
<p>This is JavaScript sample.</p>
</body>
</html>
The browser loads all the scripts in head tag before loading and rendering body html. It is recommended to include scripts before ending body tag if scripts are not required while window is loading.
Script at the end of <body>
Scripts can also be added at the end of body tag. This way you can be sure that all the web page resources are loaded and it is safe to interact with DOM.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>JavaScript Demo</title>
</head>
<body>
<h1> JavaScript Tutorials</h1>
<p>This is JavaScript sample.</p>
<!--Some HTML here.. -->
<script>
//write JavaScript code here..
</script>
<script src="/PathToScriptFile.js"></<script>
</body>
</html>
Thus, you can write JavaScript in script tag at appropriate places in a web page.
Points to Remember :
- JavaScript code must be written within <script> tag.
-
External JavaScript file (.js) can be referenced using
<script src="/PathToScriptFile.js"></script>where src attribute is used to specify the full path of .js file. - Html5 standard does not required type="text/javascript" attribute, whereas prior html standards requires type attribute.
- The <script> tag can be added into <head> or <body> tag.
- The script included into <head> tag may not be able to access DOM elements because <head> loads before <body>. Write script before ending of </body> tag if script code needs to access DOM elements.