Shim for old IE browsers

.. code-block:: html

<!--[if lt IE 9]>
<script src=""></script>


.. code-block:: html

<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-block:: html

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

Canvas (HTML 5)


.. code-block:: html

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

.. code-block:: html

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

Progress bar (HTML 5)

.. code-block:: html

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

Use JavaScript to move it around

Autofocus input (HTML 5)

.. code-block:: html

<input ... autofocus>

Patterned input (HTML 5)

Enter 15 digits

.. code-block:: html

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

Dropdown list for text input (HTML 5)

.. code-block:: html

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

Editable content

.. code-block:: html

<p contenteditable="true">

Link for phone numbers (mobile)

International calling code is required

.. code-block:: html

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

To handle an extension

.. code-block:: html

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

To use a fax line:

.. code-block:: html

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

Doctype (HTML 5)

<!doctype html>

Semantic tags (HTML 5)

.. code-block:: html



Good meta tags to have

HTML entities for accents

Modifier Example HTML
Grave à &agrave;
Acute á &aacute;
Circumflex â &acirc;
Tilde ã &atilde;
Umlaut ä &auml;
Cedil ç &ccedil;