A General Word on Program/Page Structure

Example 9.2.  Our Canonical Structure for an HTML5 Page with JavaScript
<!doctype html>
<html>
    <head>
        <title>NMLs Canoncal HTML with JS</title>
        <meta charset='utf-8'/>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <script defer src='nQuery.js'></script>           <!-- example: function lib, project agnostic --> 
        <script defer src='ppkCookieLib.js'></script>     <!-- example: function lib, project agnostic -->
        <script defer src='canon0.js'></script>           <!-- example: project/page specific js -->
    </head>
    <body>
        <header>
            <!-- header and nav come here -->
        </header>
        <main>
            <!-- main content area -->
        </main>
        <footer>
            <!-- footer if relevant -->        
        </footer>
    </body>
</html>

Example 9.3.  An alternative Structure for an HTML5 Page with JavaScript
<!doctype html>
<html>
    <head>
        <title>Others Canoncal HTML with JS</title>
        <meta charset='utf-8'/>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    </head>
    <body>
        <header>
            <!-- header and nav come here -->
        </header>
        <main>
            <!-- main content area -->
        </main>
        <footer>
            <!-- footer if relevant -->        
        </footer>

        <script src='nQuery.js'></script>           <!-- example: function lib, project agnostic --> 
        <script src='ppkCookieLib.js'></script>     <!-- example: function lib, project agnostic -->
        <script src='canon1.js'></script>           <!-- example: project/page specific js -->
    </body>
</html>