HTML: How to set up web page head and body with external file references

Question

I am new to HTML and programming and hope someone can help me with this.

I have written the code for the first pages of my website and am now about to upload these to the server for a test.

Therefore I would like to know if the basic structure of my documents is correct and would like to get some comments on the following:

Should I add or change anything regarding my document's head ?
Do I include the external style sheets the right way and at the right position + is it correct to start the href with "/" here ?
(I read CSS should be included before JS for better performance.)
Do I include the external JS and jQuery references the right way and at the right position ?
(I read JS should be included at the end of the body for better performance.)

Notes: All PHP / HTML pages of my website are saved as separate files in the same folder. This folder also contains a sub folder "includes" where my stylesheet and functions file are saved.

My HTML structure:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="author" content="John Doe" />
        <meta name="description" content="Created: 2015-06" />

        <base href="http://www.myURL.com/" target="_self" />

        <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>

        <!-- CSS -->        
        <link rel="stylesheet" type="text/css" href="includes/styles.css" />
        <!-- CSS - Font Awesome -->
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

        <title>My Page</title>
    </head>

    <body>
        <!-- ... -->
        <footer class="footer">         
            <!-- ... -->
        </footer>

        <!-- JavaScript -->
        <script src="includes/functions.js" type="text/javascript"></script>
    </body>
</html>

Many thanks in advance, Mike

Code review questions goes in [codereview.stackexchange.com](http://codereview.stackexchange.com/) — Cliff Burton, Jun 13 '15 at 12:48
, and tags are self closing in HTML and do not need the closing slash. Remove those. — Rob, Jun 13 '15 at 12:49
@Rob: Thanks for this - I thought this way I would cover XHTML as well, no ? — keewee279, Jun 13 '15 at 12:58
@Braim: Thanks for this as well - it worked this way but will follow your suggestion. — keewee279, Jun 13 '15 at 12:59
You aren't serving XHTML and you can't do both at the same time. This is a well-worn fallacy of far too many people. — Rob, Jun 13 '15 at 13:04
@Rob: Thanks - Ok, will apply then. It's all new to me and sometimes difficult to find the right instructions for such things so thanks again. :) — keewee279, Jun 13 '15 at 13:06

score 2 · Accepted Answer · answered Jun 13 '15 at 14:31

Looks good. Just a couple of minor things:
- You should add <meta http-equiv="X-UA-Compatible" content="IE=edge"> to ensure you don't get any MSIE compatibility mode issues.
- You may add favicon definitions in the head.
Yes, stylesheets belong in the head. The href depends on where you are storing the css files.
- If you want to include a stylesheet in the same folder as your HTML file, use href="styles.css"
- If you want to include a stylesheet in another folder, e.g. [css] folder, use href="css/styles.css"
- If you have HTML files in various folders and you don't want to rewrite your hrefs all the time for each HTML file, you can start the href with a slash to indicate search should start from the "root" of the server, e.g. href="/css/styles.css"
Move ALL your JS (including jQuery) to the bottom of the page, just before the closing body tag. Unless there's a very strong reason why you need JS to run before the page starts displaying, you should not have JS in the head.

There are a lot of things to learn, but it can be very fun and rewarding. Hope you have an enjoyable programming experience ahead. :)

Thanks a lot - this is really great and helps a lot ! :) My styles and functions are saved in a folder "includes" so I will use the href "includes..." for them. Regarding item 3, so I would just move the jQuery reference down to the body and above my JS reference ? — keewee279, Jun 13 '15 at 14:39
@keewee279 yes, move jQuery down to right above your other JS. Just another minor point: you don't need to specify type="text/javascript" for your scripts - save those bytes. In HTML5, the default is always JavaScript. And to date, there is no browser that uses another scripting language in place of JS. — light, Jun 13 '15 at 14:44

HTML: How to set up web page head and body with external file references

1 Answers1