Html5 standards
Download as DOCX, PDF2 likes568 views
This document provides standards and guidelines for writing HTML documents. It outlines best practices for using semantic HTML5 elements and attributes, proper document structure with heading and labeling tags, image optimization, and prioritizing quality, speed and accessibility over production speed. Key points include always including alt attributes on images and title attributes on links, using HTML5 elements like header, nav and article, logical heading hierarchies, and favoring HTML and CSS over images for visual effects.
![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.](https://image.slidesharecdn.com/htmlstandards-130907214404-/85/Html5-standards-1-320.jpg)
Html5 standards
- 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.