Table of Contents

Alt and Title Attributes

Making html more accessible

got this list from boagworld.com.

New HTML5 tags

Taken from http://html5tutorial.net/html-5-reference/html-5-reference.html.
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<canvas> Defines graphics
<command> Defines a command button
<datagrid> Defines data in a tree-list
<datalist> Defines a dropdown list
<datatemplate> Defines a data template
<details> Defines details of an element
<dialog> Defines a dialog (conversation)
<embed> Defines external interactive content or plugin
<eventsource> Defines a target for events sent by a server
<figure> Defines a group of media content, and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<nav> Defines navigation links
<nest> Defines a nestingpoint in a datatemplate
<output> Defines some types of output
<progress> Defines progress of a task of any kind
<rule> Defines the rules for updating a template
<section> Defines a section
<source> Defines media resources
<time> Defines a date/time
<video> Defines a video

video

taken from http://www.infoworld.com/d/applications/how-use-html5-your-website-today-220?page=0,1&source=fssr and http://camendesign.com/code/video_for_everybody.

video can support multiple source tags, to support different browsers that may not support particular video formats. Valid fallback is flash, and single image.
<!-- "Video For Everybody" v0.4.2 by Kroc Camen of Camen Design <camendesign.com/code/video_for_everybody>
     =================================================================================================================== -->
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise       -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4.0                 -->
<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video    -->
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
    <!-- fallback to Flash: -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
        <!-- fallback image. note the title field below, put the title of the video there -->
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
            title="No video playback capabilities, please download the video below" />
    </object>
    </video>
    <!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
    <p>   <strong>Download Video:</strong>
        Closed Format:  <a href="__VIDEO__.MP4">"MP4"</a>
        Open Format:    <a href="__VIDEO__.OGV">"Ogg"</a>
</p>

Create a new document element

document.createElement("foo")
blah  (style foo)

Semantic tags

sample header footer article page

Smart forms

taken from How to use HTML5 on your website today
<input type="email"> -
<input type="url"> -
<input type="number"> -
<input type "tel"> -
<input type="email" placeholder="blah@company.com"> -

Fonts

taken from How to use HTML5 on your website today
CSS3 @font-face property
Check out Font Squirrel's @font-face Generator to add fonts in formats that can be handled by different browsers...

Shadows and curves

taken from How to use HTML5 on your website today
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Text Shadows

taken from How to use HTML5 on your website today
text-shadow: 5px 5px 3px #CCC;

Box Shadows

taken from How to use HTML5 on your website today
-webkit-box-shadow: 10px 10px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
box-shadow: 10px 10px 5px #666;

form fields (html5)

placeholder

text in text field goes away on click in field
<form>
    <input name="blah" placeholder="blah text">
    <input type="submit" value="Search">
</form>

autofocus

<form>
    <input name="blah2"><br />
    <input name="blah" autofocus><br />
    <input type="submit" value="Search">
</form>


input types - email, url (html5)

<form>
    <input type="email" placeholder="enter email addr"><br />
    <input type="url" placeholder="enter url"><br />
    <input type="submit" value="Submit">
</form>


input type - number (html5)

some browsers add a spinbox selector to numbers
<form>
    <input type="number"
        min="0"
        max="20"
        step="2"
        value="10">
    <input type="submit" value="Submit">
</form>

datalist (html5)

<form>
  <input list="colors" />
  <datalist id="colors">
    <option value="blue">
    <option value="green">
    <oprion value="orange">
    <option value="purple">
    <option value="red">
    <option value="yellow">
  </datalist>
</form>

more forms and other html5 stuff

localStorage()

like cookies only no expiration...
taken from http://html5tutorial.net/tutorials/working-with-html5-localstorage.html
if (typeof(localStorage) == .undefined. ) {
    alert(.Your browser does not support HTML5 localStorage.);
} else {
    try {
        localStorage.setItem(.name., .Hello World!.); //saves to the 
                                                      //database, .key., 
                                                      //.value.
    } catch (e) {
        if (e == QUOTA_EXCEEDED_ERR) {
            alert(.Quota exceeded!.); //data wasn.t successfully saved due 
                                      //to quota exceed so throw an error
        }
    }

    document.write(localStorage.getItem(.name.)); //Hello World!
    localStorage.removeItem(.name.);              //deletes the matching 
                                                  //item from the database
}

fieldset and legend

<fieldset>
	<legend>legend</legend>
	in a fieldset...
</fieldset>
legend in a fieldset...