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