head.daveops.net

Snippets for yer computer needs

HTML

HTML

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


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

Forms


 <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>
 </select>
 <input type="submit" value="Submit" />
 </form>

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) —————

initialization


 <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)
   }
 </script>

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'>
 </datalist>

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)


 <article>
   <hgroup>
  <h1>Title</h1>
  <h2>Byline</h2>
   </hgroup>
 </article>

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

http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013

HTML entities for accents

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