Where should script tags be placed within index.html?

I’ve never used script tags like these before,

Where should it be placed?

The very last, at the end, after? </html>
<script type="text/javascript" src="script.js"></script>

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>


</body>
</html>

Would it go right before the closing? </body>

<script type="text/javascript" src="script.js"></script>

</body>
</html>
2 Likes

Hi there asasass.

yes, that is correct, but note that…

<script src="script.js"></script>

…is sufficient. :winky:

coothead

3 Likes

Is this one needed?
type="text/css"

<link href="styles.css" rel="stylesheet" type="text/css"/>

Hi there asasass,

<link href="styles.css" rel="stylesheet" media="screen">

…is correct. :winky:

coothead

1 Like

Why don’t you use the free W3.org online validator that I posted in your previous topic.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fcoding24765.github.io%2Fmymusicgadget%2F

Edit:

I just tested the link and the result is a HTTP 404 response. The link did work so it looks as though sections should be temporarily moved or hidden until the results are shown

Once a bare bones web page results are shown then gradually include the missing sections until the problem reoccurs then fix the errors…

See Scripts in HTML documents. It is a highly technical and authoritive document. It says the script element may appear any number of times in the HEAD or BODY of an HTML document. I think it is typically put in the head element but I often see it in the body too.

Not the head these days. Placing scripts at the end of the body is the most recommended technique, as that simplifies a lot of things and doesn’t require using event handlers to work with elements on the page.

Nowadays the head is only for scripts that cannot work well from the end of the body, which is an extreme rarity. The standard default is to place scripts at the end of the body.

5 Likes

in head section
for example

<head>..
<script></script>
</head>
<body>

In the head section makes it impossible to work with elements on the page, unless you wait for and event such as the onload event. That can be quite a long wait.

The better alternative is to place the scripts at the end of the body. The only main reason why the body isn’t suitable is if you were using an ancient web browser such as Netscape 2.

6 Likes

Look at the HTML for this page, the one you are viewing now. There are a few script tags at the bottom but there are many in the head.

I sure do not understand that. Older technologies, such as C and C++, do not parse the entire file prior to semantic analysis. I am not familiar with HTML being like that. Regardless, the onload event is often used. What can be done prior to the onload event that will work in the body that won’t work in the head?

There are actually a lot of errors in Discourse (the software that runs the forums). If you are feeling brave, you can open the console log and look at all the errors. :unhappy:

1 Like

Look at the HTML for this page, the one you are viewing now. There are a few script tags at the bottom but there are many in the head.

There could be a number of reasons for this. Do not take 1-offs as the way you should do things or that they are right for the other 99.999% of use cases. @Paul_Wilkins is absolutely correct. You should never load any script tags in the head, unless you specifically know why you want to do that.

4 Likes

Like analytics scripts, for example.

The following works. I get “interactive | complete | loaded” in the “para” paragraph.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
<script>
	document.onreadystatechange = statechange;
	function statechange() {
		para.innerHTML += document.readyState + " | ";
	}
	function loaded() {
		para.innerHTML += " loaded";
	}
</script>
</head>
<body onload="loaded()";>

<p id="para"></p>

</body> 
</html>

Hi there SamuelCalifornia,

this type of coding…

<body onload="loaded()";>

…really should be avoided, it is an outdated process. :winky:

Put the script before the closing tag…

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

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

</head>
<body>

<script>
(function( d ) {
   'use strict';
   d.onreadystatechange = function () {
      console.log( d.readyState );
   }
}( document ));	
</script>

</body> 
</html>

coothead

As best as I understand impossible to work with elements on the page, I provided an example where that is not true. I still do not have a clear explanation and/or example of why most scripts must be put at the bottom of the body. And that is highly on-topic for the question.

Hi there SamuelCalifornia,

you are forced to use…

<body onload="loaded()">

…which is a no-no, to make this…

function loaded() {
		para.innerHTML += " loaded";
	}

…work in the head section. :unhappy:

Putting scripts before the closing body tag helps avoid this
sloppy coding and other possible nasty consequences. :winky:

coothead

And you deliberately ignored the rest of that sentence, which was:

Thank you for demonstrating that waiting for events is required…

Loading scripts is a blocking action that prevents the rest of the page from showing, until the scripts are loaded. That results in slower perceived loading times for your page.

Putting scripts at the end of the body, just before the body tag, avoids the whole blocking aspect and your web pages can load with max performance.

5 Likes

For further details:

So in summary, place scripts at the end of the body for optimal safety and performance.

If you desperately need a few milliseconds faster, you can use async in the head instead along with event handling to monitor for the elements that you want to access. That though is a complication that provides no significant benefit for the majority of scripting.

1 Like