Description:
This is my basic HTML5 page template. I hope it will help you get started when building your own web sites. If you have any suggestions for improvement or think I may have missed something, please feel free to let me know in the comments.
Notes:
Lines 2 - 5 add a class to the HTML element if the browser is IE and if it's earlier than IE 9, it will add a class for the version (IE 8, IE 7 or IE 6). This will allow you to target HTML at IE specifically and if needed, a specific version of IE.
Lines 8 - 12 are the standard head elements for any page including the basic meta tags for character set, site description, and author. You may add more depending on you requirements of course, but these are considered the bare minimum for best practice.
Line 15 is the meta for view port control on mobile deceives. It prevents mobile deceives, like smart phones, from auto-scaling your site down to fit the screen. This is particularly important for responsive sites. This version of the tag sets the initial scale to 1:1, but allows the user to zoom from there.
Lines 17 - 19 are the links to the CSS style-sheets. The first link (line 18) is to the Google CDN for normalize.css, my choice for CSS reset. You may want to host it directly on your site, or you may prefer a different CSS reset, if you do, it should go here. Line 19 points to your local style sheet. Don't forget to update the path.
lines 21 - 23 add the HTML5 Shiv for basic HTML5 compatibility for IE9 and earlier.
Lines 25 - 31 are for your favicons. You should update all the paths to point to your favicons. Line 26 is for your sites favicon as used by the browser.
Lines 28 through 31 are for Apple touch icons. If someone adds a link to your site to the homepage on their iOS device, it will use one of these icons (based on screen resolution). You will need to adjust the paths to point to your icons.
Lines 37 - 41 are the JavaScript links. All JavaScript links should be at the bottom of the page, just before the ending body tag. This ensures that all HTML elements are loaded before the JavaScript tries to manipulate them.
Line 40 links to the jQuery CDN on Google. Make sure that you get the right version of jQuery for your needs. Line 41 tests for the presence of jQuery (should be found if it was successfully download from the CDN). If jQuery is not found (CDN failed to load) it will add the link that points to your local copy of jQuery. Ensure you have the right version number and change the path to point to your local copy of jQuery.
Of course if you don't need jQuery, you can remove lines 40 and 41. If you have other jQuery libraries (angular.js, respond.js, etc.), this is where you should place them on the page.
Code:
1: <!DOCTYPE html>
2: <!--[if lt IE 7]><html class="ie ie6" lang="en"><![endif]-->
3: <!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
4: <!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
5: <!--[if (gte IE 9)|(IE)]><!--><html lang="en"><!--<![endif]-->
6:
7: <head>
8: <!-- Basic page elements -->
9: <meta charset="UTF-8">
10: <title>Document</title>
11: <meta name="description" content="Add a site description here">
12: <meta name="author" content="your name here">
13:
14: <!-- basic mobile elements -->
15: <meta name="viewport" content="width-device-width, initial-scale=1">
16:
17: <!-- CSS links -->
18: <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
19: <link rel="stylesheet" href="css/styles.css">
20:
21: <!--[if lt IE 9]>
22: <script src="dist/html5shiv.js"></script>
23: <![endif]-->
24:
25: <!-- Favicons -->
26: <link rel="shortcut icon" href="images/favicon.ico">
27:
28: <link rel="apple-touch-icon" href="touch-icon-iphone.png">
29: <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
30: <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
31: <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
32:
33: </head>
34: <body>
35:
36:
37: <!-- Add all script links just before the body tag -->
38:
39: <!-- jQuery -->
40: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
41: <script>window.jQuery || document.write('<script src="js/1.11.1/jquery.min.js">\x3C/script>')</script>
42: </body>
43: </html>
Shouldn't your HTML5 shiv use a CDN? Also, I think you have a typo on line 42.
ReplyDeleteFirst, I fixed the typo, thanks for pointing that out.
DeleteSecond, here's the reason I link the shiv locally.
Using a CDN to link to large script libraries (jQuery for example) will prevent those libraries from downloading from your site if your user has downloaded it from another site. With large companies (Amazon for example) pointing to the CDN, it's likely your users will already have the script library downloaded. Because it doesn't have to load from your site, it will make your site load faster.
The down side to the CDN is that sometimes, when the resource does need to be downloaded, there can be a slight, but noticeable delay in the download because the resource is coming from another domain. So for tiny resources like the HTML5shim (2.6 KB) I tend to store them locally.
Analytics?
ReplyDeleteI didn't include analytics in the basic template, but it's a fair point. It's unlikely you would build a page today without basic analytics attached. In most cases it would be added to the page right before the closing head tag, but check the documentation for the analytics system you are using (not everyone uses Google).
DeleteFor basic anaylitics, here's a link to Google anylitics: http://www.google.com/analytics/