HTML

Sample template

<!doctype html>

<html lang="en-US">

    <head>

        <meta charset="utf-8">
        <title>Vokal Web Application</title>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width, minimal-ui">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <link rel="stylesheet" href="/build/project.css">

        <base href="/">

    </head>

    <body>

        <header>
            Vokal Web Application
        </header>

        <main>la la la</main>

        <footer>
            Copyright
        </footer>

        <script src="/build/project.js"></script>

    </body>

</html>

HTML5

Unless required by the client, all HTML should be HTML5. Use the new tags where appropriate (<section>, <nav>, etc.), being sure to do so semantically, not just in place of random <div> tags. HTML5 Doctor is an excellent resource for knowing the semantic meanings for these new (and even old) tags. Keep the document outline in mind, providing appropriate headers when using sectioning tags, even if you have to then hide those headers with CSS.

HTML5 allows flexibility in things that XHTML is much stricter about. Don't include superfluous attributes like language="JavaScript" in script tags, type="text/css" in style tags, or /> in "self-closing" tags like <br> or <img>. Keep things as simple as possible.

It is not necessary for HTML to pass the W3C validator, so custom attribute and element names may be used where appropriate. Most often these custom attributes and elements are expected to correspond to content that will be rendered by Angular or a similar framework. Do not substitute semantic elements with custom elements as this negatively impacts document semantics. For example, replacing <h1>Title</h1> with <sweet-header>Title</sweet-header> affects document semantics and is not acceptable.

Tag formatting

Use 4 spaces for each indent. If you are editing a third-party library or a legacy project that uses tabs or a different number of spaces, maintain the existing standards.

Breaking to a new line to keep line lengths under 120 characters is preferred, but not required. Any new line starting with a tag should always be one tab inwards from that tag's parent element. Use blank lines liberally so logical sections stand out from one another, but don't be afraid to remove them if you want to condense the formatting of repetitious code. Place the emphasis on what your files look like in your editor of choice (with accomodations for inline JavaScript or server-side templating languages) over how they look when you "view source" in a browser.

All HTML tags and attributes should be written in lowercase. Wrap any attribute values in double quotes.

Any Angular or JavaScript that is inserted or inlined into the HTML should follow the same standards as normal JavaScript or angular code.

Good: <div ng-click="followMe( person )">Follow {{ person }}</div>

Bad: <div ng-click="followMe(person)">Follow {{person}}</div>

Angular

ngClass

Always single quote class names:

No: ng-class="{ show-menu: activeProfileMenu, loaded: true }"

Yes: ng-class="{ 'show-menu': activeProfileMenu, 'loaded': true }"