Table of Contents

Alt and Title Attributes

meta settings


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries

Got these from

If the browser window is 600px or smaller, the background color will be

@media only screen and (max-width: 600px) { body { background-color: lightblue; } }
/* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} @media only screen and (min-width: 600px) { /* For tablets: */ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (max-width: 768px) { /* For mobile phones: */ [class*="col-"] { width: 100%; } }
The first section will span 3 columns, the second will span 9, and the third section will be displayed below the first two sections, and it will span 12 columns: <div class="row"> <div class="col-3 col-s-3">...</div> <div class="col-6 col-s-9">...</div> <div class="col-3 col-s-12">...</div> </div>

Making html more accessible

got this list from

New HTML5 tags

Taken from
<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


taken from,1&source=fssr and

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 <>
     =================================================================================================================== -->
<!-- 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" />
    <!-- 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>

Create a new document element

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=""> -


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)


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


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

input types - email, url (html5)

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

input type - number (html5)

some browsers add a spinbox selector to numbers
    <input type="number"
    <input type="submit" value="Submit">

datalist (html5)

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

more forms and other html5 stuff


like cookies only no expiration...
taken from
if (typeof(localStorage) == .undefined. ) {
    alert(.Your browser does not support HTML5 localStorage.);
} else {
    try {
        localStorage.setItem(.name., .Hello World!.); //saves to the 
                                                      //database, .key., 
    } 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

	in a fieldset...
legend in a fieldset...

details & summary

<details open> <summary>Click To See <p>Hello</p> </details>

Click To See