Html5 standards
Upcoming SlideShare
Loading in...5
×
 

Html5 standards

on

  • 309 views

by devon auerswald

by devon auerswald

Statistics

Views

Total Views
309
Views on SlideShare
309
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft Word

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 standards Html5 standards Document Transcript

  • 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.
  • ○ <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>
  • ■ 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.
  • ● 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.