Initial version of XHTML 1.1 Quick Reference
[xhtml11_quickref.git] / xhtml11_quick_reference_by_examples.html
1 <!DOCTYPE
2  html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml"
5      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
6      xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
7      xml:lang="en">
8 <head>
9   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10
11   <title>XHTML 1.1 Quick Reference by examples</title>
12
13   <meta name="description" content="XHTML 1.1 Quick Reference by examples" />
14   <meta name="keywords" content="html,xhtml 1.1,tags,elements,reference,examples,css"/>
15
16   <meta name="copyright" content="Copyright (c) 2009 Antonio Ospite, some rights reserved" />
17   <meta name="author" content="Antonio Ospite"/>
18   <meta name="language" content="en"/>
19
20   <!--
21   <link type="text/css" rel="stylesheet" media="all" href="style.css" />
22   -->
23
24   <style type="text/css">
25
26 .red {
27 color: red;
28 }
29
30 /* Style-able elements are those which have the 'style' attribute */
31
32 /* Structure module */
33 body {}
34 html {} /* style-able? */
35 /*
36 head
37 title
38 */
39
40 /* Text module */
41 abbr {}
42 acronym {}
43 address {}
44 blockquote {}
45 br {}
46 cite {}
47 code {}
48 dfn {}
49 div {}
50 em {}
51 h1 {}
52 h2 {}
53 h3 {}
54 h4 {}
55 h5 {}
56 h6 {}
57 kbd {}
58 p {}
59 pre {}
60 q {}
61 samp {}
62 span {}
63 strong {}
64 var {}
65
66 /* Hypertext module */
67 a {}
68
69 /* List module */
70 dl {}
71 dt {}
72 dd {}
73 ol {}
74 ul {}
75 li {}
76
77 /* Object Module */
78 object {}
79 /*
80 param
81 */
82
83 /* Presentation module */
84 b {}
85 big {}
86 hr {}
87 i {}
88 small {}
89 sub {}
90 sup {}
91 tt {}
92
93 /* Edit module */
94 del {}
95 ins {}
96
97 /* Bidirectional text module */
98 bdo {}
99
100 /* Forms module */
101 button {}
102 fieldset {}
103 form {}
104 input {}
105 label {}
106 legend {}
107 select {}
108 optgroup {}
109 option {}
110 textarea {}
111
112 /* Table module */
113 caption {}
114 col {}
115 colgroup {}
116 table {}
117 tbody {}
118 td {}
119 tfoot {}
120 th {}
121 thead {}
122 tr {}
123
124 /* Image module */
125 img {}
126
127 /* Client-side Image Map Module */
128 area {}
129 /*
130 map {}
131 */
132
133 /* Scripting module */
134 noscript {}
135 /*
136 script {}
137 */
138
139   </style>
140
141 </head>
142
143 <body>
144 <h1>XHTML 1.1 Quick Reference by examples</h1>
145 <a id="top" />
146
147 <p>This page offers a quick reference by examples of all the elements specified by the <a title="eXtensible
148 Hypertext Markup language 1.1"
149 href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> W3C standard.</p>
150
151 <p>This version of XHTML groups the elements by <a title="XHTML Abstract Modules"
152 href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html">module</a>, and this is how they are presented here,
153 with a very brief description and a section of examples of use.</p>
154
155 <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>
156
157 <h2>Modules</h2>
158
159 <p>The XHTML 1.1 document type is made up of the XHTML <em>modules</em> shown 
160 below. The elements, attributes, and minimal content models associated with 
161 these modules are defined in the <a title="XHTML Modularization"
162   href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTML 
163   Modularization</a> document [<a title="XHTML Modularization"
164 href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>]).  
165 The elements are listed here for information purposes, but the definitions in 
166 [<a title="XHTML Modularization" 
167   href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>] 
168 should be considered definitive.
169 In  this document, the module names in the list below link into the 
170 definitions of
171 the modules within the current version of [<a title="XHTML Modularization" 
172   href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>].</p>
173
174 <dl>
175 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_structuremodule">Structure Module</a>*</dt>
176
177 <dd><code>body</code>, <code>head</code>, <code>html</code>, <code>title</code></dd>
178
179 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_textmodule">Text Module</a>*</dt>
180
181 <dd>
182 <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>
183 <br />
184 <br />
185
186 <div class="note">
187 The minimal content model for this module defines some content sets:
188 <dl>
189 <dt>Heading</dt>
190
191 <dd><code>h1</code> | <code>h2</code> | <code>h3</code> | <code>h4</code> | <code>h5</code> | <code>h6</code></dd>
192
193 <dt>Block</dt>
194
195 <dd><code>address</code> | <code>blockquote</code> | <code>div</code> | <code>p</code> | <code>pre</code></dd>
196
197 <dt>Inline</dt>
198
199 <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>
200
201 <dt>Flow</dt>
202
203 <dd><em>Heading</em> | <em>Block</em> | <em>Inline</em></dd>
204 </dl>
205 </div>
206
207 </dd>
208
209 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">Hypertext Module</a>*</dt>
210
211 <dd>
212 <code>a</code>
213 <div class="note">
214 This module adds the <code>a</code> element to the <em>Inline</em> content set
215 of the <strong>Text Module</strong>
216 </div>
217
218 </dd>
219
220 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_listmodule">List Module</a>*</dt>
221
222 <dd>
223 <code>dl</code>, <code>dt</code>, <code>dd</code>, <code>ol</code>, <code>ul</code>, <code>li</code>
224 <div class="note">
225   This module also defines the content set <em>List</em> with the minimal content model
226 (<code>dl</code> | <code>ol</code> | <code>ul</code>)+ and adds this set to the <em>Flow</em> content set of the
227 <strong>Text Module</strong>.
228 </div>
229 </dd>
230
231 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_objectmodule">Object Module</a></dt>
232
233 <dd>
234 <code>object</code>, <code>param</code>
235 <div class="note">
236 When this module is used, it adds the <code>object</code> element to the <em>Inline</em> content set
237 of the <strong>Text Module</strong>.
238 </div>
239 </dd>
240
241 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_presentationmodule">Presentation Module</a></dt>
242
243 <dd>
244 <code>b</code>, <code>big</code>, <code>hr</code>, <code>i</code>, <code>small</code>, <code>sub</code>, <code>sup</code>, <code>tt</code>
245 <div class="note">
246 When this module is used, the <code>hr</code> element is added to the
247 <em>Block</em> content set of the <strong>Text Module</strong>. In addition,
248 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
249 added to the <em>Inline</em> content set of the <strong>Text Module</strong>.
250 </div>
251 </dd>
252
253 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_editmodule">Edit Module</a></dt>
254
255 <dd>
256 <code>del</code>, <code>ins</code>
257 <div class="note">
258 When this module is used, the <code>del</code> and <code>ins</code> elements
259 are added to the <em>Inline</em>
260 content set of the <strong>Text Module</strong>.
261 </div>
262 </dd>
263
264 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_bdomodule">Bidirectional Text Module</a></dt>
265
266 <dd>
267 <code>bdo</code>
268 <div class="note">
269 When this module is used, the <code>bdo</code> element is added to the
270 <em>Inline</em> content set of the <strong>Text Module</strong>.
271 </div>
272 </dd>
273
274 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_extformsmodule">Forms Module</a></dt>
275
276 <dd>
277 <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>
278
279 <div class="note">
280 This module defines two content sets:
281 <dl>
282 <dt>Form</dt>
283   <dd><code>form</code> | <code>fieldset</code></dd>
284 <dt>Formctrl</dt>
285   <dd><code>input</code> | <code>select</code> | <code>textarea</code> | <code>label</code> | <code>button</code></dd>
286 </dl>
287
288 When this module is used, it adds the <em>Form</em> content set to the
289 <em>Block </em>content set and it adds the <em>Formctrl</em> content set to
290 the <em>Inline</em> content set as these are defined in the <strong>Text
291 Module</strong>.
292 </div>
293 </dd>
294
295 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_tablemodule">Table Module</a></dt>
296
297 <dd>
298 <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>
299 <div class="note">
300 When this module is used, it adds the <code>table</code> element to the
301 <em>Block</em> content set of the <strong>Text Module</strong>.
302 </div>
303 </dd>
304
305 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_imagemodule">Image Module</a></dt>
306
307 <dd>
308 <code>img</code>
309 <div class="note">
310 When this module is used, it adds the <code>img</code> element to the <em>Inline</em> content set of
311 the <strong>Text Module</strong>.
312 </div>
313 </dd>
314
315 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_imapmodule">Client-side Image Map Module</a></dt>
316
317 <dd>
318 <code>area</code>, <code>map</code>
319 When this module is used, the <code>map</code> element is added to the <em>Inline</em> content set
320 of the <strong>Text Module</strong>.
321 </dd>
322
323 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_servermapmodule">Server-side Image Map Module</a></dt>
324
325 <dd>Attribute <code>ismap</code> on <code>img</code></dd>
326
327 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_intrinsiceventsmodule">Intrinsic Events Module</a></dt>
328
329 <dd>Events attributes</dd>
330
331 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_metamodule">Metainformation Module</a></dt>
332
333 <dd><code>meta</code></dd>
334
335 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_scriptmodule">Scripting Module</a></dt>
336
337 <dd><code>noscript</code>, <code>script</code></dd>
338
339 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_stylemodule">Stylesheet Module</a></dt>
340
341 <dd><code>style</code> element</dd>
342
343 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_styleattributemodule">Style Attribute Module</a> <em>Deprecated</em></dt>
344
345 <dd><code>style</code> attribute</dd>
346
347 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_linkmodule">Link Module</a></dt>
348
349 <dd><code>link</code></dd>
350
351 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_basemodule">Base Module</a></dt>
352
353 <dd><code>base</code></dd>
354 </dl>
355
356 <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>
357
358
359 <h2>Examples</h2>
360
361 <h3>Structure Module</h3>
362
363   We don't show explicit examples for elements in the
364   Structure module because they are Singleton elements, already used for the
365   structure of this very page. Although you can style the <code>body</code> 
366   and <code>html</code>
367   elements.
368
369 <h3>Text module</h3>
370
371 The Text module elements can be used inside a text to enrich it semantically.
372 They are all style-able.
373
374 <dl class="examples">
375   <dt>abbr</dt>
376   <dd>
377   We all know what <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr>
378   means, don't we?
379   </dd>
380
381   <dt>acronym</dt>
382   <dd>
383   On the contrary someone doesn't know <acronym title="RAdio Detection And Ranging">RADAR</acronym> is
384   an acronym.
385   </dd>
386
387   <dt>address</dt>
388   <dd>
389   Antonio is from
390   <address>Naples, Italy</address>
391   a strange, still beautiful, city.
392   </dd>
393
394   <dt>blockquote</dt>
395   <dd>
396   I usually say:
397   <blockquote cite="myself">Better looser than poser!</blockquote>
398   Not very widespread these days.
399   </dd>
400
401   <dt>br</dt>
402   <dd>Break the line here<br />this is new line</dd>
403
404   <dt>cite</dt>
405   <dd>Even if you are not Buddhist follow the <cite>Dalai Lama</cite>
406   suggestions.</dd>
407
408   <dt>code</dt>
409   <dd>Format source code using the <code>&lt;code&gt;&lt;/code&gt;</code>
410   element.</dd>
411
412   <dt>dfn</dt>
413   <dd>I wonder how much my silly definition of happiness:
414   <dfn>
415     Happiness is the limit of our mood function when “how I currently feel” approaches
416     to “how I want to feel”
417   </dfn>
418   is flawed...
419   </dd>
420
421   <dt>div</dt>
422   <dd>
423   DIVs are used to <div>divide</div> block elements.
424   </dd>
425
426   <dt>em</dt>
427   <dd>
428   This <em>em</em> is not really a typographical measure.
429   </dd>
430
431   <dt>h1</dt>
432   <dd>
433   This could be for <h1>Book</h1> titles.
434   </dd>
435
436   <dt>h2</dt>
437   <dd>
438   This could be for <h2>Chapter</h2> titles.
439   </dd>
440
441   <dt>h3</dt>
442   <dd>
443   This could be for <h3>Section</h3> titles.
444   </dd>
445
446   <dt>h4</dt>
447   <dd>
448   This could be for <h4>Sub-Section</h4> titles.
449   </dd>
450
451   <dt>h5</dt>
452   <dd>
453   This could be for <h5>Sub-Sub-Section</h5> titles.
454   </dd>
455
456   <dt>h6</dt>
457   <dd>
458   This could be for <h6>Sub-Sub-Sub-Section</h6> titles.
459   </dd>
460
461   <dt>kbd</dt>
462   <dd>
463   Do not press <kbd>Ctrl-Q</kbd>, really!
464   </dd>
465
466   <dt>p</dt>
467   <dd>
468   Is this before a paragraph?
469   <p>
470   A paragraph (from the Greek <em>paragraphos</em>, “to write beside” or “written
471   beside”) is a self-contained unit of a discourse in writing dealing with a
472   particular point or idea.
473   </p>
474   After a paragraph, definitely!
475   </dd>
476
477   <dt>pre</dt>
478   <dd>
479   How to use this element?
480   <pre>
481          (__) 
482          (oo) 
483    /------\/ 
484   / |    ||   
485  *  /\---/\ 
486     ~~   ~~   
487 ...."Have you mooed today?"...
488   </pre>
489   Aaah, this is c<kbd>^H</kbd>how.
490   </dd>
491
492   <dt>q</dt>
493   <dd>
494   British say about driving: <q cite="http://books.google.it/books?id=N2AOAAAAQAAJ&amp;pg=PA45&amp;lpg=PA45;">If you go
495     left you go right, if you go right you go wrong</q>.
496   </dd>
497
498   <dt>samp</dt>
499   <dd>
500   Let's clean up this file:
501   <samp>
502     tidy -xml -access 3 -utf-8 -i -m $THIS_FILE
503   </samp>
504   </dd>
505
506   <dt>span</dt>
507   <dd>
508   Because <span class="span">style</span> matters?
509   </dd>
510
511   <dt>strong</dt>
512   <dd>
513   Be <strong>strong</strong> rather than bold!
514   </dd>
515
516   <dt>var</dt>
517   <dd>
518   This file name is in <var>$THIS_FILE</var>... this is just an example, you
519   know.
520   </dd>
521
522 </dl>
523
524 <h3>Hypertext module</h3>
525
526 <dl>
527   <dt>a</dt>
528   <dd>
529   Is this xhtml: <a title="Go on top of the page (internal link)"
530   href="#top">GOTO 0;</a>?<br />
531   Is this more accessible: <a title="Go on top of the page with an access key (internal link)"
532   accesskey="g" href="#top">IF KEY == 'g'; THEN GOTO 0; ENDIF;</a>? (Psst, use
533   <kbd>Alt-Shift-g</kbd> to test it in FireFox)<br />
534    It is <a title="Hypertext module (external link)"
535    href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">XHTML</a>
536    indeed.
537   </dd>
538 </dl>
539
540 <h3>List module</h3>
541
542 For the list modules we show grouped examples, a <code>dd</code> or a
543 <code>li</code> element alone does not have much sense.
544
545 <dl>
546   <dt>dl, dt, dd</dt>
547   <dd>
548
549     <dl>
550       <dt>Recursion</dt>
551       <dd>
552         To understand recursion you must have understood what recursion means.
553       </dd>
554     </dl>
555
556   </dd>
557   <dt>ol, li</dt>
558   <dd>
559
560     <ol>
561       <li>
562         Milk
563       </li>
564       <li>
565         Cereals
566       </li>
567       <li>
568         Some juice
569       </li>
570     </ol>
571
572   </dd>
573   <dt>ul, li</dt>
574   <dd>
575
576     <ul>
577       <li>
578         Third
579       </li>
580       <li>
581         First
582       </li>
583       <li>
584         Second
585       </li>
586     </ul>
587
588   </dd>
589 </dl>
590
591
592 <h3>Object module</h3>
593
594 <dl>
595   <dt>object, param</dt>
596   <dd>
597     <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">
598
599     <param name="author" value="Martin Newell"/>
600     <param name="source" value="http://en.wikipedia.org/wiki/Utah_teapot"/>
601   </object>
602   </dd>
603 </dl>
604
605 <h3>Presentation module</h3>
606 <dl>
607   <dt>b</dt>
608   <dd>
609     This is the <b>bold</b> style.
610   </dd>
611   <dt>big</dt>
612   <dd>
613     This is <big>bigger</big> than the rest.
614   </dd>
615   <dt>hr</dt>
616   <dd>
617   <hr />
618   </dd>
619   <dt>i</dt>
620   <dd>
621     This is the <i>italic</i> style.
622   </dd>
623   <dt>small</dt>
624   <dd>
625   Can you still <small>read it</small>?
626   </dd>
627   <dt>sub</dt>
628   <dd>
629   Remember, (10)<sub>10</sub> in binary is 1010.
630   </dd>
631   <dt>sup</dt>
632   <dd>
633   This is the 1<sup>st</sup> example that came to my kind.
634   </dd>
635   <dt>tt</dt>
636   <dd>
637     This is the <tt>teletype</tt> style.
638   </dd>
639 </dl>
640
641 <h3>Edit module</h3>
642
643 <dl>
644   <dt>del, ins</dt>
645   <dd>
646     Are you a <del>deletionist</del><ins>inclusionist</ins> on Wikipedia?
647   </dd>
648 </dl>
649
650
651 <h3>Bidirectional Text module</h3>
652
653 <dl>
654   <dt>bdo</dt>
655   <dd>
656     <bdo dir="rtl">Should I add an example in Arabian?</bdo>
657   </dd>
658 </dl>
659
660 <h3>Forms module</h3>
661
662 For the Forms module a grouped example is provided:
663
664 <dl>
665   <dt>button, fieldset, form, input, label, legend, select, optgroup, option, textarea</dt>
666   <dd>
667
668   <script type="text/javascript">
669 //<![CDATA[
670 function checksubmit()
671 {
672   alert('No, really?');
673 }
674 //]]>
675 </script>
676
677   <form id="example_form" action="" method="get">
678     <fieldset>
679       <legend>Example Form</legend>
680       <p>
681         <label for="username">Username:</label>
682         <input id="username" name="username" type="text" value="ao2" readonly="readonly" />
683       </p>
684       <p>
685         <label for="passwd">Password:</label>
686         <input id="passwd" name="passwd" type="password"/>
687       </p>
688       <p>
689         <label for="autologin">Auto Login:</label>
690         <input id="autologin" name="autologin" type="checkbox" checked="checked"/>
691       </p>
692       <p>
693         <label for="user_sex_male">Male:</label>
694         <input id="user_sex_male" name="user_sex" type="radio" checked="checked"/>
695       </p>
696       <p>
697         <label for="user_sex_female">Female:</label>
698         <input id="user_sex_female" name="user_sex" type="radio"/>
699       </p>
700       <p>
701         <label for="form_submit">Submit:</label>
702         <input id="form_submit" name="form_submit" type="submit" disabled="disabled" accesskey="S"/>
703       </p>
704       <p>
705         <label for="form_reset">Reset:</label>
706         <input id="form_reset" name="form_reset" type="reset"/>
707       </p>
708       <p>
709         <label for="pgp_key">PGP Key:</label>
710         <input id="pgp_key" name="pgp_key" type="file"/>
711       </p>
712       <input id="base_uid" name="base_uid" type="hidden" value="1000"/>
713       <p>
714         <label for="form_logo">logo:</label>
715         <input id="form_logo" name="form_logo" type="image" src="http://localhost/nologo" alt="Logo not available"/>
716       </p>
717
718       <label for="user_country">User Coutry:</label>
719       <select id="user_country" name="country">
720         <option value ="-1">Choose you country</option>
721         <optgroup label="Asia">
722           <option value ="1">Japan</option>
723           <option value ="2">Kore</option>
724           <option value ="3">China</option>
725         </optgroup>
726         <optgroup label="Europe" disabled="disabled">
727           <option value ="4">England</option>
728           <option value ="5">Italy</option>
729           <option value ="6">Germany</option>
730       </optgroup>
731       </select>
732
733       <p>
734         <label for="user_info">User Info:</label><br />
735         <textarea id="user_info" name="user_info">
736 Some info like favourite dishes and so on...
737         </textarea>
738       </p>
739
740     </fieldset>
741
742     <p>
743       <input id="agree" name="agree" type="checkbox"/>
744       <label for="agree">I have read and understood the code</label>
745     </p>
746     <button id="send_button" type="submit" onclick="checksubmit();">Submit?</button>
747   </form>
748
749   </dd>
750 </dl>
751
752 <h3>Table module</h3>
753
754 For the Table module a grouped example is provided:
755
756 <dl>
757 <dt>caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr</dt>
758 <dd>
759
760 <table id="example_table" summary="Example of table" title="Example table" frame="box">
761   <caption>This is an example</caption>
762   <colgroup>
763     <col span="1" align="char" char="," charoff="50%" style="background: #00ff00"/>
764     <col span="1" align="right"/>
765   </colgroup>
766   <colgroup span="2" align="right" style="background: #ff0000;" />
767
768   <thead>
769     <tr>
770       <th>Month</th>
771       <th>Savings</th>
772       <th>Void</th>
773       <th>Void</th>
774     </tr>
775   </thead>
776   <tbody>
777     <tr>
778       <td rowspan="2">January</td>
779       <td>$100</td>
780       <td>0</td>
781       <td>0</td>
782     </tr>
783     <tr>
784       <td>$200</td>
785       <td>0</td>
786       <td>0</td>
787     </tr>
788     <tr>
789       <td>February</td>
790       <td>$80</td>
791       <td>0</td>
792       <td>0</td>
793     </tr>
794   </tbody>
795   <tfoot>
796     <tr>
797       <td>Sum</td>
798       <td>$280</td>
799       <td colspan="2">0</td>
800     </tr>
801   </tfoot>
802
803 </table>
804
805 </dd>
806 </dl>
807
808 <h3>Image module</h3>
809
810 <dl>
811 <dt>img</dt>
812 <dd>
813
814 This is an image: <img alt="No image" title="W3c logo"
815 src="http://www.w3.org/Icons/w3c_main" style="vertical-align: middle;"/> centered on the line. 
816
817 </dd>
818 </dl>
819
820 <h3>Client-side Image Map module</h3>
821
822 <dl>
823 <dt>map, area</dt>
824 <dd>
825
826   <map id="map1" name="map1">
827     <area nohref="nohref" alt="Vesuvio" title="Vesuvio" shape="poly"
828     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" />
829     <area href="http://en.wikipedia.org/wiki/Napoli" alt="Napoli" title="Napoli" shape="poly"
830     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" />
831     <area nohref="nohref" alt="Moon" title="Moon" shape="circle"
832     coords="442,128,10" />
833   </map>
834   <img src="http://silvioirio.files.wordpress.com/2008/01/napoli2.jpg" alt="Napoli" usemap="#map1" />
835
836 </dd>
837 </dl>
838
839 <h3>Server-side Image Map module</h3>
840
841 <dl>
842 <dt>Attribute ismap on img</dt>
843 <dd>
844 TBD
845 </dd>
846 </dl>
847
848 <h3>Intrinsic Events module</h3>
849
850 <dl>
851 <dt>Events attributes</dt>
852 <dd>
853 TBD
854 </dd>
855 </dl>
856
857 <h3>Metainformation module</h3>
858
859 <dl>
860 <dt>meta</dt>
861 <dd>
862 TBD
863 </dd>
864 </dl>
865
866 <h3>Scripting module</h3>
867
868 <dl>
869 <dt>script, noscript</dt>
870 <dd>
871 TBD
872 </dd>
873 </dl>
874
875 <h3>Stylesheet module</h3>
876
877 <dl>
878 <dt>style</dt>
879 <dd>
880 TBD
881 </dd>
882 </dl>
883
884 <h3>Link module</h3>
885
886 <dl>
887 <dt>link</dt>
888 <dd>
889 TBD
890 </dd>
891 </dl>
892
893 <h3>Base module</h3>
894
895 <dl>
896 <dt>base</dt>
897 <dd>
898 TBD
899 </dd>
900 </dl>
901
902 </body>
903 </html>