by devon auerswald

1. HTML Standards
Third party scripts
● Any jquery websites with largely jquery content must have state+bookmarking with
correctly functioning forward and back buttons
○ Use ajaxy http://balupton.github.com/jquery-ajaxy/demo/
● For HTML5 backwards compatibility on IE we use HTML5 Shiv
○ <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Attributes
● Images always have an alt attribute (attribute, not tag)
○ <img src=”” alt=”description of the image”>
○ Alt attributes describe the image
○ “The generic rule for the content of the alt attribute is: use text that fulfills the
same function as the image.”
● Links always have a title attribute describing their destination
○ <a href=”” title=”description of the destination content”>anchor text</a>
○ Title attribute describes the destination content in less than 160 characters
○ Describe the destination or nature of the link
● Where necessary and useful, <input> elements should contain the Web speech API
attribute to enable voice recognition on most browsers. (chrome)
○ <input name=”search” id=”search” type=”text” x-webkit-speech>
● All form elements must have labels with the proper for attribute set
○ <label for=”name”>Name:</label>
<input type=”text” id=”name”>
● All form input/select/textarea elements must have the tabindex attribute beginning with 1
○ <input class="trial-storeurl" id="trial-storeurl-1" name="trial-storeurl" type="text"
placeholder="Store Name" tabindex="1">
● Fieldsets must have the form attribute to identify what form they belong to.

2. ○ <fieldset form="trial-signup-form">
Document Structure
● Title Tag, Meta Description, h1 must be relevant to each other and the pages content.
● Long-form copy should have anchors at each heading whether they are linked to or not
with matching “back” functionality to the #top anchor.
● Use logical document structure. Heading tags have a parent - child relationship.
○ <h1>
■ <h2>sub-topic of h1
● <h3>sub-topic of h2
■ <h2>sub-topic of h1
● <h3>sub-topic of h2
● <h3>sub-topic of h2
● <h3>sub-topic of h2
Elements
● We use HTML5
○ We use HTML5 Application caching
■ http://www.webreference.com/authoring/languages/html/HTML5-
Application-Caching/index.html
○ Here is a specific list of elements we know and use
■ <header>
■ <button>
■ <nav>
■ <mark>
■ <article>
■ <section>
■ <footer>
■ <hgroup>
■ <figure>
● <figcaption>
■ <video>
■ <details>
● <summary>
■ <datalist>
■ <output>
■ <dfn>

3. ■ Here are all the new elements in html5 http://www.w3.org/TR/html5-
diff/#new-elements
● Other specific tags we use
○ We use the <abbr> abbreviation tag
■ <abbr title=”United States of America”>USA</abbr>
■ The title attribute explains the abbreviation in all its glory. Always set the
title attribute.
○ We use the <address> tag
■ <address>7227 N 16th St<br/>Phoenix, AZ 85020</address>
■ Address tag is for contact information, we limit this to address, email
address, phone
○ We use the <blockquote> tag
■ <blockquote cite=”source url”>Content that has been copy+pasted from
another source</blockquote>
■ Always set the cite attribute
○ We use the <q> tag for short quotations
■ Stop <q>writing crap html</q>, the development team begged
○ We use <fieldset> to group related form objects and <legend> to define a caption
for the fieldset.
○ We use the <p> tag for text content. Paragraphs
○ We use the <hr> tag for horizontal rule when content is specifically changing
topic
○ We use the <small> tag for fine print
General
● When converting PSD->html/css
○ Use HTML5+CSS to create graphic effects whenever possible, use HTML and
CSS at all costs to avoid using an image file.
● Always use photoshop Save for web & devices, without exception, to minimize file size.
● Crop images as tight as possible. No white-space in images, use css padding/margin for
spacing.

4. ● Images that are part of content should never be set as a background image and should
always use an image tag.
● Images that are part of the template, not content, should be set using css backgrounds.
● Interactive items should always use tags that lend to interaction. Input, a, button
typically.
● We try to avoid “div-itus”, using obscene amounts of divs when they are not needed or
the existing tags could be used as the needed container instead.
● Write efficient good code that is superior. Quality > Production Speed.
● Page Speed and SEO should always be held in high regard when coding any HTML
document.