Initial version of XHTML 1.1 Quick Reference
authorAntonio Ospite <ospite@studenti.unina.it>
Thu, 16 Jul 2009 14:56:38 +0000 (16:56 +0200)
committerAntonio Ospite <ospite@studenti.unina.it>
Thu, 16 Jul 2009 14:56:38 +0000 (16:56 +0200)
xhtml11_quick_reference_by_examples.html [new file with mode: 0644]

diff --git a/xhtml11_quick_reference_by_examples.html b/xhtml11_quick_reference_by_examples.html
new file mode 100644 (file)
index 0000000..d8d1855
--- /dev/null
@@ -0,0 +1,903 @@
+<!DOCTYPE
+ html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+     xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
+     xml:lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+  <title>XHTML 1.1 Quick Reference by examples</title>
+
+  <meta name="description" content="XHTML 1.1 Quick Reference by examples" />
+  <meta name="keywords" content="html,xhtml 1.1,tags,elements,reference,examples,css"/>
+
+  <meta name="copyright" content="Copyright (c) 2009 Antonio Ospite, some rights reserved" />
+  <meta name="author" content="Antonio Ospite"/>
+  <meta name="language" content="en"/>
+
+  <!--
+  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
+  -->
+
+  <style type="text/css">
+
+.red {
+color: red;
+}
+
+/* Style-able elements are those which have the 'style' attribute */
+
+/* Structure module */
+body {}
+html {} /* style-able? */
+/*
+head
+title
+*/
+
+/* Text module */
+abbr {}
+acronym {}
+address {}
+blockquote {}
+br {}
+cite {}
+code {}
+dfn {}
+div {}
+em {}
+h1 {}
+h2 {}
+h3 {}
+h4 {}
+h5 {}
+h6 {}
+kbd {}
+p {}
+pre {}
+q {}
+samp {}
+span {}
+strong {}
+var {}
+
+/* Hypertext module */
+a {}
+
+/* List module */
+dl {}
+dt {}
+dd {}
+ol {}
+ul {}
+li {}
+
+/* Object Module */
+object {}
+/*
+param
+*/
+
+/* Presentation module */
+b {}
+big {}
+hr {}
+i {}
+small {}
+sub {}
+sup {}
+tt {}
+
+/* Edit module */
+del {}
+ins {}
+
+/* Bidirectional text module */
+bdo {}
+
+/* Forms module */
+button {}
+fieldset {}
+form {}
+input {}
+label {}
+legend {}
+select {}
+optgroup {}
+option {}
+textarea {}
+
+/* Table module */
+caption {}
+col {}
+colgroup {}
+table {}
+tbody {}
+td {}
+tfoot {}
+th {}
+thead {}
+tr {}
+
+/* Image module */
+img {}
+
+/* Client-side Image Map Module */
+area {}
+/*
+map {}
+*/
+
+/* Scripting module */
+noscript {}
+/*
+script {}
+*/
+
+  </style>
+
+</head>
+
+<body>
+<h1>XHTML 1.1 Quick Reference by examples</h1>
+<a id="top" />
+
+<p>This page offers a quick reference by examples of all the elements specified by the <a title="eXtensible
+Hypertext Markup language 1.1"
+href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> W3C standard.</p>
+
+<p>This version of XHTML groups the elements by <a title="XHTML Abstract Modules"
+href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html">module</a>, and this is how they are presented here,
+with a very brief description and a section of examples of use.</p>
+
+<p>There are already other quick reference pages, like the one on <a title="XHTML Reference" href="http://xhtml.com">xhtml.com</a>, or <a title="XHTML Quick Reference Guide For XHTML 1.1" href="http://engelke.com/xhtmlref/">this one</a> or <a title="XHTML 1.0 reference with examples" href="http://www.zvon.org/xxl/xhtmlReference/Output/index.html">this other one with examples</a>. But this page wants to be a <strong>single-page</strong> brief reference; here it is not explained which attributes an element supports, but that can be seen reading the source code of the examples provided for each element. This page could be used as a summary about XHTML or as a precious tool to design <strong>complete</strong> (wrt. XHTML elements) CSS stylesheets for your XHTML pages, giving a quick glance at the results.</p>
+
+<h2>Modules</h2>
+
+<p>The XHTML 1.1 document type is made up of the XHTML <em>modules</em> shown 
+below. The elements, attributes, and minimal content models associated with 
+these modules are defined in the <a title="XHTML Modularization"
+  href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTML 
+  Modularization</a> document [<a title="XHTML Modularization"
+href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>]).  
+The elements are listed here for information purposes, but the definitions in 
+[<a title="XHTML Modularization" 
+  href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>] 
+should be considered definitive.
+In  this document, the module names in the list below link into the 
+definitions of
+the modules within the current version of [<a title="XHTML Modularization" 
+  href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>].</p>
+
+<dl>
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_structuremodule">Structure Module</a>*</dt>
+
+<dd><code>body</code>, <code>head</code>, <code>html</code>, <code>title</code></dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_textmodule">Text Module</a>*</dt>
+
+<dd>
+<code>abbr</code>, <code>acronym</code>, <code>address</code>, <code>blockquote</code>, <code>br</code>, <code>cite</code>, <code>code</code>, <code>dfn</code>, <code>div</code>, <code>em</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code>, <code>kbd</code>, <code>p</code>, <code>pre</code>, <code>q</code>, <code>samp</code>, <code>span</code>, <code>strong</code>, <code>var</code>
+<br />
+<br />
+
+<div class="note">
+The minimal content model for this module defines some content sets:
+<dl>
+<dt>Heading</dt>
+
+<dd><code>h1</code> | <code>h2</code> | <code>h3</code> | <code>h4</code> | <code>h5</code> | <code>h6</code></dd>
+
+<dt>Block</dt>
+
+<dd><code>address</code> | <code>blockquote</code> | <code>div</code> | <code>p</code> | <code>pre</code></dd>
+
+<dt>Inline</dt>
+
+<dd><code>abbr</code> | <code>acronym</code> | <code>br</code> | <code>cite</code> | <code>code</code> | <code>dfn</code> | <code>em</code> | <code>kbd</code> | <code>q</code> | <code>samp</code> | <code>code</code> | <code>strong</code> | <code>var</code></dd>
+
+<dt>Flow</dt>
+
+<dd><em>Heading</em> | <em>Block</em> | <em>Inline</em></dd>
+</dl>
+</div>
+
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">Hypertext Module</a>*</dt>
+
+<dd>
+<code>a</code>
+<div class="note">
+This module adds the <code>a</code> element to the <em>Inline</em> content set
+of the <strong>Text Module</strong>
+</div>
+
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_listmodule">List Module</a>*</dt>
+
+<dd>
+<code>dl</code>, <code>dt</code>, <code>dd</code>, <code>ol</code>, <code>ul</code>, <code>li</code>
+<div class="note">
+  This module also defines the content set <em>List</em> with the minimal content model
+(<code>dl</code> | <code>ol</code> | <code>ul</code>)+ and adds this set to the <em>Flow</em> content set of the
+<strong>Text Module</strong>.
+</div>
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_objectmodule">Object Module</a></dt>
+
+<dd>
+<code>object</code>, <code>param</code>
+<div class="note">
+When this module is used, it adds the <code>object</code> element to the <em>Inline</em> content set
+of the <strong>Text Module</strong>.
+</div>
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_presentationmodule">Presentation Module</a></dt>
+
+<dd>
+<code>b</code>, <code>big</code>, <code>hr</code>, <code>i</code>, <code>small</code>, <code>sub</code>, <code>sup</code>, <code>tt</code>
+<div class="note">
+When this module is used, the <code>hr</code> element is added to the
+<em>Block</em> content set of the <strong>Text Module</strong>. In addition,
+the <code>b</code>, <code>big</code>, <code>i</code>, <code>small</code>, <code>sub</code>, <code>sup,</code> and <code>tt</code> elements are
+added to the <em>Inline</em> content set of the <strong>Text Module</strong>.
+</div>
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_editmodule">Edit Module</a></dt>
+
+<dd>
+<code>del</code>, <code>ins</code>
+<div class="note">
+When this module is used, the <code>del</code> and <code>ins</code> elements
+are added to the <em>Inline</em>
+content set of the <strong>Text Module</strong>.
+</div>
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_bdomodule">Bidirectional Text Module</a></dt>
+
+<dd>
+<code>bdo</code>
+<div class="note">
+When this module is used, the <code>bdo</code> element is added to the
+<em>Inline</em> content set of the <strong>Text Module</strong>.
+</div>
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_extformsmodule">Forms Module</a></dt>
+
+<dd>
+<code>button</code>, <code>fieldset</code>, <code>form</code>, <code>input</code>, <code>label</code>, <code>legend</code>, <code>select</code>, <code>optgroup</code>, <code>option</code>, <code>textarea</code>
+
+<div class="note">
+This module defines two content sets:
+<dl>
+<dt>Form</dt>
+  <dd><code>form</code> | <code>fieldset</code></dd>
+<dt>Formctrl</dt>
+  <dd><code>input</code> | <code>select</code> | <code>textarea</code> | <code>label</code> | <code>button</code></dd>
+</dl>
+
+When this module is used, it adds the <em>Form</em> content set to the
+<em>Block </em>content set and it adds the <em>Formctrl</em> content set to
+the <em>Inline</em> content set as these are defined in the <strong>Text
+Module</strong>.
+</div>
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_tablemodule">Table Module</a></dt>
+
+<dd>
+<code>caption</code>, <code>col</code>, <code>colgroup</code>, <code>table</code>, <code>tbody</code>, <code>td</code>, <code>tfoot</code>, <code>th</code>, <code>thead</code>, <code>tr</code>
+<div class="note">
+When this module is used, it adds the <code>table</code> element to the
+<em>Block</em> content set of the <strong>Text Module</strong>.
+</div>
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_imagemodule">Image Module</a></dt>
+
+<dd>
+<code>img</code>
+<div class="note">
+When this module is used, it adds the <code>img</code> element to the <em>Inline</em> content set of
+the <strong>Text Module</strong>.
+</div>
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_imapmodule">Client-side Image Map Module</a></dt>
+
+<dd>
+<code>area</code>, <code>map</code>
+When this module is used, the <code>map</code> element is added to the <em>Inline</em> content set
+of the <strong>Text Module</strong>.
+</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_servermapmodule">Server-side Image Map Module</a></dt>
+
+<dd>Attribute <code>ismap</code> on <code>img</code></dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_intrinsiceventsmodule">Intrinsic Events Module</a></dt>
+
+<dd>Events attributes</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_metamodule">Metainformation Module</a></dt>
+
+<dd><code>meta</code></dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_scriptmodule">Scripting Module</a></dt>
+
+<dd><code>noscript</code>, <code>script</code></dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_stylemodule">Stylesheet Module</a></dt>
+
+<dd><code>style</code> element</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_styleattributemodule">Style Attribute Module</a> <em>Deprecated</em></dt>
+
+<dd><code>style</code> attribute</dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_linkmodule">Link Module</a></dt>
+
+<dd><code>link</code></dd>
+
+<dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_basemodule">Base Module</a></dt>
+
+<dd><code>base</code></dd>
+</dl>
+
+<p>XHTML also uses the Ruby Annotation module as defined in [<a href="http://www.w3.org/TR/xhtml11/references.html#ref_ruby">RUBY</a>]:</p>
+
+
+<h2>Examples</h2>
+
+<h3>Structure Module</h3>
+
+  We don't show explicit examples for elements in the
+  Structure module because they are Singleton elements, already used for the
+  structure of this very page. Although you can style the <code>body</code> 
+  and <code>html</code>
+  elements.
+
+<h3>Text module</h3>
+
+The Text module elements can be used inside a text to enrich it semantically.
+They are all style-able.
+
+<dl class="examples">
+  <dt>abbr</dt>
+  <dd>
+  We all know what <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr>
+  means, don't we?
+  </dd>
+
+  <dt>acronym</dt>
+  <dd>
+  On the contrary someone doesn't know <acronym title="RAdio Detection And Ranging">RADAR</acronym> is
+  an acronym.
+  </dd>
+
+  <dt>address</dt>
+  <dd>
+  Antonio is from
+  <address>Naples, Italy</address>
+  a strange, still beautiful, city.
+  </dd>
+
+  <dt>blockquote</dt>
+  <dd>
+  I usually say:
+  <blockquote cite="myself">Better looser than poser!</blockquote>
+  Not very widespread these days.
+  </dd>
+
+  <dt>br</dt>
+  <dd>Break the line here<br />this is new line</dd>
+
+  <dt>cite</dt>
+  <dd>Even if you are not Buddhist follow the <cite>Dalai Lama</cite>
+  suggestions.</dd>
+
+  <dt>code</dt>
+  <dd>Format source code using the <code>&lt;code&gt;&lt;/code&gt;</code>
+  element.</dd>
+
+  <dt>dfn</dt>
+  <dd>I wonder how much my silly definition of happiness:
+  <dfn>
+    Happiness is the limit of our mood function when “how I currently feel” approaches
+    to “how I want to feel”
+  </dfn>
+  is flawed...
+  </dd>
+
+  <dt>div</dt>
+  <dd>
+  DIVs are used to <div>divide</div> block elements.
+  </dd>
+
+  <dt>em</dt>
+  <dd>
+  This <em>em</em> is not really a typographical measure.
+  </dd>
+
+  <dt>h1</dt>
+  <dd>
+  This could be for <h1>Book</h1> titles.
+  </dd>
+
+  <dt>h2</dt>
+  <dd>
+  This could be for <h2>Chapter</h2> titles.
+  </dd>
+
+  <dt>h3</dt>
+  <dd>
+  This could be for <h3>Section</h3> titles.
+  </dd>
+
+  <dt>h4</dt>
+  <dd>
+  This could be for <h4>Sub-Section</h4> titles.
+  </dd>
+
+  <dt>h5</dt>
+  <dd>
+  This could be for <h5>Sub-Sub-Section</h5> titles.
+  </dd>
+
+  <dt>h6</dt>
+  <dd>
+  This could be for <h6>Sub-Sub-Sub-Section</h6> titles.
+  </dd>
+
+  <dt>kbd</dt>
+  <dd>
+  Do not press <kbd>Ctrl-Q</kbd>, really!
+  </dd>
+
+  <dt>p</dt>
+  <dd>
+  Is this before a paragraph?
+  <p>
+  A paragraph (from the Greek <em>paragraphos</em>, “to write beside” or “written
+  beside”) is a self-contained unit of a discourse in writing dealing with a
+  particular point or idea.
+  </p>
+  After a paragraph, definitely!
+  </dd>
+
+  <dt>pre</dt>
+  <dd>
+  How to use this element?
+  <pre>
+         (__) 
+         (oo) 
+   /------\/ 
+  / |    ||   
+ *  /\---/\ 
+    ~~   ~~   
+...."Have you mooed today?"...
+  </pre>
+  Aaah, this is c<kbd>^H</kbd>how.
+  </dd>
+
+  <dt>q</dt>
+  <dd>
+  British say about driving: <q cite="http://books.google.it/books?id=N2AOAAAAQAAJ&amp;pg=PA45&amp;lpg=PA45;">If you go
+    left you go right, if you go right you go wrong</q>.
+  </dd>
+
+  <dt>samp</dt>
+  <dd>
+  Let's clean up this file:
+  <samp>
+    tidy -xml -access 3 -utf-8 -i -m $THIS_FILE
+  </samp>
+  </dd>
+
+  <dt>span</dt>
+  <dd>
+  Because <span class="span">style</span> matters?
+  </dd>
+
+  <dt>strong</dt>
+  <dd>
+  Be <strong>strong</strong> rather than bold!
+  </dd>
+
+  <dt>var</dt>
+  <dd>
+  This file name is in <var>$THIS_FILE</var>... this is just an example, you
+  know.
+  </dd>
+
+</dl>
+
+<h3>Hypertext module</h3>
+
+<dl>
+  <dt>a</dt>
+  <dd>
+  Is this xhtml: <a title="Go on top of the page (internal link)"
+  href="#top">GOTO 0;</a>?<br />
+  Is this more accessible: <a title="Go on top of the page with an access key (internal link)"
+  accesskey="g" href="#top">IF KEY == 'g'; THEN GOTO 0; ENDIF;</a>? (Psst, use
+  <kbd>Alt-Shift-g</kbd> to test it in FireFox)<br />
+   It is <a title="Hypertext module (external link)"
+   href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">XHTML</a>
+   indeed.
+  </dd>
+</dl>
+
+<h3>List module</h3>
+
+For the list modules we show grouped examples, a <code>dd</code> or a
+<code>li</code> element alone does not have much sense.
+
+<dl>
+  <dt>dl, dt, dd</dt>
+  <dd>
+
+    <dl>
+      <dt>Recursion</dt>
+      <dd>
+        To understand recursion you must have understood what recursion means.
+      </dd>
+    </dl>
+
+  </dd>
+  <dt>ol, li</dt>
+  <dd>
+
+    <ol>
+      <li>
+        Milk
+      </li>
+      <li>
+        Cereals
+      </li>
+      <li>
+        Some juice
+      </li>
+    </ol>
+
+  </dd>
+  <dt>ul, li</dt>
+  <dd>
+
+    <ul>
+      <li>
+        Third
+      </li>
+      <li>
+        First
+      </li>
+      <li>
+        Second
+      </li>
+    </ul>
+
+  </dd>
+</dl>
+
+
+<h3>Object module</h3>
+
+<dl>
+  <dt>object, param</dt>
+  <dd>
+    <object data="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Utah_teapot_simple_2.png/300px-Utah_teapot_simple_2.png" type="image/png">
+
+    <param name="author" value="Martin Newell"/>
+    <param name="source" value="http://en.wikipedia.org/wiki/Utah_teapot"/>
+  </object>
+  </dd>
+</dl>
+
+<h3>Presentation module</h3>
+<dl>
+  <dt>b</dt>
+  <dd>
+    This is the <b>bold</b> style.
+  </dd>
+  <dt>big</dt>
+  <dd>
+    This is <big>bigger</big> than the rest.
+  </dd>
+  <dt>hr</dt>
+  <dd>
+  <hr />
+  </dd>
+  <dt>i</dt>
+  <dd>
+    This is the <i>italic</i> style.
+  </dd>
+  <dt>small</dt>
+  <dd>
+  Can you still <small>read it</small>?
+  </dd>
+  <dt>sub</dt>
+  <dd>
+  Remember, (10)<sub>10</sub> in binary is 1010.
+  </dd>
+  <dt>sup</dt>
+  <dd>
+  This is the 1<sup>st</sup> example that came to my kind.
+  </dd>
+  <dt>tt</dt>
+  <dd>
+    This is the <tt>teletype</tt> style.
+  </dd>
+</dl>
+
+<h3>Edit module</h3>
+
+<dl>
+  <dt>del, ins</dt>
+  <dd>
+    Are you a <del>deletionist</del><ins>inclusionist</ins> on Wikipedia?
+  </dd>
+</dl>
+
+
+<h3>Bidirectional Text module</h3>
+
+<dl>
+  <dt>bdo</dt>
+  <dd>
+    <bdo dir="rtl">Should I add an example in Arabian?</bdo>
+  </dd>
+</dl>
+
+<h3>Forms module</h3>
+
+For the Forms module a grouped example is provided:
+
+<dl>
+  <dt>button, fieldset, form, input, label, legend, select, optgroup, option, textarea</dt>
+  <dd>
+
+  <script type="text/javascript">
+//<![CDATA[
+function checksubmit()
+{
+  alert('No, really?');
+}
+//]]>
+</script>
+
+  <form id="example_form" action="" method="get">
+    <fieldset>
+      <legend>Example Form</legend>
+      <p>
+        <label for="username">Username:</label>
+        <input id="username" name="username" type="text" value="ao2" readonly="readonly" />
+      </p>
+      <p>
+        <label for="passwd">Password:</label>
+        <input id="passwd" name="passwd" type="password"/>
+      </p>
+      <p>
+        <label for="autologin">Auto Login:</label>
+        <input id="autologin" name="autologin" type="checkbox" checked="checked"/>
+      </p>
+      <p>
+        <label for="user_sex_male">Male:</label>
+        <input id="user_sex_male" name="user_sex" type="radio" checked="checked"/>
+      </p>
+      <p>
+        <label for="user_sex_female">Female:</label>
+        <input id="user_sex_female" name="user_sex" type="radio"/>
+      </p>
+      <p>
+        <label for="form_submit">Submit:</label>
+        <input id="form_submit" name="form_submit" type="submit" disabled="disabled" accesskey="S"/>
+      </p>
+      <p>
+        <label for="form_reset">Reset:</label>
+        <input id="form_reset" name="form_reset" type="reset"/>
+      </p>
+      <p>
+        <label for="pgp_key">PGP Key:</label>
+        <input id="pgp_key" name="pgp_key" type="file"/>
+      </p>
+      <input id="base_uid" name="base_uid" type="hidden" value="1000"/>
+      <p>
+        <label for="form_logo">logo:</label>
+        <input id="form_logo" name="form_logo" type="image" src="http://localhost/nologo" alt="Logo not available"/>
+      </p>
+
+      <label for="user_country">User Coutry:</label>
+      <select id="user_country" name="country">
+        <option value ="-1">Choose you country</option>
+        <optgroup label="Asia">
+          <option value ="1">Japan</option>
+          <option value ="2">Kore</option>
+          <option value ="3">China</option>
+        </optgroup>
+        <optgroup label="Europe" disabled="disabled">
+          <option value ="4">England</option>
+          <option value ="5">Italy</option>
+          <option value ="6">Germany</option>
+      </optgroup>
+      </select>
+
+      <p>
+        <label for="user_info">User Info:</label><br />
+        <textarea id="user_info" name="user_info">
+Some info like favourite dishes and so on...
+        </textarea>
+      </p>
+
+    </fieldset>
+
+    <p>
+      <input id="agree" name="agree" type="checkbox"/>
+      <label for="agree">I have read and understood the code</label>
+    </p>
+    <button id="send_button" type="submit" onclick="checksubmit();">Submit?</button>
+  </form>
+
+  </dd>
+</dl>
+
+<h3>Table module</h3>
+
+For the Table module a grouped example is provided:
+
+<dl>
+<dt>caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr</dt>
+<dd>
+
+<table id="example_table" summary="Example of table" title="Example table" frame="box">
+  <caption>This is an example</caption>
+  <colgroup>
+    <col span="1" align="char" char="," charoff="50%" style="background: #00ff00"/>
+    <col span="1" align="right"/>
+  </colgroup>
+  <colgroup span="2" align="right" style="background: #ff0000;" />
+
+  <thead>
+    <tr>
+      <th>Month</th>
+      <th>Savings</th>
+      <th>Void</th>
+      <th>Void</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td rowspan="2">January</td>
+      <td>$100</td>
+      <td>0</td>
+      <td>0</td>
+    </tr>
+    <tr>
+      <td>$200</td>
+      <td>0</td>
+      <td>0</td>
+    </tr>
+    <tr>
+      <td>February</td>
+      <td>$80</td>
+      <td>0</td>
+      <td>0</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Sum</td>
+      <td>$280</td>
+      <td colspan="2">0</td>
+    </tr>
+  </tfoot>
+
+</table>
+
+</dd>
+</dl>
+
+<h3>Image module</h3>
+
+<dl>
+<dt>img</dt>
+<dd>
+
+This is an image: <img alt="No image" title="W3c logo"
+src="http://www.w3.org/Icons/w3c_main" style="vertical-align: middle;"/> centered on the line. 
+
+</dd>
+</dl>
+
+<h3>Client-side Image Map module</h3>
+
+<dl>
+<dt>map, area</dt>
+<dd>
+
+  <map id="map1" name="map1">
+    <area nohref="nohref" alt="Vesuvio" title="Vesuvio" shape="poly"
+    coords="156,183, 180,177, 203,167, 213,162, 225,160, 244,163, 266,155, 278,157, 286,163, 309,170, 331,175, 353,179, 372,184, 325,183, 287,179, 256,182, 232,184, 196,183, 156,183, 156,183, 156,183" />
+    <area href="http://en.wikipedia.org/wiki/Napoli" alt="Napoli" title="Napoli" shape="poly"
+    coords="0,360, 480,360, 480,272, 410,259, 386,257, 423,278, 408,283, 384,278, 342,286, 260,272, 208,261, 173,231, 215,219, 272,212, 308,208, 253,204, 218,201, 129,201, 57,197, 0,188, 0,360" />
+    <area nohref="nohref" alt="Moon" title="Moon" shape="circle"
+    coords="442,128,10" />
+  </map>
+  <img src="http://silvioirio.files.wordpress.com/2008/01/napoli2.jpg" alt="Napoli" usemap="#map1" />
+
+</dd>
+</dl>
+
+<h3>Server-side Image Map module</h3>
+
+<dl>
+<dt>Attribute ismap on img</dt>
+<dd>
+TBD
+</dd>
+</dl>
+
+<h3>Intrinsic Events module</h3>
+
+<dl>
+<dt>Events attributes</dt>
+<dd>
+TBD
+</dd>
+</dl>
+
+<h3>Metainformation module</h3>
+
+<dl>
+<dt>meta</dt>
+<dd>
+TBD
+</dd>
+</dl>
+
+<h3>Scripting module</h3>
+
+<dl>
+<dt>script, noscript</dt>
+<dd>
+TBD
+</dd>
+</dl>
+
+<h3>Stylesheet module</h3>
+
+<dl>
+<dt>style</dt>
+<dd>
+TBD
+</dd>
+</dl>
+
+<h3>Link module</h3>
+
+<dl>
+<dt>link</dt>
+<dd>
+TBD
+</dd>
+</dl>
+
+<h3>Base module</h3>
+
+<dl>
+<dt>base</dt>
+<dd>
+TBD
+</dd>
+</dl>
+
+</body>
+</html>