HTML5 Basic Template (Commented)

A very helpful HTML5 basic template with best practices in HTML/CSS

<!DOCTYPE html>
 
<!-- 
     HTML5 is the latest evolution 
     of standards that defines HTML. 
-->
 
<!-- The best way to specify language in HTML5. -->
 
<html lang="en">
 
    <head>
 
        <!-- This is easier to type, and remember than http-equiv. -->
 
        <meta charset="utf-8">
 
        <!--
            If you want to add more METAs,
            just know not to go overboard
            with them. 
 
            They're not relied on a lot 
            nowadays. 
 
            I do suggest still using a 
            few of them though, like
            "charset."
        -->
 
        <!--
            Stylesheets prohibit progressive
            rendering until they're all
            downloaded.
 
            Keep them inside the HEAD to
            eliminate this problem.
 
            NEVER apply CSS in-line internally,
            always externally.
 
            Drop the 'type' attribute in HTML5
            for optimization.
        -->
 
        <link rel="stylesheet" href="style\">
        <link rel="icon" href="image\">
 
        <!-- Appears on the tab in the browser. -->
 
        <title></title>
 
        <!-- 
            As you may or may not have already
            realized, HTML5 isn't supported in
            older versions of internet explorer.
 
            To compensate for this, you should
            use html5shiv to add support to
            HTML5.
 
            The code used to do this, will only
            work inside the HEAD, however.
 
            And for performance sake, this should
            go after the CSS.
        -->
 
        <!--[if lt IE 9]>
            <script src="dist/html5shiv.js"></script>
        <![endif]-->
 
    </head>
 
<!--
    Use class instead of id
    whenever possible.
 
    Id have more "weight"
    than class when it comes
    to applying styles.
 
    This can prevent some CSS 
    classes applied on elements 
    inside the container from 
    working properly.
-->
 
<body><div class="container">
 
<!-- 
    Despite the addition of new
    elements that justifably
    captures a lot of DIV's territory,
    you can still use them.
 
    The best practice is to use
    DIVs when there is no other
    more semantically appropiate
    element that suits your
    purpoe.
-->
 
<header>
 
    <hgroup>
        <h1>Title</h1>
        <h2>Slogan</h2>
    </hgroup>
 
</header>
 
<!--
    In CSS, don't do:
 
        nav ul {
 
        }
 
    Instead, you should do:
 
        #navigation {
 
        }
 
    But you can still do:
 
        header {
 
        }
 
    if you need only one.
 
    Reduce those HTTP Request!
-->
 
<nav><ul class="navigation">
 
    <!--
        All text inside a HTML element
        should be lowercase to make it
        easier to read.
    -->
 
    <li class="active"><a href="home.html">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html">About</a></li>
 
</ul></nav>
 
<div class="main">
 
    <!--
        Why would I use ARTICLE
        when it should be SECTION
        instead?
 
        From the specs, doing that
        isn't the true, intended
        purpose of that element.
    -->
 
    <article>
 
        <!--
            Utilize :first-child, :last-child and 
            :nth-child to get non-classed elements
            for CSS.
        -->
 
        <hgroup>
            <h1>Title</h1>
            <h3>Author</h3>
        </hgroup>
 
            <!--
                Don't do this:
 
                    <p>Message
 
                    <p>Message
 
                You should close those tags.
            -->
 
            <p>Message</p>
            <p>Message</p>
            <p>Message</p>
 
        <footer>Date</footer>
 
    </article>
 
</div>
 
<footer>Copyright</footer>
 
<!-- 
    Scripts prevents progressive rendering, parallel 
    downloads for all content below. 
    Move them to the bottom for faster page loading.
 
    JQuery is a fast, small, and feature-rich
    JavaScript library. "Write less, do more."
-->
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
<!--
    You'll need a fallback for when the website
    you're retrieving JQuery from, fails.
 
    There are other ways to do this than the
    one I'm coding here (protocol-less URLS).
-->
 
<script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>
 
<!-- 
    Finally, always comment your code.
    You'll be suprised at how much
    faster you'll from it.
-->
 
</div></body>
</html>

Source