Advanced Search

HTML5 Basic Template (w/ Comments)

/ Published in: HTML
Save to your folder(s)
Extremely helpful to anyone who is looking to improve performance and follow best practices in HTML/CSS

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2.  
  3. <!-- 
  4.      HTML5 is the latest evolution 
  5.      of standards that defines HTML. 
  6. -->
  7.  
  8. <!-- The best way to specify language in HTML5. -->
  9.  
  10. <html lang="en">
  11.  
  12.     <head>
  13.  
  14.         <!-- This is easier to type, and remember than http-equiv. -->
  15.  
  16.         <meta charset="utf-8">
  17.  
  18.         <!--
  19.             If you want to add more METAs,
  20.             just know not to go overboard
  21.             with them. 
  22.  
  23.             They're not relied on a lot 
  24.             nowadays. 
  25.  
  26.             I do suggest still using a 
  27.             few of them though, like
  28.             "charset."
  29.         -->
  30.  
  31.         <!--
  32.             Stylesheets prohibit progressive
  33.             rendering until they're all
  34.             downloaded.
  35.  
  36.             Keep them inside the HEAD to
  37.             eliminate this problem.
  38.  
  39.             NEVER apply CSS in-line internally,
  40.             always externally.
  41.  
  42.             Drop the 'type' attribute in HTML5
  43.             for optimization.
  44.         -->
  45.  
  46.         <link rel="stylesheet" href="style\">
  47.         <link rel="icon" href="image\">
  48.  
  49.         <!-- Appears on the tab in the browser. -->
  50.  
  51.         <title></title>
  52.  
  53.         <!-- 
  54.             As you may or may not have already
  55.             realized, HTML5 isn't supported in
  56.             older versions of internet explorer.
  57.  
  58.             To compensate for this, you should
  59.             use html5shiv to add support to
  60.             HTML5.
  61.  
  62.             The code used to do this, will only
  63.             work inside the HEAD, however.
  64.  
  65.             And for performance sake, this should
  66.             go after the CSS.
  67.         -->
  68.  
  69.         <!--[if lt IE 9]>
  70.             <script src="dist/html5shiv.js"></script>
  71.         <![endif]-->
  72.  
  73.     </head>
  74.  
  75. <!--
  76.     Use class instead of id
  77.     whenever possible.
  78.  
  79.     Id have more "weight"
  80.     than class when it comes
  81.     to applying styles.
  82.  
  83.     This can prevent some CSS 
  84.     classes applied on elements 
  85.     inside the container from 
  86.     working properly.
  87. -->
  88.  
  89. <body><div class="container">
  90.  
  91. <!-- 
  92.     Despite the addition of new
  93.     elements that justifably
  94.     captures a lot of DIV's territory,
  95.     you can still use them.
  96.  
  97.     The best practice is to use
  98.     DIVs when there is no other
  99.     more semantically appropiate
  100.     element that suits your
  101.     purpoe.
  102. -->
  103.  
  104. <header>
  105.  
  106.     <hgroup>
  107.         <h1>Title</h1>
  108.         <h2>Slogan</h2>
  109.     </hgroup>
  110.  
  111. </header>
  112.  
  113. <!--
  114.     In CSS, don't do:
  115.  
  116.         nav ul {
  117.  
  118.         }
  119.  
  120.     Instead, you should do:
  121.  
  122.         #navigation {
  123.  
  124.         }
  125.  
  126.     But you can still do:
  127.  
  128.         header {
  129.  
  130.         }
  131.  
  132.     if you need only one.
  133.  
  134.     Reduce those HTTP Request!
  135. -->
  136.  
  137. <nav><ul class="navigation">
  138.  
  139.     <!--
  140.         All text inside a HTML element
  141.         should be lowercase to make it
  142.         easier to read.
  143.     -->
  144.  
  145.     <li class="active"><a href="home.html">Home</a></li>
  146.     <li><a href="contact.html">Contact</a></li>
  147.     <li><a href="about.html">About</a></li>
  148.  
  149. </ul></nav>
  150.  
  151. <div class="main">
  152.  
  153.     <!--
  154.         Why would I use ARTICLE
  155.         when it should be SECTION
  156.         instead?
  157.  
  158.         From the specs, doing that
  159.         isn't the true, intended
  160.         purpose of that element.
  161.     -->
  162.  
  163.     <article>
  164.  
  165.         <!--
  166.             Utilize :first-child, :last-child and 
  167.             :nth-child to get non-classed elements
  168.             for CSS.
  169.         -->
  170.  
  171.         <hgroup>
  172.             <h1>Title</h1>
  173.             <h3>Author</h3>
  174.         </hgroup>
  175.  
  176.             <!--
  177.                 Don't do this:
  178.  
  179.                     <p>Message
  180.  
  181.                     <p>Message
  182.  
  183.                 You should close those tags.
  184.             -->
  185.  
  186.             <p>Message</p>
  187.             <p>Message</p>
  188.             <p>Message</p>
  189.  
  190.         <footer>Date</footer>
  191.  
  192.     </article>
  193.  
  194. </div>
  195.  
  196. <footer>Copyright</footer>
  197.  
  198. <!-- 
  199.     Scripts prevents progressive rendering, parallel 
  200.     downloads for all content below. 
  201.     Move them to the bottom for faster page loading.
  202.  
  203.     JQuery is a fast, small, and feature-rich
  204.     JavaScript library. "Write less, do more."
  205. -->
  206.  
  207. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  208.  
  209. <!--
  210.     You'll need a fallback for when the website
  211.     you're retrieving JQuery from, fails.
  212.  
  213.     There are other ways to do this than the
  214.     one I'm coding here (protocol-less URLS).
  215. -->
  216.  
  217. <script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>
  218.  
  219. <!-- 
  220.     Finally, always comment your code.
  221.     You'll be suprised at how much
  222.     faster you'll from it.
  223. -->
  224.  
  225. </div></body>
  226. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.