HTML

Shim for old IE browsers


.. code-block:: html

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

Forms


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

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)



initialization


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

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

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

<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 à &agrave;
Acute á &aacute;
Circumflex â &acirc;
Tilde ã &atilde;
Umlaut ä &auml;
Cedil ç &ccedil;