script tag VS Html codes priority

in the below codes:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    
    <span>1111</span>
    
    <script>
      alert("1");
    </script>
    
    <span>22222</span>
    
    <script>
      alert("2");
    </script>
    
      <span>Hello World</span>
     <script>
       alert("Hello World");
     </script>
      
  </body>
</html>

In the body tag there are some span tags that after each one there are one script tag. in the each script tag just an alert there is.

When I open these codes by a browser, I expect that span tags executed(rendered) before than alerts. because spans are before than alerts (alerts are after than spans!)

But In the real test, first alerts shown and then spans will appear.
Why?!