HTML 5 (Draft Recommendation) Code Snippets
Provides framework templates and code snippets for the Draft Recommendation of HTML 5 (HyperText Markup Language). One modern vocabulary for HTML and XHTML. These snippets are for the Custom HTML form of HTML 5 which will be used by 99.999% of web authors.
General editor notes or advisories within the snippets are contained within angle quotations: « ».
Version 2.0.3.1. Released: 2008-11-26.
Updates include adding input type search, input type color, the multiple file and email and the placeholder form control attribute.
References: HTML 5 (Editor's Draft) spec on W3C, HTML 5 (Draft Recommendation) spec on WHATWG.
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<meta name="description" content="Description for search engines">
</head>
<body>
<h1>Untitled</h1>
<p></p>
</body>
</html>
<!-- -->
id=""
lang=""
dir="«ltr/rtl»"
title=""
class=""
style=""
contenteditable="«true/false»"
onclick=""
ondblclick=""
onmousedown=""
]
onmouseup=""
onmouseover=""
onmousemove=""
onmouseout=""
onkeypress=""
onkeydown=""
onkeyup=""
onfocus=""
onblur=""
onload=""
onunload=""
onselect=""
onchange=""
onsubmit=""
onreset=""
onabort=""
onerror=""
<link rel="" type="" href="" title="">
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="presentme.css" title="Main Style">
<link rel="alternate stylesheet" type="text/css" href="change.css" title="Alternate Style">
<link rel="icon" type="image/x-icon" href="icons/website.ico">
<link rel="icon" type="image/png" href="icons/website.png">
<link rel="icon" type="image/jpeg" href="icons/website.jpg">
<link rel="icon" type="image/gif" href="icons/website.gif">
<style type="text/css" title="Main Style" media=""><!--
-->
</style>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"><!--
// -->
</script>
<noscript>
</noscript>
<base href="" target="">
rel="alternate"
rel="alternate" type="application/rss+xml"
rel="alternate" type="application/atom+xml"
rel="feed"
rel="alternate feed"
<link rel="meta" type="application/rdf+xml" href="metadata.rdf">
rel="index"
rel="help"
rel="license"
rel="up"
rel="first"
rel="prev"
rel="next"
rel="last"
rel="search"
rel="archives"
rel="glossary"
rel="chapter"
rel="section"
rel="subsection"
rel="appendix"
<style scoped type="text/css" title="Main Style" media=""><!--
-->
</style>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"><!--
// -->
</script>
<noscript>
</noscript>
<section>
</section>
<article>
</article>
<aside>
</aside>
<header>
</header>
<div>
</div>
<p>
</p>
<blockquote cite="">
</blockquote>
<address>
</address>
<pre>
</pre>
<ins cite="" datetime=""></ins>
<del cite="" datetime=""></del>
<br>
<span></span>
<q></q>
<sub></sub>
<sup></sup>
<a href=""></a>
<hr>
<mark></mark>
<time datetime=""></time>
<dfn></dfn>
<abbr« title=""»></abbr>
<code></code>
<em></em>
<strong></strong>
<small></small>
<cite></cite>
<samp></samp>
<kbd></kbd>
<var></var>
<bdo dir="«ltr/rtl»"></bdo>
<ruby>2008-06-21 <rp>(</rp><rt>YYYY-MM-DD</rt><rp>)</rp></ruby>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<form action="" method="«get/post»">
<p>
</p>
</form>
enctype="multipart/form-data"
<fieldset>
<legend>This is a form group</legend>
</fieldset>
<label for="«input id / select id / textarea id »"></label>
<output id="" name="" for=""></output>
<input type="text" id="" name="" value="" class="formFieldSize" maxlength="">
<input type="search" id="" name="" value="" class="formFieldSize" maxlength="">
<input type="password" id="" name="" class="formFieldSize">
<input type="email" id="" name="" value="" class="formFieldSize" maxlength="">
<input type="email" id="" name="" value="email@email1.example, email@email2.example" multiple class="formFieldSize" maxlength="">
<input type="url" id="" name="" value="" class="formFieldSize" maxlength="">
<input type="number" id="" name="" value="">
<input type="range" id="" name="" value="" min="" max="" step="">
<input type="file" id="" name="" class="formFieldSize">
<input type="file" id="" name="" multiple class="formFieldSize">
<input type="color" id="" name="" value="#000000">
<textarea id="" name="" « class="textAreaSize" / rows="5" cols="50" »>
</textarea>
<textarea id="" name="" « class="textAreaSize" / rows="5" cols="50" » readonly>
</textarea>
<input type="datetime" id="" name="" value="">
<input type="datetime-local" id="" name="" value="">
<input type="date" id="" name="" value="">
<input type="time" id="" name="" value="">
<input type="month" id="" name="" value="">
<input type="week" id="" name="" value="">
<input type="checkbox" id="" name="">
<input type="checkbox" id="" name="" checked>
<input type="radio" id="" name="" value="">
<input type="radio" id="" name="" value="" checked>
<datalist id="">
<option value=""></option>
<option value=""></option>
</datalist>
<select id="" name="">
<option value=""></option>
<option value=""></option>
</select>
<select id="" name="" multiple>
<option value=""></option>
<option value=""></option>
</select>
<optgroup label="">
<option value=""></option>
<option value=""></option>
</optgroup>
<option value=""></option>
<option value="" selected></option>
<input type="submit" value="">
<input type="reset" value="">
<input type="image" src="" alt="">
readonly
disabled
required
autocomplete="«on/off»"
min=""
max=""
step=""
list=""
placeholder=""
<ol «start=""»>
</ol>
<ol «start=""» reversed>
</ol>
<ul>
</ul>
<li></li>
<li «value=""»></li>
<dl>
</dl>
<dialog>
</dialog>
<dt></dt>
<dd>
</dd>
<table>
</table>
<colgroup span="1" class=""></colgroup>
<colgroup>
<col span="1" class="">
<col span="1" class="">
</colgroup>
<col span="1">
<caption></caption>
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
<tr>
</tr>
<td« headers=""»>
</td>
<th «id="" / scope="«row / col / rowgroup / colgroup»"»>
</th>
rowspan=""
colspan=""
<img src="" width="" height="" alt="(Alternative Text)">
<iframe src="" id="" name="" title="Frame of page" width="" height="">
<a href="" title="View page">Go to ...</a>
</iframe>
<iframe seamless src="" id="" name="">
<a href="" title="View page">Go to ...</a>
</iframe>
<iframe sandboxed src="" id="" name="" title="Frame of page" width="" height="">
<a href="" title="View page">Go to ...</a>
</iframe>
<iframe sandboxed="allow-same-origin allow-forms allow-scripts" src="" id="" name="" title="Frame of page" width="" height="">
<a href="" title="View page">Go to ...</a>
</iframe>
<canvas id="" width="" height=""></canvas>
<audio id="" src="" playcount="" start="" end="" loopstart="" loopend="" autoplay controls></audio>
<video id="" src="" poster="" width="" height="" playcount="" start="" end="" loopstart="" loopend="" autoplay controls></video>
<source src="" type="" media="">
<object data="" type=""« classid=""» width="" height="">
</object>
<param name="" value="">
<!-- Bring in Flash into MS Internet Explorer, Opera, Mozilla Firefox, SeaMonkey, Safari, Konqueror and other web browsers -->
<object data="myflashmvie.swf" type="application/x-shockwave-flash" id="myflashmovie" width="400" height="400">
<param name="movie" value="myflashmovie.swf">
<dialog class="transcript">
<dt>Persons name</dt>
<dd>Welcome to Graphics Interchange. We will present<br>...</dd>
</dialog>
</object>
<!--[if !ie]> Code to bring in Quicktime media to MS Internet Explorer 5+, Opera, Mozilla Firefox, SeaMonkey, Apple Safari, Konqueror and other web browsers -->
<object type="video/quicktime" data="quicktime.mov" width="400" height="400">
<param name="controller" value="true">
<!--<![endif]-->
<!--[if ie]>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="400" height="400">
<param name="src" value="quicktime.mov">
<param name="controller" value="true">
<![endif]-->
<dialog class="transcript">
<dt>Prof Sir</dt>
<dd>Welcome to Graphics Interchange. We will present<br>...</dd>
</dialog>
<!--[if ie]>
</object>
<![endif]-->
<!--[if !ie]>-->
</object>
<!--<![endif]-->
<figure>
<legend>Caption for figure 1</legend>
</figure>
<details id="">
<legend>Summary or label of popup details.</legend>
</details>
<details id="" open>
<legend>Summary or label of popup details.</legend>
</details>
Web-based Code Snippets are copywritten 2008 to Legend Scrolls and Peter Davison.
Web-based Code Snippets are licensed under the Creative Commons Attribution 3.0 Unported.
