Snippets for yer computer needs



Shim for old IE browsers ————————

 <!--[if lt IE 9]>
 <script src="<http://html5shim.googlecode.com/svn/trunk/html5.js>"></script>


 <form name="input" action="script.php" method="get">
 Username: <input type="text" name="user" />
 Favorite color:
 <select name="color">
   <option value="red">Red</option>
   <option value="blue">Blue</option>
 <input type="submit" value="Submit" />

Input attributes (HTML 5)

use {} to have the browser whine

Code samples

 <code>print 'hello world'</code> prints <samp>hello world</samp>

Canvas (HTML 5) —————


 <canvas id='id' height='600' width='800'>fallback</canvas>
 <script type='text/javascript'>
   var canvas = document.getElementById(id)
   if (canvas.getContext) {
 var context = canvas.getContext(type)

Fixed-meter bar (HTML 5) ————————

 <meter value='num' min='num' max='num' optimum='num'>fallback display</meter>

Progress bar (HTML 5) ———————

 <progress value='num' max='num'>fallback display</progress>

Use JavaScript to move it around

Autofocus input (HTML 5)

 <input ... autofocus>

Patterned input (HTML 5) ————————

Enter 15 digits

 <input type='text' pattern='[0-9]{15}'>

 <input type='text' ... list='listid'>
 <datalist id='id'>
   <option label='label1' value='value1'>
   <option label='label2' value='value2'>

Editable content

 <p contenteditable="true">

International calling code is required

 <a href="tel:+14035555555">403-555-5555</a>

To handle an extension

 <a href="tel:+14035555555p23">403-555-5555 ext. 23</a>

To use a fax line:

 <a href="fax:+14035555555">403-555-5555</a>

Doctype (HTML 5)

<!doctype html>

Semantic tags (HTML 5)


Good meta tags to have ———————-


HTML entities for accents

Modifier Example HTML
Grave à à
Acute á á
Circumflex â â
Tilde ã ã
Umlaut ä ä
Cedil ç ç