difference between putting scripts in body or outside body

Question

I have this structure now:

<!DOCTYPE html>
<html>
<head>

    <!-- stylesheets-->
    <link rel='stylesheet' href='/static/stylesheets/style.css'/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link href="/static/css/bootstrap/bootstrap-notify.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/portal/simple-sidebar.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/static/css/userProfileView/user-profile.css" media="screen" />

</head>

<body>
<main>
    <div name="main-div" id="main-div-id"></div>
</main>
</body>

<% if(env == 'development') {%> 

<script data-main="/static/app/js/main" src="/static/vendor/require.js"></script>

<% } else { %>

<script src="/static/app/optimized/optimized.js"></script>

<% } %>

</html>

as you can see, my javascripts are "at the bottom" but they are outside the body tags, not inside.

I am sure it makes a difference, but I am not sure what difference it makes to put the scripts outside the <head> and outside the <body> tags.

I think some people do it like that so all the `HTML` is loaded so any errors aren't thrown where elements can't be found. — Script47, Aug 07 '15 at 00:15
I would wonder if document.ready would fire sooner if the scripts are outside the body or inside? IDK — Alexander Mills, Aug 07 '15 at 00:17
Why not have file which kick starts all your other JS and have it wrapped with `window.onload`? — Script47, Aug 07 '15 at 00:18
@Script47, the top answer in the duplicate directly addresses the OP's question — Michael Benjamin, Aug 07 '15 at 00:21

Kit Sunde · Answer 1 · 2015-08-07T00:42:53.770

2

At first I thought I remembered that <head> and <body> was optional and that therefore it's okay to place <script> in <html>, but it's only partially true.

<script> isn't allowed inside of <html> because <html> may only contain <head> and <body>.

However if you don't declare <body> or <head> the browser will implicitly create them for you (under the right conditions). I.e. this is invalid:

<html>
  <head></head>
  <body><body>
  <script>console.log('test')</script>
</html>

This is implicitly creates a body element which the script tag is part of:

<html>
  <head></head>
  <script>console.log('test')</script>
</html>

This implicitly creates a head element which the script tag is part of:

<html>
  <script>console.log('test')</script>
</html>

So no, you should never place a <script> after </body>

edited Aug 07 '15 at 00:42

answered Aug 07 '15 at 00:18

Kit Sunde

35,972
25
125
179

1

@AlexMills The browser is really good at recovering from errors, but it is definitely an error. Supposedly it doesn't work in IE10, but I haven't verified. – Kit Sunde Aug 07 '15 at 00:44
Ok I will move it into the body just because this is the correct thing to do – Alexander Mills Aug 07 '15 at 00:46

difference between putting scripts in body or outside body

1 Answers1